name: personal-portfolio description: Instructions for working on Cameron's personal portfolio website built with React 19 and Vite

Personal Portfolio Website

This skill provides context and instructions for working on Cameron Vandermeersch's personal portfolio site.

When to use

Use this skill when making changes to the portfolio website — adding sections, modifying components, updating content, or fixing bugs.

Tech Stack

• Framework: React 19 with Vite 6
• UI: React-Bootstrap 2, Animate.css, react-on-screen
• Routing: react-router-dom 6 + react-router-hash-link (single page with hash navigation)
• Forms: EmailJS (@emailjs/browser) for contact form
• SEO: react-helmet-async
• Styling: Vanilla CSS (single App.css file, ~1400 lines)
• Fonts: Custom "Centra" font (CentraNo2-Bold, Medium, Book)
• Deploy: Vercel (CI via GitHub Actions)
• Analytics: Google Tag Manager (GTM-54JD5G65)
• Env vars: VITE_* prefix (accessed via import.meta.env.VITE_*)

Installed AI Agent Skills

This repository leverages skills.sh extensions located in .agents/skills/. Any AI agent working in this repo has automatic access to these strict guidelines and rulesets. When contributing to this project, adhere strictly to these principles:

• Core React & Vite: vercel-react-best-practices, vercel-composition-patterns
• UI & Design: web-design-guidelines
• Performance & Quality: web-quality-audit, audit-website, core-web-vitals, accessibility, performance, seo
• Agent Discovery: find-skills

Project Structure

src/
├── App.jsx             # Main app with HelmetProvider + all sections
├── index.jsx           # React 19 createRoot entry point
├── components/
│   ├── NavBar.jsx      # Fixed navbar with scroll detection, social links, CV download
│   ├── Banner.jsx      # Hero section with typing animation effect
│   ├── Skills.jsx      # Multi-carousel skill icons (45 tech logos)
│   ├── Projects.jsx    # Tabbed project showcase (3 tabs)
│   ├── ProjectCard.jsx # Individual project card component
│   ├── Contact.jsx     # Contact form with EmailJS integration
│   └── Footer.jsx      # Footer with social links + copyright
├── assets/
│   ├── fonts/          # CentraNo2 font files (.ttf)
│   ├── images/         # Banner, contact, and social icon assets
│   │   └── skills/     # 45 technology logo PNGs
│   └── Cameron_Vandermeersch_Resume.pdf
└── styles/
    ├── App.css          # All component styles (monolithic)
    └── index.css        # Base resets and root sizing

Instructions

1. Environment setup: Copy .env.example to .env and fill in EmailJS credentials
2. Development: npm run dev runs on http://localhost:3000 with HMR
3. Styling: All CSS is in src/styles/App.css — search for section comment headers (e.g., /*** Banner Css ***/)
4. Components: Each section is a standalone component in src/components/
5. Images: Skill icons go in src/assets/images/skills/, project images in src/assets/images/
6. Build: npm run build outputs to dist/, npm run preview to preview locally
7. SEO: Meta tags managed via react-helmet-async in App.jsx; sitemap at public/sitemap.xml

Known Limitations

• Monolithic App.css should eventually be split into component-level CSS modules
• react-on-screen is unmaintained — consider IntersectionObserver API