Welcome to React Router!

PersonalWebsiteV3

This repository contains a personal portfolio and blog-style website built with React, TypeScript, React Router v7 (file-based routes), and PrimeReact components.

The app includes a home/landing page with a gallery, a projects carousel, an experience timeline, a contact page, and per-project detail pages.

Tech stack

• React + TypeScript
• React Router (file-based routes / @react-router/dev)
• PrimeReact + PrimeIcons
• PrimeFlex (layout utilities may be present)
• Vite as the dev tooling

Quick start (Windows PowerShell)

1. Install dependencies

npm install

2. Run the development server

npm run dev
# open http://localhost:5173/

3. Build for production

npm run build

4. Preview the production build (if available)

npm run preview

Notes: If you see a flash of the wrong theme when loading, the app uses an inline pre-hydration theme script and localStorage to persist theme preference. Keep your browser storage enabled while testing.

Important files & structure

• app/root.tsx — top-level layout, Menubar, theme toggle, and the where routes render.
• app/routes.ts — file-based route configuration used by the router codegen. It maps route paths to files under app/routes/.
• app/routes/ — route components. Notable files:
  • routes/home.tsx — the home/welcome page
  • routes/projects.tsx — projects listing (carousel)
  • routes/project.$id.tsx — project detail route (param route). This filename must match the route config mapping for project/:id.
  • routes/experience.tsx, routes/blog.tsx, routes/contact.tsx — other pages
• app/components/ProjectCard.tsx — reusable project card used in the carousel. It uses navigate('/project/' + id) for Details.
• app/shared/projectinfo.ts — static project metadata used by the listing and detail page.
• public/ — static assets (images, Jared_Sauve_Resume.pdf, Light.svg/Dark.svg, etc.)

Routing notes (why param routes can fail)

• The route config registers a path like project/:id and points to a route file such as routes/project.$id.tsx. The filename and path in app/routes.ts must match the router's expectation. If the route file is missing or named differently the route will not be matched.
• When navigating from a component use SPA navigation (useNavigate() or ) and make sure the path you navigate to matches the route config and filename exactly (for example /project/jaredsauve.com).

If you prefer the detail page under /projects/:id instead of /project/:id, rename the route in app/routes.ts and move/rename the file to routes/projects.$id.tsx, and update navigation in ProjectCard accordingly.

Troubleshooting

• Route returns a blank page or fallback: check app/routes.ts and confirm the string path (e.g., route("project/:id", "routes/project.$id.tsx")) points to a correctly-named file under app/routes/.
• Duplicate or garbled file exports: ensure each route file has a single default export component. Remove duplicate imports/exports if present.
• Type errors for imported images: the project includes an env.d.ts that declares image modules. If you added images and TypeScript errors appear, confirm .d.ts is present and included by tsconfig.
• Theme flash: the app writes a theme value to localStorage; if you clear storage, the inline pre-hydration script may set a default. Reload a few times to validate.

Developer notes & suggestions

• Centralize project data: app/shared/projectinfo.ts is a good single source of truth; keep it updated so both listing and detail pages remain consistent.
• Prefer React Router's navigate() instead of window.location.href for SPA navigation.
• If you want /projects/:id URLs, rename route files and update app/routes.ts and component navigation accordingly.

Contributing

Open a PR or push changes to your branch. Keep changes small and verify via npm run dev.

License

Personal/Private project — no license declared.