witch-dev is Alysha’s personal developer portfolio — a fully client-side React 18 application built with Vite that wraps every corner of the site in an immersive dark occult aesthetic. From a deep-purple background that echoes midnight rituals to an acid-green glowing cursor that trails purple particles across the screen, the entire experience is designed to feel like casting a spell rather than browsing a résumé. Every page title, route label, and interaction has been renamed into the vocabulary of the coven.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/witch-dev/llms.txt
Use this file to discover all available pages before exploring further.
Key Features
Occult Dark UI
Deep
#0a0612 background with a full coven-purple-* Tailwind color scale and complementary coven-green-* acid-green glow palette. Every surface, border, and text element is themed to the aesthetic.Animated Background Effects
40 Framer Motion floating particles in
coven-green-400 drift upward across the screen at randomised sizes, speeds, and delays. Three animated purple fog blobs (blur-[120px]) drift continuously behind all content via the animate-fog-drift keyframe.Glowing Cursor Trail
A 16×16 px green glow dot (
rgba(163, 230, 53, 0.6) box-shadow) tracks the mouse with a backOut easing tween. Up to 15 fading purple particles (rgba(192, 38, 211, 0.4)) trail behind, each animating to opacity 0 and scale 0 over 500 ms.Fixed Side Navigation
A
w-20 side bar fixed to the left edge contains icon-only links from Lucide React. Hovering any link reveals a tooltip in font-mono text-coven-green-300 with the occult label. Active links light up with box-glow-green.Framer Motion Page Transitions
Routes wrap in
AnimatePresence with blur + scale in/out animations between pages, giving every navigation a spell-like dissolve effect.Interactive Skills Radar
The Skills page renders a hexagonal radar chart that visualises tech proficiency levels across multiple domains — a witch’s grimoire of affinities rendered as a web of power.
Projects Carousel
The Projects (Grimoire) page displays work in a horizontal-scroll circular card carousel with tag-based filtering, letting visitors sift through spells by category.
Typewriter Hero
The Home (Summon) page opens with a typewriter animation that types out Alysha’s introduction character by character, pulling visitors in from the first second.
Responsive Mobile Menu
On smaller screens the side nav is replaced by a hamburger button. Tapping it opens a full-screen frosted-glass overlay with
AnimatePresence staggered entry animations for each nav item.Hash-Based Routing
All routes use
/#/path URL fragments (via React Router’s HashRouter). This means the portfolio deploys to GitHub Pages and any static host without a server-side rewrite rule.Themed Naming Convention
Every route in witch-dev has a public-facing occult label that maps to a standard developer-portfolio section. The table below shows the full correspondence:| Occult Label | Route | Purpose |
|---|---|---|
| Summon | / | Home page with typewriter hero |
| Origins | /about | About / background |
| Grimoire | /projects | Projects showcase |
| Affinities | /skills | Skills radar chart |
| Scrolls | /writing | Blog / writing posts |
| Raven | /contact | Contact form |
components/Navigation.js drives both the desktop sidebar and the mobile overlay, so updating a label or icon there is reflected across all breakpoints simultaneously.
The icons used are all from Lucide React v0.522.0:
hexagon (Summon), sparkles (Origins), book-open (Grimoire), brain-circuit (Affinities), scroll (Scrolls), and mail (Raven).Project Structure
assets/main.js and assets/proxy.js are minified Vite output bundles — they contain the compiled React application and all third-party dependencies. The original TypeScript/JSX source files are compiled into these bundles at build time.