Rebuild site as Sakura/Iced-Tea single-page experience with custom GH Pages 404

README.md

@@ -1,55 +1,29 @@
-# Vlo Studios Site
+# VloStudios Website (Sakura Iced Tea Remake)
 
-A developer portfolio site for Vlo, featuring:
-- Projects synced from GitHub (`VloStudios`)
-- Sakura-themed CV presentation
-- Iced-tea-inspired design accents
-- Background ambient music toggle
-- **Scrollable card layout** with GitHub-powered profile/repo data
+This repository now contains a full static-first remake of the site with a brand-new structure and visual direction:
 
-## Setup
+- Sakura + iced-tea themed landing page
+- Animated "raining iced tea" effect
+- Mini CV section powered by live GitHub profile/repo data for `VloStudios`
+- Custom themed `404.html` for GitHub Pages
 
-1. Clone or copy this directory.
-2. Create a virtual environment (optional):
-   ```bash
-   python -m venv venv
-   source venv/bin/activate   # Windows: venv\Scripts\activate
-   ```
-3. Install dependencies:
-   ```bash
-   pip install -r requirements.txt
-   ```
-4. Run the Flask app:
-   ```bash
-   python app.py
-   ```
-5. Visit `http://localhost:5001` in your browser.
+## Project layout
 
-## Features
+- `/static/index.html` — primary GitHub Pages entrypoint
+- `/static/css/style.css` — complete redesign styles
+- `/static/js/main.js` — animation + GitHub data loading + CV/repo rendering
+- `/static/404.html` — custom Sakura iced-tea 404 page
+- `/app.py` — optional local Flask serving
 
-- **CV Snapshot**: Pulls profile details from `https://api.github.com/users/VloStudios`.
-- **Projects Section**: Fetches public repositories and displays the most recently updated.
-- **Sakura UI**: Soft pink card-based visuals with blossom-inspired background elements.
-- **Ambient Background Music**: Browser-based synth music with play/pause controls.
-- **Iced Tea Theme**: Dedicated section and palette accents for a calm tea vibe.
+## Run locally
 
-## Customization
+```bash
+pip install -r /home/runner/work/website/website/requirements.txt
+python /home/runner/work/website/website/app.py
+```
 
-- Edit `static/js/main.js` to change profile username or CV rendering behavior.
-- Adjust styling in `static/css/style.css`.
-- Modify the Flask app in `app.py` if you want server-rendered data endpoints.
+Then open `http://localhost:5001`.
 
-## Deployment
+## GitHub Pages compatibility
 
-The site is configured to deploy automatically to GitHub Pages via the GitHub Actions workflow (`.github/workflows/deploy.yml`). Upon each push to the `main` branch, the workflow builds and deploys the site.
-
-To deploy manually:
-1. Push your changes to the `main` branch.
-2. Go to the **Actions** tab in your repository to monitor the deployment.
-3. Once completed, your site will be available at `https://<your-username>.github.io/<repo-name>/` (or custom domain if configured).
-
-## Custom Domain
-
-A `CNAME` file is included with the value `vlostudios.dev`. Ensure you configure your DNS settings accordingly.
-
-Enjoy the chill vibe and happy coding!
+GitHub Pages deploys from `/static` in this repo's workflow, so all published assets (including `404.html`, `CNAME`, and `.nojekyll`) are kept in `/static`.

static/404.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>404 — Tea Storm</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&family=Zen+Kurenaido&display=swap" rel="stylesheet">
+  <style>
+    body {
+      margin: 0;
+      min-height: 100vh;
+      display: grid;
+      place-items: center;
+      font-family: "Outfit", sans-serif;
+      color: #4c2c3b;
+      background:
+        radial-gradient(85% 60% at 50% 10%, #ffe6f2, transparent 60%),
+        linear-gradient(180deg, #fff7fb, #ffe9f4);
+      overflow: hidden;
+    }
+    .wrap {
+      width: min(92vw, 680px);
+      background: rgba(255,255,255,.84);
+      border: 1px solid rgba(219,95,146,.25);
+      border-radius: 1rem;
+      text-align: center;
+      padding: 1.5rem;
+      box-shadow: 0 12px 28px rgba(105, 44, 70, 0.1);
+    }
+    h1 {
+      margin: 0;
+      font-family: "Zen Kurenaido", sans-serif;
+      font-size: clamp(2.5rem, 10vw, 5rem);
+    }
+    p { margin: .5rem 0; }
+    a {
+      display: inline-block;
+      margin-top: .7rem;
+      text-decoration: none;
+      font-weight: 700;
+      color: #fff;
+      background: linear-gradient(135deg, #f091b4, #db5f92);
+      border-radius: 999px;
+      padding: .6rem 1rem;
+    }
+    .rain {
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      opacity: .7;
+    }
+    .drop {
+      position: absolute;
+      top: -10vh;
+      animation: fall linear infinite;
+    }
+    @keyframes fall {
+      to { transform: translateY(120vh); }
+    }
+  </style>
+</head>
+<body>
+  <div class="rain" id="rain" aria-hidden="true"></div>
+  <main class="wrap">
+    <h1>404</h1>
+    <p>Oops, this page drifted away in a Sakura iced-tea storm.</p>
+    <p>Catch a fresh cup by returning home.</p>
+    <a href="./index.html">Back to Homepage</a>
+  </main>
+  <script>
+    const rain = document.getElementById('rain');
+    const symbols = ['🧋', '🌸', '💧'];
+    for (let i = 0; i < 28; i += 1) {
+      const d = document.createElement('span');
+      d.className = 'drop';
+      d.textContent = symbols[i % symbols.length];
+      d.style.left = `${Math.random() * 100}%`;
+      d.style.animationDuration = `${6 + Math.random() * 6}s`;
+      d.style.animationDelay = `${Math.random() * -10}s`;
+      rain.appendChild(d);
+    }
+  </script>
+</body>
+</html>