DEV Community

Cover image for Build a Professional Developer Portfolio Website
Nazmul Hossain
Nazmul Hossain

Posted on

Build a Professional Developer 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


Live Preview

Check out the live preview of the portfolio website here:

Live Demo

🎯 Project Structure

portfolio/
β”œβ”€β”€ node_modules/
β”œβ”€β”€ public/
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ assets/
β”‚   β”œβ”€β”€ 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/
β”‚   β”œβ”€β”€ 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
    └── vite.config.js


Enter fullscreen mode Exit fullscreen mode

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
  • Verify the installation:
  git --version
Enter fullscreen mode Exit fullscreen mode

Node

  • Download and install Node.js from the official website: Node.js Downloads
  • Make sure you have the latest version of both Git and Node on your computer.
  • Verify the installation:
  node --version
Enter fullscreen mode Exit fullscreen mode

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:
  git clone https://github.com/seraprogrammer/portfolio.git
Enter fullscreen mode Exit fullscreen mode

Navigate to the Project Directory πŸ“‚
Once the repository is cloned, change your directory to the project folder:

cd portfolio
Enter fullscreen mode Exit fullscreen mode

Install Dependencies βš™οΈ
From the root directory of your project, install the necessary packages:

npm install
Enter fullscreen mode Exit fullscreen mode

Run the Development Server πŸš€
Start the development server to see your project live:

npm run dev
Enter fullscreen mode Exit fullscreen mode

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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (1)

Collapse
 
codervai profile image
Nazmul Hossain β€’

any suggestions? 

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay