Routing

The portfolio uses React Router DOM v7 for client-side navigation, enabling seamless transitions between pages without full page reloads.

Route Structure

The application has two main routes:

/                    → Home page (portfolio landing)
/project/:id         → Individual project case study

Route Implementation

Routes are defined in src/App.jsx:

src/App.jsx

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ProjectDetail from './components/ProjectDetail/ProjectDetail';

function Home() {
  return (
    <>
      <Navbar />
      <main className="bg-grid-pattern" style={{ paddingTop: '80px' }}>
        <Hero />
        <Marquee />
        <Projects />
        <About />
        <Contact />
      </main>
      <Footer />
      <HireMe />
    </>
  );
}

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/project/:id" element={<ProjectDetail />} />
      </Routes>
    </Router>
  );
}

Home Route (`/`)

The home route renders the complete portfolio landing page as a single scrollable experience:

Navbar

Fixed navigation header with smooth scroll to sections

Hero

Landing section with headline, CTA buttons, and profile image

Marquee

Scrolling tech stack showcase

Projects

Grid of project cards linking to case studies

About

Bio section with skills list

Contact

Contact form with EmailJS integration

Footer

Site footer with copyright

HireMe

Floating action button (FAB) linking to contact section

Scroll Behavior

The home page uses anchor links for smooth navigation:

Navbar.jsx (excerpt)

<nav className={styles.nav}>
  <ul className={styles.navList}>
    <li><a href="#hero">Home</a></li>
    <li><a href="#projects">Projects</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Each section has a corresponding id attribute:

<section id="hero" className={styles.hero}>
  {/* Hero content */}
</section>

<section id="projects" className={styles.section}>
  {/* Projects content */}
</section>

Smooth scrolling is enabled globally in src/index.css with scroll-behavior: smooth;

Project Detail Route (`/project/:id`)

Individual project case studies use dynamic routing with URL parameters:

/project/chatverde        → Chat Verde case study
/project/allegra          → Allegra E-Commerce case study
/project/directory        → Business Directory case study
/project/productivity     → Prod System case study
/project/cashcrafter      → Cash Crafter case study

URL Parameters

The :id parameter matches project IDs from projects.js:

ProjectDetail.jsx (excerpt)

import { useParams } from 'react-router-dom';
import { projects } from '../../data/projects';

export default function ProjectDetail() {
  const { id } = useParams();
  const project = projects.find((p) => p.id === id);

  if (!project) {
    return <div>Project not found</div>;
  }

  return (
    <div className={styles.page}>
      <h1>{project.title}</h1>
      {/* Project details */}
    </div>
  );
}

How it works:

User clicks a project card on the home page
React Router navigates to /project/chatverde (example)
useParams() extracts id = "chatverde"
Component finds the matching project in projects array
Project details render on the page

Linking to Project Details

The Projects component uses React Router’s Link component:

Projects.jsx (excerpt)

import { Link } from 'react-router-dom';

function ProjectCard({ id, title, tagline, tech, desc, img }) {
  return (
    <Link to={`/project/${id}`} className={styles.card}>
      <div className={styles.imageContainer}>
        <img src={img} alt={title} />
      </div>
      <div className={styles.content}>
        <h3>{title}</h3>
        <p className={styles.tagline}>{tagline}</p>
        <p className={styles.tech}>{tech}</p>
        <p className={styles.desc}>{desc}</p>
      </div>
    </Link>
  );
}

Use <Link> instead of <a> for internal navigation. This enables client-side routing without full page reloads.

Returning to Home

The ProjectDetail component includes navigation back to the home page:

ProjectDetail.jsx (excerpt)

import { Link } from 'react-router-dom';

<Link to="/" className={styles.backButton}>
  <span className="material-icons">arrow_back</span>
  Back to Home
</Link>

Project detail pages include cyclic navigation to the next project:

ProjectDetail.jsx (excerpt)

const currentIndex = projects.findIndex((p) => p.id === id);
const nextIndex = (currentIndex + 1) % projects.length;
const nextProject = projects[nextIndex];

<Link to={`/project/${nextProject.id}`} className={styles.nextButton}>
  View Next Project
  <span className="material-icons">arrow_forward</span>
</Link>

This creates a continuous browsing experience through all projects. Use useNavigate for programmatic routing:

import { useNavigate } from 'react-router-dom';

function SomeComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    // Navigate to a project
    navigate('/project/chatverde');
    
    // Or go back
    navigate(-1);
  };

  return <button onClick={handleClick}>View Project</button>;
}

Scroll Restoration

Project detail pages automatically scroll to top on load:

ProjectDetail.jsx (excerpt)

import { useEffect } from 'react';

useEffect(() => {
  window.scrollTo(0, 0);
}, [id]);

This ensures users start at the top of each case study, even when navigating between projects.

Adding New Routes

To add a new route to the portfolio:

Create the component

Create a new component in src/components/ or at the root of src/.

src/components/Blog/Blog.jsx

export default function Blog() {
  return (
    <div>
      <h1>Blog</h1>
      {/* Blog content */}
    </div>
  );
}

Import the component

Import it in src/App.jsx:

import Blog from './components/Blog/Blog';

Add the route

Add a new <Route> inside <Routes>:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/project/:id" element={<ProjectDetail />} />
  <Route path="/blog" element={<Blog />} />
</Routes>

Link to the route

Add a link in the Navbar or elsewhere:

<Link to="/blog">Blog</Link>

Route Patterns

React Router supports various URL patterns:

Pattern	Example	Matches
Static	`/about`	Only `/about`
Dynamic	`/project/:id`	`/project/123`, `/project/chatverde`
Optional	`/blog/:slug?`	`/blog` and `/blog/my-post`
Wildcard	`/docs/*`	`/docs/a`, `/docs/a/b/c`
Catch-all	`*`	Any unmatched route (404 page)

404 Error Handling

Add a catch-all route for 404 errors:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/project/:id" element={<ProjectDetail />} />
  <Route path="*" element={<NotFound />} />
</Routes>

NotFound.jsx

import { Link } from 'react-router-dom';

export default function NotFound() {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>The page you're looking for doesn't exist.</p>
      <Link to="/">Return to Home</Link>
    </div>
  );
}

Router Configuration

Browser Router vs. Hash Router

The portfolio uses BrowserRouter (clean URLs):

// Current (BrowserRouter)
import { BrowserRouter as Router } from 'react-router-dom';

// URLs: example.com/project/chatverde

If deploying to a platform that doesn’t support clean URLs, use HashRouter:

// Alternative (HashRouter)
import { HashRouter as Router } from 'react-router-dom';

// URLs: example.com/#/project/chatverde

When using BrowserRouter, configure your hosting platform to redirect all routes to index.html. See the Deployment guide for platform-specific instructions.

Best Practices

Use Link components

Always use <Link> for internal navigation to enable client-side routing

Validate route params

Check if dynamic route parameters exist before rendering content

Scroll to top

Reset scroll position when navigating between routes

Handle 404s gracefully

Add a catch-all route for better user experience

Architecture

Learn about the overall application structure

ProjectDetail Component

Deep dive into the project detail page

Projects Data

Understand the project data schema

React Router Docs

Official React Router documentation

Get Started

Core Concepts

Components

Customization

Deployment

Route Structure

Route Implementation

Home Route (`/`)

Scroll Behavior

Project Detail Route (`/project/:id`)

URL Parameters

Navigation Between Routes

Linking to Project Details

Returning to Home

Next Project Navigation

Programmatic Navigation

Scroll Restoration

Adding New Routes

Route Patterns

404 Error Handling

Router Configuration

Browser Router vs. Hash Router

Best Practices

Use Link components

Validate route params

Scroll to top

Handle 404s gracefully

Architecture

ProjectDetail Component

Projects Data

React Router Docs

Build docs developers (and LLMs) love

Get Started

Core Concepts

Components

Customization

Deployment

​Route Structure

​Route Implementation

​Home Route (/)

​Scroll Behavior

​Project Detail Route (/project/:id)

​URL Parameters

​Navigation Between Routes

​Linking to Project Details

​Returning to Home

​Next Project Navigation

​Programmatic Navigation

​Scroll Restoration

​Adding New Routes

​Route Patterns

​404 Error Handling

​Router Configuration

​Browser Router vs. Hash Router

​Best Practices

Use Link components

Validate route params

Scroll to top

Handle 404s gracefully

​Related Reading

Architecture

ProjectDetail Component

Projects Data

React Router Docs

Build docs developers (and LLMs) love

Route Structure

Route Implementation

Home Route (`/`)

Scroll Behavior

Project Detail Route (`/project/:id`)

URL Parameters

Navigation Between Routes

Linking to Project Details

Returning to Home

Next Project Navigation

Programmatic Navigation

Scroll Restoration

Adding New Routes

Route Patterns

404 Error Handling

Router Configuration

Browser Router vs. Hash Router

Best Practices

Related Reading