docs: proper README with architecture, stack, and animation details
This commit is contained in:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user