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

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.

.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)

4.4 KiB Raw Blame History