Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/groovy/llms.txt

Use this file to discover all available pages before exploring further.

Groovy Portfolio is distributed as a fully pre-built static site — there is no package.json, no src/ directory, and no build step required. The repository contains the compiled Vite output directly: a single index.html entry point, pre-bundled JavaScript in assets/, minified component modules in components/, and static HTML shells in pages/. Getting it running locally takes a single command, and deploying it to a public host is equally straightforward.
This repository is the compiled output of the original Vite + React source project. It does not contain source files, a vite.config.js, a tailwind.config.js, or a package.json. If you need to rebuild from source, you will need access to the original development repository.

​
Prerequisites

The only tool you need to serve Groovy Portfolio locally is a static file server. No Node.js version requirements, no package manager, and no build pipeline.
  • A static file server — the quickest option is npx serve (requires Node.js to be installed), but any server capable of serving index.html will work.
  • Git — needed to clone the repository.

​
Running Locally

1

Clone the repository

Pull the project down from GitHub and move into the project directory.
git clone https://github.com/apursley2012/groovy.git
cd groovy
2

Serve the static site

Start a local static file server from the repository root. The npx serve command works without any prior npm install step.
npx serve .
Open the URL shown in your terminal (typically http://localhost:3000) in your browser. You should see the rainbow cursor trail following your mouse and the animated tie-dye background filling the viewport immediately — confirmation that Framer Motion and all custom components have loaded correctly.
Any static server will work. Alternatives include npx http-server ., Python’s python3 -m http.server, or VS Code’s Live Server extension. Because the site uses HashRouter, all routes are encoded in the URL hash (e.g. /#/projects), so the server never needs to handle routing — it only ever serves index.html.

​
Deploying to a Static Host

Because Groovy Portfolio is already compiled, you can deploy it by uploading or pointing the repository root directly at any static hosting platform. No build command is required.

​
Netlify

Drag the cloned groovy/ folder into the Netlify drop zone at app.netlify.com, or connect the GitHub repository and set:
  • Build command: (leave empty — no build needed)
  • Publish directory: . (the repository root)

​
GitHub Pages

Push the repository to GitHub and enable Pages from the repository Settings → Pages menu. Set the source to the main branch and the root directory (/). GitHub Pages will serve index.html directly.

​
Vercel

Import the GitHub repository in the Vercel dashboard. Override the framework preset to Other and leave the build command and output directory blank. Vercel will serve the repository root as a static site.
All three platforms work without any redirect or rewrite rules because the site uses HashRouter. The server always receives a request for / and the hash fragment (/#/about, /#/projects, etc.) is handled entirely in the browser.

​
Project Structure

The groovy/ directory contains the following layout. Every file here is compiled output — ready to serve as-is. 
groovy/
├── index.html           # App entry point — mounts React into <div id="root">
├── assets/
│   ├── main.js          # All page components + React Router setup (compiled)
│   ├── main.css         # Tailwind output + custom styles (compiled)
│   ├── proxy.js         # Framer Motion (motion.*) re-exports
│   ├── index.js         # AnimatePresence re-export (used by Layout.js)
│   └── jsx-runtime.js   # React JSX runtime bundle
├── components/
│   ├── Layout.js        # Root layout: RainbowCursor + Navbar + AnimatePresence + Outlet
│   ├── Navbar.js        # Navigation bar + React DOM/Router bundle
│   ├── RainbowCursor.js # Global cursor trail effect
│   ├── TieDyeBackground.js
│   ├── VinylRecord.js
│   ├── PeaceTimeline.js
│   ├── WallPoster.js
│   ├── RecordCrate.js
│   ├── DaisyForm.js
│   ├── GroovyBubble.js
│   ├── LavaLamp.js
│   ├── RainbowArc.js
│   └── SmileySun.js
└── pages/               # Static HTML shells for each route
    ├── About.html
    ├── Blog.html
    ├── CaseStudies.html
    ├── Contact.html
    ├── Projects.html
    ├── Skills.html
    ├── Testimonials.html
    └── Work.html
The two most important files for day-to-day customisation are assets/main.js (page content and routing) and the individual files inside components/ (visual components and their data arrays). The pages/ directory contains lightweight HTML shells used as static entry points for each route — you will rarely need to edit them directly.

​
Customising Your Content

Because this is a pre-built output, all customisation is done by editing the compiled (minified) JavaScript files directly. The two primary targets are assets/main.js for page content and routing, and the individual components/*.js files for component-level data. Search for the strings or function names described below to find the right locations.

​
Personal details — Home & About

Your name, tagline, and biography are hardcoded as JSX strings inside assets/main.js. Search for the two relevant page-component functions and update the text in place. 
// assets/main.js

// Home page — look for function k()
function k() {
  return (
    <section>
      <h1>Alex Groovy</h1>         {/* ← replace with your name */}
      <p>Frontend Developer &amp; Vibe Architect</p>  {/* ← your tagline */}
    </section>
  );
}

// About page — look for function A()
function A() {
  return (
    <section>
      <p>
        Hey! I'm Alex — a frontend developer who believes the web
        should be as colourful as life itself.  {/* ← your bio */}
      </p>
    </section>
  );
}

​
Projects

The Projects page (function P() in assets/main.js) maps over an array of project objects to render a <VinylRecord> for each one. Add, remove, or edit entries in that array to update the portfolio grid. 
// assets/main.js — inside function P()
const projects = [
  {
    title:       "Cosmic Jukebox",
    description: "A streaming app for interplanetary radio stations.",
    tech:        ["React", "WebAudio API", "Tailwind"],
    coverColor:  "#d946ef",   // groovy-magenta
    labelColor:  "#fde047",   // groovy-yellow
  },
  // add more project objects here…
];

​
Work history

Career entries are stored in the i array inside components/PeaceTimeline.js. Each object maps to one node on the animated timeline. 
// components/PeaceTimeline.js
const i = [
  {
    year:        "2021 – Present",
    title:       "Senior Frontend Engineer",
    company:     "Cosmic Creations Inc.",
    description: "Led the redesign of the company's design system.",
    color:       "#2dd4bf",   // teal
  },
  // add more entries…
];

​
Blog posts

Blog entries live in the d array inside components/RecordCrate.js. Each one becomes a flippable record in the crate. 
// components/RecordCrate.js
const d = [
  {
    title:   "Why the 70s Had the Best Design Philosophy",
    date:    "March 12, 2024",
    excerpt: "Bold colours, organic shapes, and zero apologies…",
    color:   "#8b5cf6",   // groovy-violet
  },
  // add more posts…
];

​
Testimonials

Testimonials are defined inline in the I() page component in assets/main.js and passed as props directly to <GroovyBubble>. Each <GroovyBubble> accepts a quote, author, role, color, direction, and yOffset prop. 
// assets/main.js — inside function I()
function I() {
  return (
    <section>
      <GroovyBubble
        quote="Alex shipped our entire design system in a weekend. Unreal."
        author="Jordan Funk"
        role="CTO, Funky Systems Ltd"
        color="#d946ef"
        direction="left"
        yOffset={0}
      />
      <GroovyBubble
        quote="The animations alone are worth the hire."
        author="Sam Disco"
        role="Product Lead, Velvet Underground Apps"
        color="#2dd4bf"
        direction="right"
        yOffset={20}
      />
      {/* add more <GroovyBubble> elements here */}
    </section>
  );
}
After editing any compiled file, refresh the browser tab running your local static server to see the changes. There is no hot-reload in a pre-built setup — a manual refresh is all that is needed.

Build docs developers (and LLMs) love

Get started for freeTalk to us