React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.

React Portfolio Site

This project is a personal portfolio website built using React and Vite, designed to demonstrate modern front-end development practices, component-based architecture, and client-side routing.

---

1. Project Initialization (Vite + React)

The project was created using Vite, a modern front-end build tool optimized for fast development and hot module replacement (HMR).

npm create vite@latest react-portfolio -- --template react
cd react-portfolio
npm install
npm run dev

Why Vite?

• Extremely fast dev server and rebuilds
• Native ES module support
• Minimal configuration
• Production-ready builds out of the box

The application runs locally using a Vite development server (typically on http://localhost:5173).

2. Application Entry Point (main.jsx)

src/main.jsx is the entry point of the React application.

Responsibilities:

• Mounts the React app to the DOM
• Wraps the app in React Strict Mode
• Enables client-side routing via BrowserRouter

<BrowserRouter>
  <App />
</BrowserRouter>

This allows navigation between pages without full page reloads.

3. Root Component (App.jsx)

App.jsx acts as the main application shell.

It:

• Defines the overall layout
• Renders persistent UI elements (navigation and footer)
• Defines all application routes

<Nav />
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/projects" element={<Projects />} />
  <Route path="/gallery" element={<Gallery />} />
  <Route path="/contact" element={<Contact />} />
  <Route path="*" element={<NotFound />} />
</Routes>
<Footer />

Navigation and footer remain visible while the main content changes dynamically.

4. Client-Side Routing (React Router)

The site uses React Router to simulate multiple pages within a single-page application (SPA).

Routes include:

• / → Home
• /about → About
• /projects → Projects
• /gallery → Gallery
• /contact → Contact
• • → 404 Not Found

Benefits:

• Faster navigation
• Deep linking
• No full page reloads

5. Project Structure

The project follows a clean and scalable folder structure:

src/
├── components/
│   ├── Nav.jsx
│   └── Footer.jsx
├── pages/
│   ├── Home.jsx
│   ├── About.jsx
│   ├── Projects.jsx
│   ├── Gallery.jsx
│   ├── Contact.jsx
│   └── NotFound.jsx
├── App.jsx
├── main.jsx
└── index.css

components/

Reusable UI elements shared across multiple pages.

pages/

Top-level page components rendered by React Router.

6. Navigation (Nav.jsx)

Navigation is implemented using NavLink from React Router.

<NavLink to="/projects">Projects</NavLink>

This allows:

• SPA-style navigation
• Active link styling based on the current route

7. Data-Driven Rendering (Projects Page)

The Projects page demonstrates rendering UI from data using JavaScript objects and arrays.

const projects = [
  {
    title: "Cash Register App",
    description: "Calculates change based on payment and drawer contents.",
    tags: ["JavaScript", "Logic"]
  }
];

Rendered using .map():

{projects.map(project => (
  <ProjectCard key={project.title} {...project} />
))}

Benefits:

• Cleaner JSX
• Easier maintenance
• Scales well as more projects are added

8. Styling (index.css)

Global styling is handled in src/index.css.

Includes:

• Responsive container widths
• Grid layouts
• Card-based UI components
• Consistent spacing and typography
• Subtle shadows and rounded corners

The design prioritizes clarity, accessibility, and professionalism without heavy frameworks.

9. Debugging & Error Resolution

A Vite import error occurred:

Failed to resolve import "./pages/Home.jsx"

Resolution steps:

• Created the missing pages/ directory
• Ensured file names and capitalization matched imports exactly
• Verified .jsx file extensions
• Restarted the development server

This highlights the importance of correct file paths and naming conventions in modern JavaScript tooling.

Summary

This project demonstrates:

• Core React fundamentals
• Component-based architecture
• Client-side routing
• Data-driven UI rendering
• Clean project organization
• Real-world debugging with modern tooling

It provides a solid foundation for adding advanced features such as dynamic routes, form handling, external APIs, and automated deployment.