Roger McKenzie — Personal Website

A personal portfolio website showcasing software development projects, technical internships, and tech-focused content. Built as a fully static frontend application.

Tech Stack

• Framework: Next.js 15 (App Router, static export)
• Language: TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: React Icons + Lucide React
• Theming: next-themes (light / dark mode)
• Fonts: Space Grotesk (headings) + Inter (body) via next/font/google
• Linting: ESLint + Prettier

Project Structure

/app
  layout.tsx        # Root layout — metadata, fonts, ThemeProvider
  page.tsx          # Single-page entry — renders all sections
/components
  Navbar.tsx        # Sticky nav with social icons and mobile hamburger
  Hero.tsx          # Full-viewport intro with resume download
  About.tsx         # Education, certifications, and skills
  Experience.tsx    # Vertical timeline of work history
  Projects.tsx      # Project cards with tech stack badges
  Content.tsx       # YouTube embed section
  Footer.tsx        # Social links footer
  ThemeToggle.tsx   # Light / dark mode toggle
/lib
  data.ts           # All site content as typed TypeScript objects
/public
  robots.txt        # SEO crawler directives
  sitemap.xml       # Site sitemap for search indexing

Resume

The resume is hosted on Google Docs and served as a direct PDF download.

Download Resume (PDF)

The Hero section download button uses this same URL. To update the resume, simply edit the Google Doc — the link stays the same.

Deployment

Deployment instructions will be added once the site is ready to go live.

Social

• GitHub: github.com/RogerMcKenzie
• LinkedIn: linkedin.com/in/rogermckenzie
• YouTube: youtube.com/@RogerMcKenzie1