Skip to main content

Documentation Index

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

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

All of Sorcerer’s portfolio content — the owner’s name and tagline, every project card, skill node, work history entry, blog post, case study, and testimonial — lives as plain JavaScript const arrays and inline string literals in the source code. There are no external CMS calls, no JSON config files, and no environment variables to wire up. To make the portfolio your own, you edit these arrays in the source, run the build, and deploy the output.
The files inside assets/ (main.js, main.css, proxy.js) are compiled build artifacts and are overwritten every time the project is built. Do not edit them directly. Clone the source repository, make changes to the source components and data arrays, then run npm run dev to preview locally or npm run build to produce a fresh deployment bundle.

​
Personal Details

The portfolio owner’s name, tagline, and hero quote are hardcoded as string literals inside the HomePage component. Locate that component in the source and update the three values: 
// In the HomePage component:
const name = 'ALEX WEAVER';           // Change to your name
const tagline = 'FULL STACK SORCERER'; // Change to your title
const quote = '"Crafting digital incantations and weaving webs of logic in the midnight hours."'; // Change to your quote
The name string is split character-by-character at render time to drive the blur-reveal letter stagger animation, so any length of name will work — each letter receives its own motion.span with a delay of index * 0.15 seconds. The tagline is rendered with the .text-glow class applied, so it automatically picks up the turquoise glow effect.

​
Projects

The four project cards on the /projects page are rendered from the gt array (exported from the compiled bundle as projects in the source). Each object requires an id, display numeral, title, description, tech stack array, and link URL. The numeral field (Roman numerals I–IV) appears on the front face of the flip card. 
const projects = [
  {
    id: 1,
    title: "The Alchemist's Ledger",
    numeral: "I",
    description: "A full-stack financial dashboard conjured with React, Node.js, and PostgreSQL. Features real-time market scrying and automated portfolio balancing.",
    tech: ["React", "Node.js", "PostgreSQL", "WebSockets"],
    link: "#"
  },
  {
    id: 2,
    title: "Grimoire.md",
    numeral: "II",
    description: "A markdown editor for modern spellcasters. Includes live preview, syntax highlighting for 40+ languages, and cloud synchronization.",
    tech: ["TypeScript", "Next.js", "Tailwind", "Prisma"],
    link: "#"
  },
  {
    id: 3,
    title: "Astral Projection API",
    numeral: "III",
    description: "A globally distributed GraphQL API serving geospatial data with sub-50ms latency across 12 regions.",
    tech: ["GraphQL", "Go", "Redis", "Docker"],
    link: "#"
  },
  {
    id: 4,
    title: "Familiar Tracker",
    numeral: "IV",
    description: "IoT dashboard for tracking pet familiars. Integrates with GPS collars to provide real-time location and activity metrics.",
    tech: ["React Native", "Firebase", "IoT", "Maps"],
    link: "#"
  }
];
Replace each entry’s title, description, tech, and link with your own project details. The link field is rendered as an anchor tag on the back face of the flip card (“Inspect Spell →”); set it to your live URL or repository link.

​
Skills

The Skills constellation is driven by two arrays: B (node positions and labels) and bt (edges connecting nodes by their id strings). Node x and y values are percentages of the container’s width and height, so { x: 20, y: 30 } places a node 20% from the left and 30% from the top of the constellation canvas. 
// Skill nodes (B) — 9 items
const skillNodes = [
  { id: "react",   label: "React",      x: 20, y: 30 },
  { id: "ts",      label: "TypeScript", x: 40, y: 20 },
  { id: "node",    label: "Node.js",    x: 60, y: 35 },
  { id: "python",  label: "Python",     x: 80, y: 25 },
  { id: "sql",     label: "SQL",        x: 70, y: 60 },
  { id: "graphql", label: "GraphQL",    x: 50, y: 50 },
  { id: "aws",     label: "AWS",        x: 30, y: 65 },
  { id: "docker",  label: "Docker",     x: 45, y: 80 },
  { id: "css",     label: "Tailwind",   x: 15, y: 55 },
];

// Skill edges (bt) — 11 connections
const skillEdges = [
  ["react", "ts"],
  ["ts", "node"],
  ["node", "python"],
  ["node", "sql"],
  ["sql", "graphql"],
  ["graphql", "ts"],
  ["graphql", "react"],
  ["aws", "docker"],
  ["node", "aws"],
  ["react", "css"],
  ["css", "ts"],
];
To add a skill, append a new object to skillNodes with a unique id, a display label, and an x/y position that avoids overlapping existing nodes. Then add any desired edge pairs to skillEdges referencing that new id. Each edge is drawn as a <motion.line> that animates its pathLength from 0 to 1 when the constellation scrolls into view.

​
Work History

The three timeline entries on the /work page are rendered from the wt array. Each entry has a numeric id, a role (displayed as a heading in turquoise-light), a coven (the company name, rendered in italic moonlight-silver), a years range, and a details array of bullet-point strings. 
const workHistory = [
  {
    id: 1,
    role: "Senior Alchemist (Frontend)",
    coven: "TechCorp Inc.",
    years: "2022 - Present",
    details: [
      "Transmuted legacy jQuery monoliths into pristine React applications.",
      "Conjured a design system used by 40+ developers across 5 covens.",
      "Reduced load times by 40% through dark arts (code splitting and lazy loading).",
    ]
  },
  {
    id: 2,
    role: "Spellweaver (Full Stack)",
    coven: "Startup.io",
    years: "2019 - 2022",
    details: [
      "Architected serverless rituals on AWS using Node.js and DynamoDB.",
      "Summoned real-time collaboration features using WebSockets.",
      "Mentored junior apprentices in the ways of clean code.",
    ]
  },
  {
    id: 3,
    role: "Apprentice Sorcerer",
    coven: "Digital Agency",
    years: "2017 - 2019",
    details: [
      "Crafted responsive incantations for e-commerce clients.",
      "Maintained WordPress grimoires and custom PHP plugins.",
      "Mastered the foundational runes of HTML, CSS, and JavaScript.",
    ]
  }
];
Each entry is animated independently: the timeline dot uses a spring scale animation, the card body expands from height: 0 to height: auto, and each bullet item fades in from the left with a cascading delay. Adding more than three entries will extend the scroll-driven timeline line proportionally.

​
Blog Posts

The three posts on the /blog page are rendered from the qt array. Each post has an id, a title, a display date string, and an excerpt that is shown with line-clamp-4 (four visible lines). 
const blogPosts = [
  {
    id: 1,
    title: "10 React Hooks for the Modern Witch",
    date: "Oct 31, 2023",
    excerpt: "Stop writing boilerplate and start casting custom hooks. A guide to useMemo, useCallback, and other performance enchantments."
  },
  {
    id: 2,
    title: "Summoning Demons (and Daemons)",
    date: "Sep 15, 2023",
    excerpt: "A practical guide to background processes, cron jobs, and keeping your server running when the moon is full."
  },
  {
    id: 3,
    title: "CSS Grid: A Summoning Circle Tutorial",
    date: "Aug 02, 2023",
    excerpt: "Aligning items shouldn't require a blood sacrifice. Master the arcane arts of grid-template-areas."
  }
];
Posts are displayed as oval/cauldron-shaped cards with a ripple SVG filter applied via filter: url(#ripple). The card shape is achieved with border-radius: 100px (outer) and border-radius: 90px (inner border). There is currently no routing to individual post pages — the “Peer closer →” call-to-action can be wired to an internal route or external URL by wrapping the card in a <Link> or <a> element.

​
Testimonials

The three testimonials on the /testimonials page are stored in the C array. They rotate automatically every 6 seconds using a setInterval. Each entry has an id, a quote string, an author name, and a title (job title / role). 
const testimonials = [
  {
    id: 1,
    quote: "Alex's code is pure magic. They turned our cursed legacy system into a pristine, high-performing application without breaking a sweat.",
    author: "Sarah J.",
    title: "Lead Archmage (CTO)"
  },
  {
    id: 2,
    quote: "I've never seen bugs vanish so quickly. It's like they have a direct line to the spirits of the machine.",
    author: "Marcus T.",
    title: "Product Sorcerer"
  },
  {
    id: 3,
    quote: "The UI they conjured for us was not only beautiful but accessible to all mortals. Truly a master of their craft.",
    author: "Elena R.",
    title: "Design Oracle"
  }
];
The active testimonial index is held in local state and used as the key prop on the motion.div inside AnimatePresence. Changing the key triggers the blur-scale exit/enter transition. Manual navigation is available via the dot indicators rendered below the crystal-ball SVG frame.

​
Case Studies

The two deep-dive case studies on the /case-studies page are stored in the Ct array. Each entry has an id, a title, a subtitle, an ingredients array of technology strings, a ritual narrative paragraph, and a result paragraph displayed in a highlighted block with a left turquoise border. 
const caseStudies = [
  {
    id: 1,
    title: "The Great Migration",
    subtitle: "Transmuting a monolithic beast into nimble micro-frontends",
    ingredients: ["React", "Webpack Module Federation", "TypeScript", "Patience"],
    ritual: "The existing architecture was a tangled web of dependencies that took eons to build. By drawing a new architectural summoning circle, we isolated domains into separate micro-frontends. The ritual required careful orchestration of shared state and routing, ensuring the user experience remained seamless while development velocity increased tenfold.",
    result: "Build times reduced from 15 minutes to 45 seconds. Five separate covens (teams) can now deploy independently without stepping on each other's robes."
  },
  {
    id: 2,
    title: "Performance Alchemy",
    subtitle: "Turning leaden load times into golden Core Web Vitals",
    ingredients: ["Next.js", "Redis", "Lighthouse", "Dark Arts of Caching"],
    ritual: "The client's e-commerce grimoire was sluggish, losing impatient souls before they could purchase. We implemented a multi-layered caching strategy, static generation for product pages, and edge-computing for personalized pricing. Heavy third-party scripts were banished to web workers.",
    result: "LCP dropped from 4.2s to 1.1s. Conversion rates increased by 23%, proving that speed is indeed a powerful spell."
  }
];
Each case study is revealed with a whileInView fade-and-slide animation. The ingredients list uses velvet-purple bullet dots, and each entry is separated by space-y-32 to create deliberate vertical breathing room between studies. A smoke particle background effect (.smoke-particle CSS class with the @keyframes drift animation) renders in a fixed overlay behind all case studies.

​
Quick Reference

Projects Page

Edit the gt array to update the four flip-card project entries, their tech stacks, and external links.

Skills Page

Edit the B nodes array and bt edges array to rearrange the constellation layout and skill connections.

Work History Page

Edit the wt array to replace role names, company names, year ranges, and bullet-point achievements.

Blog Page

Edit the qt array to replace post titles, dates, and excerpt text shown on the oval blog cards.

Build docs developers (and LLMs) love

Get started for freeTalk to us