Skip to main content

​
Quick Start

Get your portfolio website running locally in just a few minutes. This guide will take you from zero to a fully functional development environment.
This quick start assumes you have Node.js v18+ and npm v9+ already installed. If not, see the Installation guide first.

​
Get Started in 5 Minutes

1

Clone the Repository

First, clone the portfolio repository from GitHub:
git clone https://github.com/xItzHypeR/portfolio.git
Navigate into the project directory:
cd portfolio
You can also fork the repository on GitHub first if you want to maintain your own copy with version control.
2

Install Dependencies

Install all required dependencies using your preferred package manager:
npm install
This will install:
  • React 19.2.0 - The core UI library
  • React Router DOM 7.13.1 - Client-side routing
  • Vite 7.3.1 - Build tool and dev server
  • EmailJS Browser - Contact form functionality
  • Styled Components - Additional styling utilities
  • ESLint 9 - Code linting and quality
The installation typically takes 30-60 seconds depending on your internet connection.
3

Start the Development Server

Launch the development server with hot module replacement:
npm run dev
You should see output similar to this:
VITE v7.3.1  ready in 234 ms

➜  Local:   http://localhost:5173/
➜  Network: http://192.168.1.100:5173/
➜  press h + enter to show help
The --host flag in the dev script allows you to access your portfolio from other devices on your local network using the Network URL.
4

Open in Your Browser

Open your browser and navigate to:
http://localhost:5173
You should see the portfolio homepage with:
  • Navigation bar at the top
  • Hero section with introduction
  • Scrolling technology marquee
  • Projects grid
  • About section
  • Contact form
  • Footer with links
The development server supports Hot Module Replacement (HMR), so any changes you make to the code will instantly reflect in the browser without a full page reload.
5

Make Your First Customization

Let’s customize the portfolio with your own information. Open the project in your favorite code editor:
code .  # VS Code
# or
cursor .  # Cursor
# or your preferred editor
Edit the projects data file at src/data/projects.js:
export const projects = [
  {
    id: 'your-project',
    title: 'YOUR PROJECT NAME',
    tagline: 'PROJECT TYPE',
    tech: 'React • TypeScript • Node.js',
    techList: ['React', 'TypeScript', 'Node.js'],
    desc: 'A brief description of what your project does.',
    fullDesc: 'A more detailed description...',
    challenge: 'What problem did you solve?',
    solution: 'How did you solve it?',
    stats: {
      role: 'Your Role',
      timeline: 'Project Timeline',
      team: 'Team Size'
    },
    img: '/your-project-image.webp',
    imgAlt: 'Project screenshot description'
  },
  // ... more projects
];
Save the file and watch the browser update automatically!

​
Verify Everything Works

After completing the steps above, verify that:
  • ✅ The homepage loads without errors
  • ✅ You can navigate to individual project detail pages by clicking on projects
  • ✅ The contact form renders properly
  • ✅ Hot Module Replacement works when you edit files
  • ✅ There are no console errors in the browser developer tools

​
Common First Steps

Now that your portfolio is running, here are the most common next steps:

​
1. Update Personal Information

Edit the Hero component to add your name and introduction: 
// src/components/Hero/Hero.jsx

​
2. Add Your Projects

Update the projects array in src/data/projects.js with your own work.

​
3. Configure Contact Form

Set up EmailJS credentials in the Contact component: 
// src/components/Contact/Contact.jsx

​
4. Add Your Resume

Place your CV/resume PDF in the public/ folder and update the download link.

​
5. Customize Styling

Modify CSS files in component folders to match your personal brand: 
src/components/*/[Component].module.css

​
Available Scripts

Here are all the npm scripts available in the project:
CommandDescription
npm run devStart development server with network access
npm run buildBuild optimized production bundle
npm run previewPreview production build locally
npm run lintRun ESLint to check code quality

​
Development Tips

Use the React Developer Tools browser extension to inspect component state and props while developing.

​
Fast Refresh

Vite’s Fast Refresh preserves component state during edits. If you edit a component file, only that component will re-render.

​
Network Access

The dev server runs with --host flag, allowing you to:
  • Test on mobile devices on the same network
  • Share your local development with teammates
  • Test responsive design on real devices

​
Browser Console

Keep the browser console open while developing to catch any warnings or errors from React or Vite.

​
Troubleshooting

If the dev server fails to start, check that port 5173 isn’t already in use by another application.

​
Port Already in Use

If you see a port conflict error: 
# Kill the process using port 5173
lsof -ti:5173 | xargs kill -9

# Or specify a different port
npm run dev -- --port 3000

​
Module Not Found Errors

If you encounter module errors: 
# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

​
Browser Cache Issues

If changes aren’t appearing:
  1. Hard refresh your browser (Ctrl+Shift+R or Cmd+Shift+R)
  2. Clear browser cache
  3. Restart the dev server

​
Next Steps

Now that you have the portfolio running:

Customization Guide

Learn how to customize every aspect of the portfolio

Deployment

Deploy your portfolio to production

Components Reference

Explore all available components

Configuration

Advanced configuration options
Need more detailed setup instructions? Check out the Installation Guide for troubleshooting and environment setup.

Build docs developers (and LLMs) love

Get started for freeTalk to us