107 lines
4.4 KiB
Markdown
107 lines
4.4 KiB
Markdown
# Kayla Newkirk — Portfolio
|
|
|
|
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.
|
|
|
|
## Stack
|
|
|
|
| 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 |
|
|
|
|
## Quick start
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev # dev server at localhost:5173
|
|
npm run build # production build → dist/
|
|
npm run preview # preview the production build
|
|
```
|
|
|
|
## Project structure
|
|
|
|
```
|
|
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)
|