An open API service indexing awesome lists of open source software.

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: 25 days ago
JSON representation

A sleek portfolio built with React and Tailwind CSS to showcase your skills, projects, and experience in a modern design.

Awesome Lists containing this project

README

        

## Version 2

> ![image](https://github.com/user-attachments/assets/ce36e52b-96c2-4b72-a1e8-1e68b9767f6c)
>
> 🔗 [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

![Portfolio Demo](https://i.postimg.cc/Dfr5jCQp/Screenshot-2025-01-02-120901.png)

---

## 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