Simon Foster - Technical Leader Portfolio

A premium, high-performance portfolio website for Simon Foster, a Technical Leader and Full-Stack Engineer. Built with a modern, minimalist aesthetic and optimised for speed and responsiveness.

🚀 Features

• Responsive Design: Fluid layout that adapts seamlessly to desktop, tablet, and mobile devices.
• Accessibility (A11y): WCAG AA compliant with full ARIA landmark support, "Skip to Content" links, and high-contrast :focus-visible states.
• Micro-Animations: Sophisticated CSS-native staggered reveal effects for a high-end, synchronous user experience.
• Modern Tech Stack: Leveraging Vite for high-performance builds and Tailwind CSS v4 for a cutting-edge CSS architecture.
• Premium Glassmorphism: High-fidelity design with saturated glassmorphic cards and dynamic, animated background gradients.
• UK English Standard: Localised throughout for regional consistency and professional clarity.
• SEO Optimised: Includes semantic HTML, meta descriptions, and structured data for maximum search engine visibility.

🛠️ Technology Stack

• Framework: Vite
• Styling: Tailwind CSS v4
• Logic: Vanilla JavaScript (ES Module)
• Testing: Playwright & Axe-core
• Animations: CSS Transitions & JavaScript Intersection Observer API

📂 Project Structure

├── dist/               # Production build output
├── public/             # Static assets (images, favicon, etc.)
├── src/                # Project source files (if applicable)
├── index.html          # Main entry point and site structure
├── index.css           # Global styles and Tailwind configuration
├── main.js             # Core client-side logic and animations
├── vite.config.js      # Vite configuration
└── package.json        # Project metadata and dependencies

🛠️ Getting Started

Prerequisites

• Node.js (Latest LTS recommended)
• npm

Installation

1. Clone the repository:

   git clone <repository-url>
   cd simonfoster

2. Install dependencies:

   npm install

Development

Run the development server:

npm run dev

The site will be available at http://localhost:5173.

Production Build

Generate the production-ready assets in the dist folder:

npm run build

Preview the production build locally:

npm run preview

🚀 Automation: GitHub Actions (Recommended)

This project is pre-configured with a unified CI/CD pipeline in .github/workflows/deploy.yml.

1. Push to GitHub: Push your local changes to a new repository.
2. Enable GitHub Actions Deployment:
   • Go to your repository Settings.
   • Navigate to Pages in the sidebar.
   • Under Build and deployment > Source, select "GitHub Actions" instead of "Deploy from a branch".
3. Automatic Updates: Every time you push to the main branch, your tests will run. If they pass, the site will automatically redeploy.

🧪 Testing

This project includes a professional-grade automated testing suite to ensure high uptime and accessibility standards.

Running Tests

# Run all smoke and functional tests
npm run test

# Run the automated accessibility audit (WCAG AA)
npm run test:accessibility

Test Coverage

• Smoke Tests: Verifies that hero content, experience cards, and all main sections are present.
• Navigation: Confirmed section-scrolling and deep-linking via URL hashes.
• External Links: Safety check for all social links (rel="noopener noreferrer").
• Accessibility: Continuous automated audits for contrast, semantic roles, and landmarks.

📝 License

© 2026 Simon Foster. All rights reserved.