Rebuild portfolio with Astro + React islands

Replaces the single index.html with a full Astro project:
- Obsidian & Violet design system (near-black + violet accent)
- WebGL hero scene via React Three Fiber, degrades gracefully on mobile
- GSAP ScrollTrigger animations + Lenis smooth scroll
- Magnetic CTAs, 3D card tilt on desktop
- Four real project cards: Echo Software, FFP, Portfolio App, SkyCast
- Glassmorphic sticky nav with focus-trapped mobile drawer
- FormSubmit.co contact form preserved
- GitHub Actions workflow for Pages deployment

Author: Ronan-R-R

.github/workflows/deploy.yml

@@ -0,0 +1,42 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Build site
+        run: npm run build
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist/
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,9 @@
+node_modules/
+dist/
+.astro/
+.env
+.env.*
+!.env.example
+*.log
+.DS_Store
+Thumbs.db

README.md

@@ -1,60 +1,56 @@
-# Portfolio Website - Ronan Roberts
+# Ronan Roberts - Portfolio
 
-A responsive, professional portfolio website designed to showcase software engineering projects, technical skills, and professional experience. The site features a modern dark-themed UI and is built for deployment on GitHub Pages.
+Personal portfolio site. Built with Astro + React islands, deployed to GitHub Pages.
 
-## Live Demo
+## Stack
 
-https://ronan-r-r.github.io
+- Astro 4 (static output)
+- React 18 (islands only: 3D hero, contact form)
+- React Three Fiber + Three.js (WebGL hero, desktop only)
+- GSAP + Lenis (scroll animations, smooth scroll)
+- Tailwind CSS 3
+- Fontsource Variable (Inter + Space Grotesk, self-hosted via npm)
+- FormSubmit.co (contact form, no backend)
 
-## Features
+## Local dev
 
-- **Responsive Design:** Fully adaptive layout that works on mobile, tablet, and desktop devices.
-- **Modern UI:** Dark mode aesthetic using CSS variables for consistent theming.
-- **Project Showcase:** Grid layout to display featured projects with technology tags.
-- **Experience Timeline:** Vertical timeline displaying career history and education.
-- **Functional Contact Form:** Integrated with FormSubmit.co for serverless email handling via AJAX.
-- **Smooth Navigation:** Sticky header with smooth scrolling to section anchors.
+```
+npm install
+npm run dev
+```
 
-## Technologies Used
+## Build
 
-- **HTML5:** Semantic markup structure.
-- **CSS3:** Flexbox, CSS Grid, Media Queries, and CSS Variables.
-- **JavaScript:** DOM manipulation, Mobile Menu toggling, and Fetch API for the contact form.
-- **Font Awesome:** Iconography.
-- **Google Fonts:** Typography (Inter font family).
+```
+npm run build
+npm run preview
+```
 
-## Installation and Local Setup
+## Deploy
 
-1. Clone the repository:
-   git clone https://github.com/Ronan-R-R/Ronan-R-R.github.io.git
+Pushes to `main` trigger the GitHub Actions workflow at `.github/workflows/deploy.yml`, which builds Astro and deploys the `dist/` output to GitHub Pages.
 
-2. Navigate to the project directory:
-   cd Ronan-R-R.github.io
+One-time setup: go to **Settings > Pages**, set **Source** to **GitHub Actions**.
 
-3. Open the index.html file in your preferred web browser to view the site locally.
+## Adding a project
 
-## Configuration
+Edit `src/components/ProjectsSection.astro`. Add an entry to the `projects` array at the top of the file. Drop a preview image (AVIF/WebP/SVG preferred) into `public/images/` and reference it in the `image` field.
 
-### Contact Form
-The contact form uses FormSubmit.co to send emails without a backend server.
+## Replacing placeholder images
 
-1. In index.html, the fetch URL is set to: https://formsubmit.co
-2. When the first submission occurs, FormSubmit will send an activation email to the address specified.
-3. You must click "Activate" in that email for the form to start forwarding messages to your inbox.
+The four placeholder SVGs in `public/images/` are branded stand-ins. Replace them with real screenshots named identically:
 
-### Icons
-The site uses Font Awesome CDN. If icons do not load, ensure you have an active internet connection or update the CDN link in the head tag.
+- `echo-software.svg` (or `.avif`, `.webp`)
+- `ffp.svg`
+- `portfolio-app.svg`
+- `skycast.svg`
 
-## Deployment
+If you switch to AVIF/WebP, update the `src` paths in `ProjectsSection.astro`.
 
-This project is designed to be hosted on GitHub Pages.
+## Contact form
 
-1. Push the index.html file to your repository (main branch).
-2. Go to Repository Settings > Pages.
-3. Under "Build and deployment", select "Deploy from a branch".
-4. Select "main" as the branch and "/" as the folder.
-5. Click Save.
+FormSubmit.co delivers messages to `ronanr2003@gmail.com`. The first submission after a fresh activation will trigger a confirmation email from FormSubmit - click Activate to start receiving messages.
 
-## License
+## Live site
 
-This project is open source and available for personal use and modification.
+https://ronan-r-r.github.io

astro.config.mjs

@@ -0,0 +1,11 @@
+import { defineConfig } from 'astro/config'
+import react from '@astrojs/react'
+import tailwind from '@astrojs/tailwind'
+
+export default defineConfig({
+  integrations: [
+    react(),
+    tailwind({ config: './tailwind.config.mjs' }),
+  ],
+  output: 'static',
+})