https://github.com/Sofiane-Bahmed/portfolio-template
A sleek, modern, and open-source developer portfolio template. Features beautiful animations, a theme switcher, and is easily customizable. Fork it and create your own stunning portfolio in minutes
https://github.com/Sofiane-Bahmed/portfolio-template
framer-motion heroui iconify nextjs open-source portfolio-template reatctjs tailwindcss typescript webdevelopment
Last synced: 2 months ago
JSON representation
A sleek, modern, and open-source developer portfolio template. Features beautiful animations, a theme switcher, and is easily customizable. Fork it and create your own stunning portfolio in minutes
- Host: GitHub
- URL: https://github.com/Sofiane-Bahmed/portfolio-template
- Owner: Sofiane-Bahmed
- License: mit
- Created: 2025-07-05T15:48:53.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-07-29T20:54:52.000Z (3 months ago)
- Last Synced: 2025-07-29T23:10:40.556Z (3 months ago)
- Topics: framer-motion, heroui, iconify, nextjs, open-source, portfolio-template, reatctjs, tailwindcss, typescript, webdevelopment
- Language: TypeScript
- Homepage: https://portfolio-template-seven-murex.vercel.app/
- Size: 594 KB
- Stars: 29
- Watchers: 0
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Modern & Animated Portfolio Template
This is a modern, animated, and fully responsive portfolio template built with **nextjs**, **typescript**, **Tailwind CSS**, and **Framer Motion**. It's designed to be easily customizable and provides a great starting point for developers who want to create a stunning personal portfolio.
## Features
- **Modern UI/UX:** Clean and visually appealing design.
- **Smooth Animations:** Engaging animations powered by Framer Motion.
- **Responsive Design:** Looks great on all devices, from mobile to desktop.
- **Easy to Customize:** All portfolio data is centralized in a single file for easy updates.
- **Component-Based:** Built with reusable React components.
## Getting Started
### Prerequisites
- Node.js (v18 or higher)
- npm or yarn
### Installation
1. **Clone the repository:**
```bash
git clone https://github.com/Sofiane-Bahmed/portfolio-template.git
cd portfolio-template
```
2. **Install dependencies:**
```bash
npm install
# or
yarn install
```
3. **Run the development server:**
```bash
npm run dev
# or
yarn dev
```
The application will be available at `http://localhost:3000`.
### Building for Production
To create a production build, run:
```bash
npm run build
# or
yarn build
```
This will generate a `dist` directory with the optimized and minified files for deployment.
## Customization
All the data for the portfolio (personal information, projects, skills, etc.) is located in `data/index.ts`. You can easily customize the content by modifying this file.
### `data/index.ts`
This file exports a `DATA` object that contains all the information for your portfolio. Here's a breakdown of the structure:
- `home`: Content for the home page, including the hero section, skills overview, and testimonials.
- `about`: Information for the about page, including your profile, education, experience, and technologies.
- `projects`: A list of your featured projects, including details, images, and links.
- `contact`: Contact information and the Google Maps source for the contact page.
- `morphingTexts`: The texts used in the morphing text animations on each page.
- `navigation`: The links for the main navigation menu.
- `footer`: Content for the footer, including social links and services.
Simply update the values in this file to personalize your portfolio.
**How to Add Your CV**
1. `Upload Your CV` : Place your CV file in the `public` folder of the project.
2. `Update the Download Link` : Modify the `href` attribute of the "Download CV" button in the `hero.tsx` file to point to your uploaded CV.
Here's an example
```hero.tsx
}
size="lg"
variant="shadow"
>
Download CV
```
## Contact Form Setup (Email.js)
This template uses [Email.js](https://www.emailjs.com/) for handling contact form submissions without a backend. To set it up:
1. **Create an Email.js account:** If you don't have one, sign up at [Email.js](https://www.emailjs.com/).
2. **Create a new Email Service:** Go to Email Services and add a new service (e.g., Gmail, Outlook). Follow the instructions to connect your email account.
3. **Create a new Email Template:** Go to Email Templates and create a new template. You can use the default template or customize it. Make note of your **Template ID**.
Here's an example template you can use:
```jsx
A message by {{name}} ({{email}}) has been received with the subject
"{{subject}}". Kindly respond at your earliest convenience.
```
4. **Get your Public Key:** You can find your Public Key under **Account** -> **API Keys**.
5. **Configure Environment Variables:** Create a `.env.local` file in the root of your project (if it doesn't exist) and add the following environment variables:
```
NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_service_id
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_template_id
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_public_key
```
Replace `your_service_id`, `your_template_id`, and `your_public_key` with the values from your Email.js account.
6. **Restart your development server:** After adding the environment variables, restart your development server (`npm run dev` or `yarn dev`) for the changes to take effect.
## Technologies Used
- **[Next.js](https://nextjs.org/):** A React framework for production.
- **[React](https://react.dev/):** A JavaScript library for building user interfaces.
- **[Tailwind CSS](https://tailwindcss.com/):** A utility-first CSS framework.
- **[Framer Motion](https://www.framer.com/motion/):** A library for creating animations in React.
- **[HeroUI](https://www.heroui.com/):** A React UI library for beautiful and accessible components.
- **[Iconify](https://iconify.design/):** A library for using icons from various icon sets.
- **[TypeScript](https://www.typescriptlang.org/):** A typed superset of JavaScript.
## License
This project is licensed under the MIT License. See the `LICENSE` file for more details.