From da83eed0199a65ace3994a85f43415c7b22fbe87 Mon Sep 17 00:00:00 2001 From: hobokenchicken Date: Thu, 11 Jun 2026 00:16:38 -0400 Subject: [PATCH] docs: proper README with architecture, stack, and animation details --- README.md | 108 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 99 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index a36934d..bf5af12 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,106 @@ -# React + Vite +# Kayla Newkirk — Portfolio -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +A whimsical, storybook-style portfolio for Kayla Newkirk, MS.Ed, MHC-LP — PhD candidate in Counselor Education and Supervision. Built with React 19 and Framer Motion to create an immersive, animated reading experience that feels like stepping into an illustrated fairytale. -Currently, two official plugins are available: +## Stack -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs) -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) +| Layer | Choice | +|---|---| +| Framework | React 19 | +| Build tool | Vite 8 | +| Animation | Framer Motion 12 | +| Fonts | Cormorant Garamond (headings), DM Sans (body) | +| Styling | Plain CSS with custom properties | -## React Compiler +## Quick start -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). +```bash +npm install +npm run dev # dev server at localhost:5173 +npm run build # production build → dist/ +npm run preview # preview the production build +``` -## Expanding the ESLint configuration +## Project structure -If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. +``` +src/ +├── main.jsx # entry point, mounts React +├── App.jsx # all components in one file (~670 lines) +└── index.css # all styles, CSS custom properties, responsive rules + +public/ +├── headshot.webp # Kayla's profile photo +├── Kayla_Newkirk_CV.pdf # downloadable CV +├── Kayla_Newkirk_Resume.pdf # downloadable resume +└── Profile.pdf # LinkedIn profile export +``` + +## Architecture + +The entire site is a single-scroll page composed of sequential chapter components. Each chapter is a self-contained React component that uses Framer Motion's `useInView` hook to trigger staggered reveal animations as the user scrolls. + +### Component tree + +``` +App +├── Cursor # spring-physics custom cursor (hidden on mobile) +├── FloatingBlobs # five parallax orbs mapped to scroll position +├── Nav # sticky nav with scroll shadow toggle +├── TitlePage # hero with parallax fade-out on scroll +├── ChapterOne # "Here's What I Believe" +├── ChapterTwo # "The Road Here" — zigzag education timeline +├── ChapterThree # "Where the Work Happens" — clinical experience +├── ChapterFour # "Growing the Next Generation" — teaching + supervision +├── ChapterFive # "The Questions That Drive Me" — research +├── ChapterSix # "Beyond the Office" — service & leadership +├── Connect # contact + downloads +├── Footer +└── BackToTop # AnimatePresence-powered floating button +``` + +### Animation features + +- **Custom cursor** — spring-physics dot + ring with `useSpring` (stiffness 300/150, mix-blend-mode difference) +- **Parallax blobs** — five fixed orbs transformed via `useScroll` + `useTransform` at different speeds +- **Title page fade** — opacity and scale driven by `scrollYProgress` (0 → 0.15 range) +- **Scroll-triggered reveals** — `Reveal` wrapper using `useInView` with staggered delays per paragraph +- **Zigzag timeline** — education items slide in from alternating directions (`x: -30` / `x: 30`) +- **Chapter heads** — headings slide in from left (default) or right (flip) with `useInView` +- **Back to top** — `AnimatePresence` with enter/exit transitions +- **Nav entrance** — slides down from `y: -80` on first load + +### Chapter layout + +Chapters alternate between default (heading left, text right) and flip (heading right, text left) using `flex-direction: row-reverse`. The heading column is sticky at 100px from top so it follows the reader through long chapters. + +```css +.chapter-inner { + display: flex; gap: 36px; + max-width: 1120px; margin: 0 auto; +} +.chapter-head { flex: 0 0 240px; position: sticky; top: 100px; } +.chapter-body { flex: 1; max-width: 720px; } +.chapter-right { flex-direction: row-reverse; } +``` + +### Color palette + +All colors live in CSS custom properties on `:root`: + +| Variable | Hex | Role | +|---|---|---| +| `--bg` | `#f4efe6` | Page background (warm parchment) | +| `--page` | `#fdfaf4` | Alternating chapter surface (cream) | +| `--accent-lavender` | `#8a67ab` | Primary accent (headings, links, buttons) | +| `--accent-mint` | `#579d8a` | Secondary accent (labels, icons) | +| `--accent-rose` | `#c15869` | Tertiary accent (chapter numbers, meta text) | +| `--accent-gold` | `#c48f38` | Highlight accent (awards, stars) | +| `--text-primary` | `#3a3129` | Body text | +| `--text-secondary` | `#6d6257` | Secondary prose | + +### Responsive + +Two breakpoints: +- **900px** — chapters collapse to single column, timeline goes linear, sticky heads disable +- **768px** — tighter padding, custom cursor disabled, mobile nav hamburger menu (CSS-only toggle)