Allyson Keightley | Portfolio

Software Engineer & Product Builder — an editorial, motion-rich portfolio showcasing full-stack projects, AI demos, and product work.

🔗 Live: [akeight-portfolio.vercel.app] (https://akeight-portfolio.vercel.app/)

---

---

Overview

This is my personal portfolio. I built a fast, accessible, single-page application to present my engineering work the way I'd build a real product: with a deliberate design system, polished micro-interactions, and an eye on performance and visual detail.

The site is intentionally editorial in feel: oversized display type, a warm paper canvas, a single vermilion accent, and Playfair Display italics used sparingly for emphasis. Every page is responsive, keyboard-navigable, and respects prefers-reduced-motion.

TL;DR for recruiters: React + TypeScript SPA, custom design system, hand-built animation components (no template), Lighthouse-minded, deployed on Vercel with analytics and speed insights.

---

Screenshots & Demos

Home — animated hero	Projects — filterable grid

Featured case study	Live project preview

Project cards play short hover-to-preview video demos on the live site.

---

Highlights

• Hand-built animation library — custom Framer Motion components (vertical cut reveal, rotating text, parallax floating accents, sticky scroll reveals, stacking cards, marquee, scramble-on-hover) rather than off-the-shelf packages.
• Editorial design system — HSL design tokens, a typographic scale, and a single accent color defined once in CSS variables and consumed through Tailwind.
• Accessible by default — semantic landmarks, aria-labels on animated text, focus styles, and full prefers-reduced-motion fallbacks that disable motion gracefully.
• Performance-minded — Vite + SWC build, route-based layout, hover-triggered (not autoplay) video previews, and Vercel Speed Insights wired in.
• Type-safe & linted — strict TypeScript throughout, ESLint with React Hooks rules, and centralized, typed content (projects, experience, skills, recommendations).
• SEO & social — Open Graph / Twitter card meta, a custom OG image, and theme-color for a finished, shareable link preview.

---

Tech Stack

Area	Tools
Framework	React, TypeScript
Build	Vite (@vitejs/plugin-react-swc)
Styling	Tailwind CSS, tailwind-merge, class-variance-authority, custom design tokens
UI primitives	Radix UI + shadcn/ui pattern
Animation	Framer Motion (custom components)
Routing	React Router
Data / forms	TanStack Query, React Hook Form, Zod
Data viz	Recharts
Icons & type	Lucide, Inter Tight, JetBrains Mono, Playfair Display
Hosting / monitoring	Vercel, Vercel Analytics, Vercel Speed Insights

---

Project Structure

client/
├── public/                 # Static assets — project demos (mp4/webm), posters, résumé PDF, OG image
├── src/
│   ├── components/
│   │   ├── fancy/          # Custom animation components (text-rotate, parallax-floating, …)
│   │   ├── ui/             # Radix/shadcn-style primitives
│   │   └── *.tsx           # Header, Footer, ProjectCard, ExperienceAccordion, …
│   ├── data/               # Typed content: projects, experience, skills, recommendations
│   ├── hooks/              # Reusable hooks (use-mobile, use-toast)
│   ├── lib/                # Utilities (cn, motion presets)
│   ├── pages/              # Home, Projects, Resume, Now, Contact, NotFound
│   ├── App.tsx             # Routes + providers
│   └── main.tsx            # App entry
├── index.html             # Fonts, SEO/OG meta
├── tailwind.config.ts     # Theme tokens, font families, animations
└── vite.config.ts         # Dev server + @ path alias

---

Getting Started

Prerequisites

• Node.js 18+
• npm (ships with Node)

Installation & development

# from the repo root
cd client

# install dependencies
npm install

# start the dev server
npm run dev

Available scripts

Script	Description
npm run dev	Start the Vite dev server on port 8080
npm run build	Production build to dist/
npm run build:dev	Development-mode build
npm run preview	Preview the production build locally
npm run lint	Run ESLint across the project

---

Featured Projects

A few of the projects highlighted on the site:

Project	What it is	Stack	Links
ALL Blood Cell Classifier	ResNet50 model with Grad-CAM heatmaps and a full-stack inference UI	TensorFlow, Keras, FastAPI, React	Demo · Code
WGU CS Course Reviews	Community platform for CS course reviews and difficulty ratings	React, Node/Express, PostgreSQL, Docker	Demo · Code
Internship Tracker	Full-stack CRUD app to track applications, cutting manual tracking time ~60%, reducing overwhelm	Next.js, tRPC, Prisma, PostgreSQL	Code
SpaceX Launch Dashboard	Interactive, data-rich dashboard over the public SpaceX API	React, Vite, Recharts	Code

The full, filterable list lives on the Projects page.

---

Deployment

Deployed on Vercel with SPA rewrites configured in vercel.json (all routes fall back to index.html). Pushes to the default branch trigger automatic production deployments.

// vercel.json
{
  "buildCommand": "npm run build",
  "outputDirectory": "dist"
}

---

Connect

• Portfolio: akeight-portfolio.vercel.app
• GitHub: @akeight
• Contact: get in touch

_{© 2026 Allyson Keightley}