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)
|
| Layer | Choice |
|
||||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
|---|---|
|
||||||
|
| 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