tomasort.github.io

Portfolio site built with React 19, Vite, TypeScript, Tailwind CSS, Leaflet, and EmailJS.

Tech Stack

• Framework: React 19 with React Router DOM for navigation
• Build: Vite 6 with TypeScript support
• Styling: Tailwind CSS v4 with semantic component layer
• Testing: Vitest with React Testing Library
• Maps: Leaflet with react-leaflet
• Contact Form: EmailJS for email delivery
• Fonts: Coolvetica (display), Helvetica Neue (body)

Setup

npm install --legacy-peer-deps

Configure EmailJS in .env.local:

VITE_EMAILJS_SERVICE_ID=your_service_id
VITE_EMAILJS_TEMPLATE_ID=your_template_id
VITE_EMAILJS_PUBLIC_KEY=your_public_key

Commands

npm start          # Start dev server at http://localhost:5173
npm run build      # Production build to dist/
npm run test       # Run test suite
npm run test:watch # Watch mode for tests
npm run preview    # Preview production build
npm run deploy     # Deploy to gh-pages

Architecture

• Components: Page-level components (Home, About, Projects, Contact, Sidebar)
• Styling: Global theme tokens and semantic CSS component classes in src/index.css
• Tests: Behavior-driven tests in src/test/ covering routing and form validation
• Layout: Fixed sidebar on desktop, responsive top navigation on mobile

Notes

• Requires --legacy-peer-deps due to react-leaflet peer dependency compatibility with React 19
• EmailJS credentials are public keys exposed in the browser (intended, not secrets)
• Theme tokens and reusable UI recipes are CSS-first (Tailwind v4 idiomatic approach)