Personal Portfolio Website — React JS

Personal Portfolio Website — React JS

Build a complete personal portfolio website the way professional React developers do: reusable components, React Router, Bootstrap 5, and a clean folder structure. This is Project 1 from the included 76-page PDF guide.

What you get

• Complete source code starter (portfolio-app/) with Navbar, Hero, About, Skills, Services, Projects, Experience, Education, Testimonials, Contact, Footer & Scroll-to-top
• PORTFOLIO_PROJECT_REACT_JS.pdf inside GUIDELINES/ — step-by-step from Vite setup to Netlify deployment
• Professional architecture: components/, pages/, layouts/, data/, hooks/

Technologies (from the guide)

• React JS · Vite · Bootstrap 5 · Bootstrap Icons · React Router · CSS

What students will learn

• React basics: JSX, components, props, state, event handling
• Hooks: useState, useEffect
• React Router: BrowserRouter, Routes, Route, NavLink, layouts & Outlet
• Controlled forms, validation, mapping arrays, conditional rendering
• Parent → child props (e.g. scroll to contact from Hero)
• Production build, GitHub, and Netlify deployment

Final portfolio UI sections

Navbar · Hero · About Me · Skills · Services · Projects · Experience · Education · Testimonials · Contact Form · Footer

How to use the ZIP

1. Extract the ZIP
2. Open GUIDELINES/PORTFOLIO_PROJECT_REACT_JS.pdf and follow page by page
3. Run npm install and npm run dev inside portfolio-app/
4. Customize content in src/data/ and deploy with npm run build