A cutting-edge portfolio website built with Next.js 15 and React 19, showcasing the professional journey of Edward Whitehead - a seasoned software developer, AI innovator, and entrepreneur with over two decades of experience in building scalable solutions across mobile, web, and cloud platforms.
- 🏗️ Software Architect specializing in full-stack solutions
- 🤖 AI Innovator building the next generation of intelligent applications
- 🚀 Startup Founder with multiple successful SaaS platforms
- 🌍 Remote-First developer collaborating worldwide
- 🌙 Dark Theme with elegant color schemes
- 📱 Fully Responsive design (mobile-first approach)
- ✨ Smooth Animations with AOS (Animate On Scroll)
- 🎭 Interactive Elements with hover effects and transitions
- ⚡ Optimized Performance with Next.js 15 and Turbopack
- 🔥 Modern Stack: Next.js 15, React 19, TypeScript 5
- 🎯 SEO Optimized with proper meta tags and structure
- 📊 Analytics Ready for tracking and insights
- 🔒 Type Safety throughout the entire codebase
- 🎨 Component-Based Architecture for maintainability
- 📝 Markdown-Driven Content for easy updates
- 🔄 Dynamic Routing for projects and blog posts
- 🏷️ Frontmatter Support for metadata management
- 🔍 Search-Friendly content structure
- 👋 Hero Section with animated typing effects
- 🛠️ Skills Showcase with interactive cards and highlights
- 💼 Experience Timeline with detailed job history
- 🎯 Projects Portfolio with filterable categories
- 📬 Contact Form with email integration
- 🌐 Social Links and professional networks
| Category | Technologies |
|---|---|
| Frontend |    |
| Styling |    |
| UI/UX |    |
| Development |    |
| Deployment |
- Node.js 18.0.0 or later
- npm, yarn, pnpm, or bun
- Git for version control
# Clone the repository
git clone https://github.com/edwardwhiteheaddev/edwardwhitehead.github.io.git
# Navigate to project directory
cd edwardwhitehead.github.io
# Install dependencies
npm install
# or
yarn install
# or
pnpm install# Start development server with Turbopack
npm run dev
# Or use alternative package managers
yarn dev
pnpm dev
bun devOpen http://localhost:3000 to view the application.
# Build the application
npm run build
# Start production server
npm run startedwardwhitehead.github.io/
├── 📁 src/
│ ├── 📁 app/ # Next.js 15 App Router
│ │ ├── 📄 layout.tsx # Root layout
│ │ ├── 📄 page.tsx # Homepage
│ │ ├── 📄 globals.scss # Global styles
│ │ └── 📁 [routes]/ # Dynamic routes
│ ├── 📁 components/ # Reusable components
│ │ ├── 📁 kyros/ # Main theme components
│ │ │ ├── 📄 Hero.tsx # Hero section
│ │ │ ├── 📄 Skills.tsx # Skills showcase
│ │ │ ├── 📄 Experience.tsx # Experience timeline
│ │ │ ├── 📄 Projects.tsx # Projects portfolio
│ │ │ └── 📄 Contact.tsx # Contact section
│ │ └── 📁 ui/ # UI components
│ ├── 📁 lib/ # Utility functions
│ │ └── 📄 markdown.ts # Markdown processing
│ └── 📁 assets/ # Static assets
├── 📁 content/ # Markdown content files
│ ├── 📄 hero.md # Hero section content
│ ├── 📄 skills.md # Skills and highlights
│ ├── 📄 experience.md # Work experience
│ ├── 📄 projects.md # Projects showcase
│ └── 📄 contact.md # Contact information
├── 📁 public/ # Static files
├── 📄 package.json # Dependencies
├── 📄 tsconfig.json # TypeScript config
├── 📄 next.config.ts # Next.js config
└── 📄 README.md # This file
All content is managed through Markdown files in the /content directory:
- Hero Section: Edit
content/hero.md - Skills & Highlights: Edit
content/skills.md - Experience: Edit
content/experience.md - Projects: Edit
content/projects.md - Contact: Edit
content/contact.md
- Global Styles:
src/app/globals.scss - CSS Variables: Defined in
:rootfor easy theme customization - Component Styles: Scoped styles within each component
- Responsive Design: Mobile-first approach with breakpoints
- Create a new component in
src/components/kyros/ - Add corresponding content file in
content/ - Import and use in
src/app/page.tsx - Add styles to
globals.scss
- ⚡ Next.js 15 with Turbopack for lightning-fast builds
- 🖼️ Image Optimization with Next.js Image component
- 📦 Code Splitting for optimal loading
- 🔄 Static Generation for maximum performance
- 🔍 SEO Optimized with proper meta tags
- ♿ Accessibility Ready with semantic HTML
- 📱 Mobile-First responsive design
- 🌐 Social Media integration
- 🔥 Hot Reloading with Turbopack
- 🛡️ Type Safety with TypeScript
- 📝 ESLint Configuration for code quality
- 🎯 Component Architecture for maintainability
Each component follows a consistent pattern:
- Props Interface: TypeScript interfaces for type safety
- Default Export: Component function
- Styling: CSS classes following BEM methodology
- Animations: AOS integration for smooth animations
Content files use frontmatter for metadata and markdown for content:
---
title: "Section Title"
subtitle: "Optional subtitle"
---
# Markdown content hereThe website uses AOS (Animate On Scroll) with consistent timing:
- Base delay: 0ms
- Increment: 150ms per element
- Duration: 800ms
- Easing: ease-out-cubic
This repository is configured for GitHub Pages deployment:
- Push to
mainbranch - GitHub Actions automatically builds and deploys
- Site is available at
https://edwardwhitehead.github.io
For optimal performance with Next.js features:
- Netlify: Drag and drop the
outfolder afternpm run build - AWS S3: Upload static files from
outfolder - Docker: Build container with included Dockerfile
Contributions are welcome! Please feel free to submit a Pull Request. For major changes:
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Edward Whitehead is a seasoned software developer and entrepreneur with 20+ years of experience building scalable solutions. Specializing in:
- 🏗️ Full-Stack Development (React, Next.js, .NET, Mobile)
- 🤖 AI & Machine Learning Integration
- ☁️ Cloud Architecture (Azure, GCP, Firebase)
- 🚀 Startup Development & Product Management
- 🌐 Website: edwardwhitehead.dev
- 💼 LinkedIn: edward-whitehead
- 📧 Email: ed.surreal@gmail.com
- 📱 Phone: +27 61-760-9568