https://github.com/seraprogrammer/portfolio
A sleek portfolio built with React and Tailwind CSS to showcase your skills, projects, and experience in a modern design.
https://github.com/seraprogrammer/portfolio
developer-portfolio modern-portfolio personal-portfolio personal-website portfolio portfolio-site portfolio-template portfolio-website react-portfolio react-resume software-developer-portfolio
Last synced: about 2 months ago
JSON representation
A sleek portfolio built with React and Tailwind CSS to showcase your skills, projects, and experience in a modern design.
- Host: GitHub
- URL: https://github.com/seraprogrammer/portfolio
- Owner: seraprogrammer
- Created: 2025-01-02T08:04:05.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-04-01T14:59:00.000Z (about 2 months ago)
- Last Synced: 2025-04-01T16:30:50.913Z (about 2 months ago)
- Topics: developer-portfolio, modern-portfolio, personal-portfolio, personal-website, portfolio, portfolio-site, portfolio-template, portfolio-website, react-portfolio, react-resume, software-developer-portfolio
- Language: JavaScript
- Homepage: https://codervai.vercel.app/
- Size: 1.19 MB
- Stars: 87
- Watchers: 1
- Forks: 49
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Version 2
> 
>
> 🔗 [View on GitHub](https://github.com/seraprogrammer/portfolio-v2)
> 🔗 [v2 Portfolio](https://codervai2.vercel.app)
# Portfolio Website
_____ _ __ _ _
| __ \ | | / _| | (_)
| |__) |__ _ __| |_| |_ ___ | |_ ___
| ___/ _ \| '__| __| _/ _ \| | |/ _ \
| | | (_) | | | |_| || (_) | | | (_) |
|_| \___/|_| \__|_| \___/|_|_|\___/
Welcome to my **portfolio website**! This site showcases my skills, experience, education, projects, and how to get in touch with me. It's built with **React** and **Vite** for a fast, modern web experience. You can explore my work, learn about my journey, and contact me directly.
---
## Demo
---
## Live Preview
Check out the live preview of the portfolio website here:
[**Live Demo**](https://codervai.vercel.app/)
---
### 🎯 Project Structure
```bash
portfolio/
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ │ ├── css/
│ │ │ ├── index.css
│ │ │ └── tomorrow.css
│ │ └── images/
│ ├── components/
│ │ ├── ui/
│ │ │ ├── Reusable Components/
│ │ │ │ ├── badge.jsx
│ │ │ │ ├── button.jsx
│ │ │ │ ├── card.jsx
│ │ │ │ ├── EducationLoader.jsx
│ │ │ │ ├── evervault-card.jsx
│ │ │ │ ├── flip-words.jsx
│ │ │ │ ├── icon-cloud.jsx
│ │ │ │ ├── meteors.jsx
│ │ │ │ ├── sparkles-text.jsx
│ │ │ │ └── tooltip.jsx
│ │ │ │
│ │ │ ├── Main Components/
│ │ │ │ ├── AnimatedGrid.jsx
│ │ │ │ ├── Contact.jsx
│ │ │ │ ├── Education.jsx
│ │ │ │ ├── enhanced-portfolio-card.jsx
│ │ │ │ ├── Experience.jsx
│ │ │ │ ├── global.jsx
│ │ │ │ ├── Header.jsx
│ │ │ │ ├── Hero.jsx
│ │ │ │ ├── Home.jsx
│ │ │ │ ├── PortfolioPage.jsx
│ │ │ │ ├── Projects.jsx
│ │ │ │ └── Skills.jsx
│ │ └── lib/
│ │ └── utils.js
│ ├── pages/
│ │ ├── About/
│ │ │ └── About.jsx
│ │ ├── Contact/
│ │ │ └── Contact.jsx
│ │ ├── Experience/
│ │ │ └── Experience.jsx
│ │ ├── Header/
│ │ │ └── Header.jsx
│ │ ├── Hero/
│ │ │ └── Hero.jsx
│ │ ├── Projects/
│ │ │ ├── Projects.jsx
│ │ │ └── testProjects.jsx
│ │ └── Skills/
│ │ └── Skills.jsx
│ ├── App.jsx
│ └── main.jsx
├── Configuration Files/
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── components.json
│ ├── index.html
│ ├── jsconfig.json
│ ├── package-lock.json
│ ├── package.json
│ ├── postcss.config.js
│ ├── README.md
│ ├── tailwind.config.js
│ ├── vercel.json
│ └── vite.config.js
```
---
## Sections of the Portfolio
The portfolio website consists of the following sections:
- **Home**: Introduction and a brief overview.
- **Skills**: A detailed list of my technical skills.
- **Experience**: My professional journey and work experience.
- **Education**: Academic background and certifications.
- **Projects**: A showcase of the projects I've worked on.
- **Contact**: Information on how to reach out to me.
---
## 💻 Technologies Used
- **Frontend:** React.js with Vite
- **Styling:** Tailwind CSS
- **Animations:** Framer Motion
- **Icons:** React Icons
- **Deployment:** Vercel
---
## Installation ⬇️
You will need to download **Git** and **Node** to run this project.
### Git
- Download and install Git from the official website: [Git Downloads](https://git-scm.com/)
- Verify the installation:
```bash
git --version
```
### Node
- Download and install Node.js from the official website: [Node.js Downloads](https://nodejs.org/)
- Make sure you have the latest version of both Git and Node on your computer.
- Verify the installation:
```bash
node --version
```
# Getting Started 🎯
### Fork and Clone the Repository 🚀
1. Click the **Fork** button at the top-right corner of the page to create your own copy of the repository.
2. After forking, open your terminal and run the following commands to clone the repo:
```bash
git clone https://github.com/seraprogrammer/portfolio.git
```
Navigate to the Project Directory 📂
Once the repository is cloned, change your directory to the project folder:
```bash
cd portfolio
```
Install Dependencies ⚙️
From the root directory of your project, install the necessary packages:
```bash
npm install
```
Run the Development Server 🚀
Start the development server to see your project live:
```bash
npm run dev
```
View the Project 🌐
Open your browser and visit http://localhost:5173/ to see the result! 🎉
## 📝 License
This project is licensed under the MIT License - see the LICENSE file for details.
---
### 🤝 Contributing
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
---
Made with ❤️ by Nazmul Hossain