React + Framer Motion rebuild: whimsical storybook portfolio for Kayla
This commit is contained in:
+24
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,16 @@
|
||||
# React + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@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/)
|
||||
|
||||
## React Compiler
|
||||
|
||||
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).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
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.
|
||||
@@ -0,0 +1,21 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{js,jsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
reactHooks.configs.flat.recommended,
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
globals: globals.browser,
|
||||
parserOptions: { ecmaFeatures: { jsx: true } },
|
||||
},
|
||||
},
|
||||
])
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>✿</text></svg>" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&display=swap" rel="stylesheet">
|
||||
<title>Kayla Newkirk — Counselor Educator & Clinical Mental Health Counselor</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+2495
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "kayla-whimsy-react",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"framer-motion": "^12.40.0",
|
||||
"react": "^19.2.6",
|
||||
"react-dom": "^19.2.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^10.0.1",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.1",
|
||||
"eslint": "^10.3.0",
|
||||
"eslint-plugin-react-hooks": "^7.1.1",
|
||||
"eslint-plugin-react-refresh": "^0.5.2",
|
||||
"globals": "^17.6.0",
|
||||
"vite": "^8.0.12"
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
@@ -0,0 +1,24 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||
</symbol>
|
||||
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||
</symbol>
|
||||
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||
</symbol>
|
||||
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||
</symbol>
|
||||
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
+669
@@ -0,0 +1,669 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
motion, useScroll, useTransform, useSpring,
|
||||
useMotionValue, AnimatePresence, useInView
|
||||
} from 'framer-motion';
|
||||
import './index.css';
|
||||
|
||||
/* ═══════════════════════════════════
|
||||
CUSTOM CURSOR
|
||||
═══════════════════════════════════ */
|
||||
function Cursor() {
|
||||
const x = useMotionValue(0);
|
||||
const y = useMotionValue(0);
|
||||
const springX = useSpring(x, { stiffness: 300, damping: 28 });
|
||||
const springY = useSpring(y, { stiffness: 300, damping: 28 });
|
||||
const ringX = useSpring(x, { stiffness: 150, damping: 18 });
|
||||
const ringY = useSpring(y, { stiffness: 150, damping: 18 });
|
||||
|
||||
useEffect(() => {
|
||||
const move = (e) => { x.set(e.clientX); y.set(e.clientY); };
|
||||
window.addEventListener('mousemove', move);
|
||||
return () => window.removeEventListener('mousemove', move);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div className="cursor-dot" style={{ translateX: springX, translateY: springY }} />
|
||||
<motion.div className="cursor-ring" style={{ translateX: ringX, translateY: ringY }} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════
|
||||
FLOATING BACKGROUND
|
||||
═══════════════════════════════════ */
|
||||
function FloatingBlobs() {
|
||||
const { scrollYProgress } = useScroll();
|
||||
const y1 = useTransform(scrollYProgress, [0, 1], [0, -120]);
|
||||
const y2 = useTransform(scrollYProgress, [0, 1], [0, 80]);
|
||||
const y3 = useTransform(scrollYProgress, [0, 1], [0, -60]);
|
||||
const y4 = useTransform(scrollYProgress, [0, 1], [0, 100]);
|
||||
const y5 = useTransform(scrollYProgress, [0, 1], [0, -90]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div className="blob blob-1" style={{ y: y1 }} />
|
||||
<motion.div className="blob blob-2" style={{ y: y2 }} />
|
||||
<motion.div className="blob blob-3" style={{ y: y3 }} />
|
||||
<motion.div className="blob blob-4" style={{ y: y4 }} />
|
||||
<motion.div className="blob blob-5" style={{ y: y5 }} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════
|
||||
NAVIGATION
|
||||
═══════════════════════════════════ */
|
||||
function Nav() {
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
useEffect(() => {
|
||||
const onScroll = () => setScrolled(window.scrollY > 20);
|
||||
window.addEventListener('scroll', onScroll);
|
||||
return () => window.removeEventListener('scroll', onScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<motion.nav
|
||||
initial={{ y: -80 }}
|
||||
animate={{ y: 0 }}
|
||||
transition={{ duration: 0.6, ease: 'easeOut' }}
|
||||
style={scrolled ? { boxShadow: '0 2px 14px rgba(60,40,20,0.06)' } : {}}
|
||||
>
|
||||
<div className="nav-inner">
|
||||
<a href="#" className="nav-brand">Kayla Newkirk</a>
|
||||
<div className="nav-links">
|
||||
<a href="#belief">the heart</a>
|
||||
<a href="#journey">the journey</a>
|
||||
<a href="#work">the work</a>
|
||||
<a href="#growing">growing others</a>
|
||||
<a href="#questions">digging deeper</a>
|
||||
<a href="#connect" className="nav-cta">let's talk ✦</a>
|
||||
</div>
|
||||
</div>
|
||||
</motion.nav>
|
||||
);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════
|
||||
SCROLL-TRIGGERED REVEAL
|
||||
═══════════════════════════════════ */
|
||||
function Reveal({ children, delay = 0 }) {
|
||||
const ref = useRef(null);
|
||||
const inView = useInView(ref, { once: true, margin: '-60px' });
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
initial={{ opacity: 0, y: 36 }}
|
||||
animate={inView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.7, delay, ease: [0.25, 0.46, 0.45, 0.94] }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════
|
||||
TITLE PAGE
|
||||
═══════════════════════════════════ */
|
||||
function TitlePage() {
|
||||
const { scrollYProgress } = useScroll();
|
||||
const opacity = useTransform(scrollYProgress, [0, 0.15], [1, 0]);
|
||||
const scale = useTransform(scrollYProgress, [0, 0.15], [1, 0.92]);
|
||||
const avatarRotate = useTransform(scrollYProgress, [0, 1], [0, 360]);
|
||||
|
||||
const titleRef = useRef(null);
|
||||
const titleInView = useInView(titleRef, { once: true });
|
||||
|
||||
return (
|
||||
<motion.section className="title-page" style={{ opacity, scale }}>
|
||||
<motion.div
|
||||
ref={titleRef}
|
||||
className="title-inner"
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={titleInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 1, ease: 'easeOut' }}
|
||||
>
|
||||
<div className="title-ornament">~ ✦ ❀ ✦ ~</div>
|
||||
|
||||
<div className="avatar-wrap">
|
||||
<motion.div
|
||||
className="avatar-ring"
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ duration: 22, repeat: Infinity, ease: 'linear' }}
|
||||
/>
|
||||
<motion.img
|
||||
src="/headshot.webp" alt="Kayla Newkirk" className="avatar"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
transition={{ type: 'spring', stiffness: 300 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3, duration: 0.8 }}
|
||||
>
|
||||
<h1>Kayla Newkirk</h1>
|
||||
<p className="title-subtitle">MS.Ed, MHC-LP — Counselor Educator & Clinical Practitioner</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.p
|
||||
className="title-tagline"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.6, duration: 1 }}
|
||||
>
|
||||
I believe that the heart of our work as counselors lies in the relationships we build,
|
||||
the spaces we create, the communities we nurture, and the courage we have to walk
|
||||
alongside one another through both struggle and growth.
|
||||
</motion.p>
|
||||
|
||||
<div className="title-ornament">~ ❀ ✦ ❀ ~</div>
|
||||
|
||||
<motion.div
|
||||
className="title-links"
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.8, duration: 0.6 }}
|
||||
>
|
||||
<a href="#belief" className="btn-primary">begin the story</a>
|
||||
<a href="/Kayla_Newkirk_CV.pdf" className="btn-secondary" target="_blank">CV</a>
|
||||
<a href="/Kayla_Newkirk_Resume.pdf" className="btn-secondary" target="_blank">Resume</a>
|
||||
<a href="/Profile.pdf" className="btn-secondary" target="_blank">Profile</a>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="scroll-hint"
|
||||
animate={{ y: [0, 8, 0] }}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
>
|
||||
<span>turn the page</span>
|
||||
<span>↓</span>
|
||||
</motion.div>
|
||||
</motion.section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════
|
||||
CHAPTER I — THE HEART
|
||||
═══════════════════════════════════ */
|
||||
function ChapterOne() {
|
||||
const headRef = useRef(null);
|
||||
const inView = useInView(headRef, { once: true, margin: '-80px' });
|
||||
|
||||
return (
|
||||
<section className="chapter" id="belief">
|
||||
<div className="chapter-inner">
|
||||
<motion.div
|
||||
ref={headRef}
|
||||
className="chapter-head"
|
||||
initial={{ opacity: 0, x: -40 }}
|
||||
animate={inView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.8, ease: 'easeOut' }}
|
||||
>
|
||||
<p className="chapter-num">Chapter One</p>
|
||||
<h2 className="chapter-title">
|
||||
<span className="chapter-icon" style={{color:'var(--accent-lavender)'}}>🪶</span>
|
||||
Here's What<br />I Believe
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="chapter-body">
|
||||
<Reveal><p className="drop-cap">I am a limited permit mental health counselor and a PhD candidate in Counselor Education and Supervision at Waynesburg University. But titles only tell you so much. What matters more to me is the space between people: the quiet moments when someone feels safe enough to be honest, and the steady, unglamorous practice of showing up day after day.</p></Reveal>
|
||||
<Reveal delay={0.1}><p>Five threads run through everything I do: counseling, supervision, teaching, research, and advocacy. They are not separate roles I switch between. They are different ways of expressing the same conviction — that we grow best when we grow together.</p></Reveal>
|
||||
<Reveal delay={0.2}><p>Outside of my professional roles, I am someone who finds meaning in quiet moments of reflection, in the honesty of a good conversation, and in the small, steady work of showing up. I believe that good counseling and good teaching are not so different. They both ask us to listen carefully, respond thoughtfully, and trust the process.</p></Reveal>
|
||||
<Reveal delay={0.3}><p className="bridge">Let me tell you how I got here, and where I am going.</p></Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════
|
||||
CHAPTER II — THE JOURNEY
|
||||
═══════════════════════════════════ */
|
||||
function ChapterTwo() {
|
||||
const headRef = useRef(null);
|
||||
const inView = useInView(headRef, { once: true, margin: '-80px' });
|
||||
|
||||
const timeline = [
|
||||
{ title: 'Ph.D., Counselor Education and Supervision', meta: 'Waynesburg University — 2025 to Present', text: 'My doctoral work centers on trauma-informed approaches to supervision and preparing future counselors to work with complex, marginalized populations. This is where all the threads come together.' },
|
||||
{ title: 'Ph.D., Counselor Education and Supervision', meta: 'University of Arkansas — 2023 to 2024', text: 'First year of doctoral studies: an advanced supervision practicum, a teaching assistantship, and collaborative research on gaming addiction and qualitative methodologies.' },
|
||||
{ title: 'MS.Ed., Clinical Mental Health Counseling', meta: 'Saint Bonaventure University — 2023 · magna cum laude', text: 'A CACREP-accredited program that shaped my clinical foundation through internships in addiction counseling, community mental health, and university-based clinic settings.' },
|
||||
{ title: 'B.A., Psychology', meta: 'SUNY Geneseo — 2019 · Minor in Human Development', text: 'My undergraduate years introduced me to the power of research. I studied language dynamics between children and their siblings and friends, and presented findings at a national psychology conference.' },
|
||||
{ title: 'A.A., Liberal Arts', meta: 'Cayuga Community College — 2016 · cum laude', text: 'Where it all began.' },
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="chapter" id="journey">
|
||||
<div className="chapter-inner chapter-right">
|
||||
<motion.div
|
||||
ref={headRef}
|
||||
className="chapter-head"
|
||||
initial={{ opacity: 0, x: 40 }}
|
||||
animate={inView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.8, ease: 'easeOut' }}
|
||||
>
|
||||
<p className="chapter-num">Chapter Two</p>
|
||||
<h2 className="chapter-title">
|
||||
<span className="chapter-icon" style={{color:'var(--accent-mint)'}}>🌱</span>
|
||||
The Road<br />Here
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="chapter-body">
|
||||
<Reveal><p className="drop-cap">Every counselor's path is shaped by the people they meet and the places they land. Mine began in a community college classroom in central New York and wound its way through undergraduate research labs, crisis hotlines at two in the morning, and doctoral seminars where the hardest questions were the ones without easy answers.</p></Reveal>
|
||||
|
||||
<div className="timeline">
|
||||
{timeline.map((item, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="timeline-item"
|
||||
initial={{ opacity: 0, x: i % 2 === 0 ? -30 : 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.6, delay: i * 0.1 }}
|
||||
>
|
||||
<h3>{item.title}</h3>
|
||||
<p className="meta">{item.meta}</p>
|
||||
<p>{item.text}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Reveal delay={0.1}>
|
||||
<div className="awards-callout">
|
||||
<h3>⭐ Highlights Along the Way</h3>
|
||||
<ul className="pub-list">
|
||||
<li><strong>JCPS Outstanding Journal Article Award</strong> — Journal of Counselor Preparation and Supervision, 2025</li>
|
||||
<li><strong>Chi Sigma Iota Honor Society</strong> — Rho Alpha Beta Chapter, 2024</li>
|
||||
<li><strong>Chi Sigma Iota Honor Society</strong> — Phi Rho Chapter, 2022–2023</li>
|
||||
<li><strong>Phi Theta Kappa Honor Society</strong> — 2015</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={0.2}><p className="bridge">But education is only part of the story. The real learning happened in the work.</p></Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════
|
||||
CHAPTER III — THE WORK
|
||||
═══════════════════════════════════ */
|
||||
function ChapterThree() {
|
||||
const headRef = useRef(null);
|
||||
const inView = useInView(headRef, { once: true, margin: '-80px' });
|
||||
|
||||
const blocks = [
|
||||
{ label: 'in private practice —', labelClass: '', title: 'Limited Permit Mental Health Counselor', meta: 'True Talk Mental Health Counseling, Manhasset, NY — 2024 to Present', text: 'I provide individual counseling to adults navigating anxiety, depression, life transitions, and trauma. I am intentional about creating a space where clients feel safe enough to explore the parts of their lives that feel the most tender.' },
|
||||
{ label: 'on the crisis line —', labelClass: 'story-label-mint', title: 'Shift Lead & Crisis Counselor', meta: 'Contact Community Services, Syracuse, NY — 2021 to 2023', text: 'On the other end of a crisis line, every call is different. I managed calls across eleven hotlines including the 988 Suicide and Crisis Lifeline, coordinated with emergency services, and deployed Mobile Crisis Teams. This work taught me more about presence and patience than any textbook could.' },
|
||||
{ label: 'boots on the ground —', labelClass: 'story-label-mint', title: 'Case Manager & Transition Facilitator', meta: 'Coordinated Care Services, Inc., Syracuse, NY — 2020 to 2021', text: 'I managed a caseload of twenty youth, ages sixteen to twenty-one, acting as primary liaison between clinical providers, social service agencies, educational institutions, and legal systems.' },
|
||||
{ label: 'in the realm of addiction —', labelClass: 'story-label-peach', title: 'SEAR Intern', meta: 'University of Arkansas Online Clinic — 2023', text: 'Working with clients navigating substance use disorders, I learned how deeply shame and stigma can wound. I carried forward a lasting belief that recovery is not a straight line, and our job is to walk alongside, not ahead.' },
|
||||
{ label: 'where I began —', labelClass: 'story-label-rose', title: "Master's Level Intern", meta: 'Branches of Growth & University of Arkansas — 2022 to 2023', text: 'Across two internship placements, I provided both in-person and remote counseling. These were the rooms where I first understood what it means to be a counselor.' },
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="chapter" id="work">
|
||||
<div className="chapter-inner">
|
||||
<motion.div
|
||||
ref={headRef}
|
||||
className="chapter-head"
|
||||
initial={{ opacity: 0, x: -40 }}
|
||||
animate={inView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.8, ease: 'easeOut' }}
|
||||
>
|
||||
<p className="chapter-num">Chapter Three</p>
|
||||
<h2 className="chapter-title">
|
||||
<span className="chapter-icon" style={{color:'var(--accent-rose)'}}>💝</span>
|
||||
Where the<br />Work Happens
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="chapter-body">
|
||||
<Reveal><p className="drop-cap">I practice from an Adlerian foundation integrated with evidence-based strategies including CBT, ACT, and motivational interviewing, always through a lens of cultural humility and ethical care. Each setting has taught me something irreplaceable about what it means to truly meet someone where they are.</p></Reveal>
|
||||
|
||||
{blocks.map((b, i) => (
|
||||
<Reveal key={i} delay={i * 0.08}>
|
||||
<div className="story-block">
|
||||
<h3><span className={`story-label ${b.labelClass}`}>{b.label}</span> {b.title}</h3>
|
||||
<p className="meta">{b.meta}</p>
|
||||
<p>{b.text}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
|
||||
<Reveal delay={0.4}><p className="bridge">But counseling is only one thread. I have always felt called to help others learn to do this work, too.</p></Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════
|
||||
CHAPTER IV — GROWING OTHERS
|
||||
═══════════════════════════════════ */
|
||||
function ChapterFour() {
|
||||
const headRef = useRef(null);
|
||||
const inView = useInView(headRef, { once: true, margin: '-80px' });
|
||||
|
||||
const teaching = [
|
||||
{ label: 'co-instructor —', labelClass: '', title: 'The Helping Relationship', meta: 'University of Arkansas, Undergraduate — Fall 2023', text: 'I co-taught this elective for students exploring helping professions. We focused on skills that are deceptively simple and profoundly hard: listening without fixing, sitting with discomfort, offering empathy genuinely.' },
|
||||
{ label: 'guest lecturer —', labelClass: 'story-label-mint', title: 'Advanced Counseling Theory', meta: 'University of Arkansas, Doctoral-Level — Spring 2024', text: 'I delivered a lecture on Rational Emotive Behavior Therapy to a CACREP-accredited doctoral class, connecting historical foundations to contemporary clinical applications.' },
|
||||
{ label: 'in the community —', labelClass: 'story-label-peach', title: 'Wellness Workshops', meta: 'University of Arkansas & Onondaga County Library — 2022 to 2024', text: 'Workshops on mindfulness, stress management, and academic success in settings from university classrooms to public libraries.' },
|
||||
{ label: 'a story of my own —', labelClass: 'story-label-peach', title: 'Graduate Commencement Speech', meta: 'St. Bonaventure University — 2023', text: 'I was honored to deliver the student speech at St. Bonaventure\'s graduate commencement ceremony.', video: 'https://www.youtube.com/embed/_pNKlE0xj14', links: [{ href: 'https://youtu.be/1vxL2TaIFRs', text: 'Mindfulness 101' }, { href: 'https://youtu.be/aZ9_oveH5qU', text: 'Stress Management Strategies' }] },
|
||||
];
|
||||
|
||||
const supervision = [
|
||||
{ label: 'doctoral supervisor —', labelClass: '', title: 'Internship Supervision', meta: 'Waynesburg University — Fall 2025 to Present', text: 'I currently supervise two master\'s-level internship students as they transition toward independent practice, focusing on professional identity development and advanced intervention strategies.' },
|
||||
{ label: 'doctoral supervisor —', labelClass: 'story-label-mint', title: 'Practicum Supervision', meta: 'Waynesburg University — Summer 2025', text: 'I supervised two practicum students taking their first steps into clinical work, creating an environment where they felt safe enough to be uncertain and supported enough to take risks.' },
|
||||
{ label: 'doctoral supervisor —', labelClass: 'story-label-peach', title: 'Practicum & Internship', meta: 'University of Arkansas — Spring 2024', text: 'Clinical supervision for four master\'s-level students. I learned that supervision is not about having all the answers, but about asking the questions that help supervisees find their own.' },
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="chapter" id="growing">
|
||||
<div className="chapter-inner chapter-right">
|
||||
<motion.div
|
||||
ref={headRef}
|
||||
className="chapter-head"
|
||||
initial={{ opacity: 0, x: 40 }}
|
||||
animate={inView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.8, ease: 'easeOut' }}
|
||||
>
|
||||
<p className="chapter-num">Chapter Four</p>
|
||||
<h2 className="chapter-title">
|
||||
<span className="chapter-icon" style={{color:'var(--accent-mint)'}}>🏠</span>
|
||||
Growing the<br />Next Generation
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="chapter-body">
|
||||
<Reveal><p className="drop-cap">Teaching and supervision are not separate callings for me. They are the same work in different rooms. Whether I am standing in front of a classroom or sitting beside a supervisee reviewing case notes, I am trying to create the conditions where someone can grow into the counselor they are meant to become.</p></Reveal>
|
||||
|
||||
<Reveal delay={0.1}><p className="chapter-subhead">📖 In the Classroom</p></Reveal>
|
||||
|
||||
{teaching.map((b, i) => (
|
||||
<Reveal key={`t-${i}`} delay={i * 0.06}>
|
||||
<div className="story-block">
|
||||
<h3><span className={`story-label ${b.labelClass}`}>{b.label}</span> {b.title}</h3>
|
||||
<p className="meta">{b.meta}</p>
|
||||
<p>{b.text}</p>
|
||||
{b.video && (
|
||||
<div style={{margin:'12px 0'}}>
|
||||
<iframe src={b.video} title="Kayla Newkirk's Graduate Speech" allowFullScreen loading="lazy" style={{borderRadius:6,width:'100%',maxWidth:480,aspectRatio:'16/9'}} />
|
||||
</div>
|
||||
)}
|
||||
{b.links && (
|
||||
<p style={{marginTop:8}}>
|
||||
{b.links.map((l, li) => (
|
||||
<span key={li}>{li > 0 && ' · '}<a href={l.href} target="_blank" style={{color:'var(--accent-rose)'}}>{l.text}</a></span>
|
||||
))}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
|
||||
<Reveal delay={0.2}><p className="chapter-subhead" style={{color:'var(--accent-mint)'}}>🤝 In the Supervision Room</p></Reveal>
|
||||
<Reveal delay={0.25}><p>I use the Discrimination Model through a developmental lens, flexing among teacher, counselor, and consultant to scaffold supervisee growth. All anchored in strong supervisory alliances and cultural responsiveness.</p></Reveal>
|
||||
|
||||
{supervision.map((b, i) => (
|
||||
<Reveal key={`s-${i}`} delay={0.3 + i * 0.06}>
|
||||
<div className="story-block">
|
||||
<h3><span className={`story-label ${b.labelClass}`}>{b.label}</span> {b.title}</h3>
|
||||
<p className="meta">{b.meta}</p>
|
||||
<p>{b.text}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
|
||||
<Reveal delay={0.5}><p className="bridge">Some questions are bigger than any single supervision session. For those, I turn to research.</p></Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════
|
||||
CHAPTER V — DIGGING DEEPER
|
||||
═══════════════════════════════════ */
|
||||
function ChapterFive() {
|
||||
const headRef = useRef(null);
|
||||
const inView = useInView(headRef, { once: true, margin: '-80px' });
|
||||
|
||||
const research = [
|
||||
{ label: 'qualitative research —', labelClass: '', title: 'Trans Experiences in the U.S. Prison System', meta: 'Dissertation Research Collaboration, University of Arkansas — 2025', text: 'I applied thematic coding to over sixty post-incarceration statements, illuminating the structural harm endured by transgender individuals in the prison system.' },
|
||||
{ label: 'addiction research —', labelClass: 'story-label-mint', title: 'Gaming Addiction Study', meta: 'Research Assistant, University of Arkansas — 2023', text: 'Coded over 250 individual gaming posts for qualitative patterns and contributed to team coding of over 500 posts in a rigorous, consensus-driven research process.' },
|
||||
{ label: 'developmental psychology —', labelClass: 'story-label-peach', title: 'Language Dynamics in Children', meta: 'Research Assistant, SUNY Geneseo — 2017 to 2019', text: 'Studied how seven-year-olds use assertive and affiliative language with siblings versus friends. Presented at the APS Annual Convention in Washington, D.C.' },
|
||||
];
|
||||
|
||||
const presentations = [
|
||||
'"Virtual Vitality: Bridging the CSI Counselor Wellness Competencies and the CHANGES Model for Accessible Telehealth Supervision" — IAWC 2026 World Conference, Dallas, TX. May 2026.',
|
||||
'"Evaluation in Counseling Supervision: Enhancing Practice through Feedback" — Virtual CE presentation with Jennifer Morris, LPC. Spring 2024.',
|
||||
'"We Care on the Go" — Guided imagery session, University of Arkansas, GRAD 340. April 2024.',
|
||||
'Narcan Training — SEAR Ambassadors, Alpha Chi Omega Sorority House, Fayetteville, AR. 2023.',
|
||||
'"Implementing Evidence-Based Wellness Practices for Counselors" — CSI Days Virtual Poster Session. 2022–2023.',
|
||||
'"Mindfulness 101: Stress to Rest" — Onondaga County Library. July 2023.',
|
||||
'"Stress Management" — Onondaga County Library. July 2023.',
|
||||
'"Gender and Task in 7-Year Old\'s Language with Siblings and Friend" — APS Annual Convention, Washington D.C., 2019.',
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="chapter" id="questions">
|
||||
<div className="chapter-inner">
|
||||
<motion.div
|
||||
ref={headRef}
|
||||
className="chapter-head"
|
||||
initial={{ opacity: 0, x: -40 }}
|
||||
animate={inView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.8, ease: 'easeOut' }}
|
||||
>
|
||||
<p className="chapter-num">Chapter Five</p>
|
||||
<h2 className="chapter-title">
|
||||
<span className="chapter-icon" style={{color:'var(--accent-gold)'}}>🔍</span>
|
||||
The Questions<br />That Drive Me
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="chapter-body">
|
||||
<Reveal><p className="drop-cap">I am committed to scholarship that amplifies marginalized voices and advances inclusive excellence. Research, for me, is not an academic exercise. It is a way of bearing witness and a refusal to look away from the hard questions our field needs to ask.</p></Reveal>
|
||||
|
||||
<Reveal delay={0.1}><p className="chapter-subhead">Published Work</p></Reveal>
|
||||
<Reveal delay={0.15}>
|
||||
<ul className="pub-list">
|
||||
<li><strong>Henry, H., Newkirk, K.,</strong> & Guggenberger, L. "The Power of Choice: Comparing Asynchronous and Synchronous Learning." <em>Journal of Counselor Preparation and Supervision</em>, 2025.</li>
|
||||
</ul>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={0.2}><p className="chapter-subhead">Research I've Been Part Of</p></Reveal>
|
||||
|
||||
{research.map((r, i) => (
|
||||
<Reveal key={i} delay={0.25 + i * 0.06}>
|
||||
<div className="story-block">
|
||||
<h3><span className={`story-label ${r.labelClass}`}>{r.label}</span> {r.title}</h3>
|
||||
<p className="meta">{r.meta}</p>
|
||||
<p>{r.text}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
|
||||
<Reveal delay={0.4}><p className="chapter-subhead">Selected Presentations</p></Reveal>
|
||||
<Reveal delay={0.45}>
|
||||
<ul className="pub-list">
|
||||
{presentations.map((p, i) => <li key={i}>{p}</li>)}
|
||||
</ul>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={0.5}><p className="bridge">Scholarship is one way to make a difference. Showing up in the rooms where decisions are made is another.</p></Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════
|
||||
CHAPTER VI — BEYOND THE OFFICE
|
||||
═══════════════════════════════════ */
|
||||
function ChapterSix() {
|
||||
const headRef = useRef(null);
|
||||
const inView = useInView(headRef, { once: true, margin: '-80px' });
|
||||
|
||||
const blocks = [
|
||||
{ label: 'co-chair —', labelClass: '', title: 'IAWC Doctoral Student Committee', meta: 'International Association of Women in Counseling — 2025 to 2026', text: 'Shaped the doctoral student experience at the 2026 World Conference in Dallas: organized panel sessions, coordinated the mixer, managed mentorship programming.' },
|
||||
{ label: 'committee member —', labelClass: '', title: 'ACES Continuing Education', meta: 'Association for Counselor Education and Supervision — 2025 to 2026', text: 'Shaping professional development for counselor educators and supervisors nationwide.' },
|
||||
{ label: 'committee member —', labelClass: '', title: 'ACES Presidential Task Force', meta: 'Association for Counselor Education and Supervision — 2025 to 2026', text: 'Contributing to national initiatives shaping the future of counselor education.' },
|
||||
{ label: 'reviewer & member —', labelClass: 'story-label-mint', title: 'NARACES & ACAC', meta: '2025 to Present', text: 'Peer-reviewing national proposals and managing competitive review pipelines.' },
|
||||
{ label: 'academic coach —', labelClass: 'story-label-mint', title: 'Calculus Support', meta: 'University of Arkansas — 2023 to 2024', text: 'Worked one-on-one with ten to fifteen engineering students each semester. Teaching is not just about content. It is about helping someone discover they are capable of more than they believe.' },
|
||||
{ label: 'group facilitator —', labelClass: 'story-label-mint', title: 'CMHC Process Group', meta: 'University of Arkansas — 2023', text: 'Designed and facilitated a weekly process group for master\'s students in the Clinical Mental Health Counseling program.' },
|
||||
{ label: 'graduate assistant —', labelClass: 'story-label-peach', title: 'Research & Departmental Support', meta: 'St. Bonaventure University — 2021 to 2023', text: 'Supported faculty research with literature reviews and co-authorship across 300+ hours of collaborative work.' },
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="chapter" id="service">
|
||||
<div className="chapter-inner chapter-right">
|
||||
<motion.div
|
||||
ref={headRef}
|
||||
className="chapter-head"
|
||||
initial={{ opacity: 0, x: 40 }}
|
||||
animate={inView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.8, ease: 'easeOut' }}
|
||||
>
|
||||
<p className="chapter-num">Chapter Six</p>
|
||||
<h2 className="chapter-title">
|
||||
<span className="chapter-icon" style={{color:'var(--accent-rose)'}}>🤝</span>
|
||||
Beyond the<br />Office
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="chapter-body">
|
||||
<Reveal><p className="drop-cap">My professional mission is grounded in disability justice, universal design, and evolving the way we support counselors and students. Advancing our profession and supporting the next generation is not optional. It is essential. These are the rooms where I show up.</p></Reveal>
|
||||
|
||||
{blocks.map((b, i) => (
|
||||
<Reveal key={i} delay={i * 0.06}>
|
||||
<div className="story-block">
|
||||
<h3><span className={`story-label ${b.labelClass}`}>{b.label}</span> {b.title}</h3>
|
||||
<p className="meta">{b.meta}</p>
|
||||
<p>{b.text}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
|
||||
<Reveal delay={0.4}><p className="bridge">That's my story so far. But I would much rather hear yours.</p></Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════
|
||||
CONNECT
|
||||
═══════════════════════════════════ */
|
||||
function Connect() {
|
||||
const ref = useRef(null);
|
||||
const inView = useInView(ref, { once: true });
|
||||
|
||||
return (
|
||||
<motion.section
|
||||
ref={ref}
|
||||
className="chapter connect-section"
|
||||
id="connect"
|
||||
style={{ background: 'linear-gradient(160deg, var(--pastel-lavender) 0%, var(--pastel-mint) 50%, var(--pastel-pink) 100%)' }}
|
||||
>
|
||||
<div className="chapter-inner">
|
||||
<motion.div
|
||||
className="chapter-head"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={inView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<p className="chapter-num">The Next Chapter</p>
|
||||
<h2 className="chapter-title">Where Should We<br />Go From Here?</h2>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="chapter-body"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={inView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<div className="ornament">~ ✦ ❀ ✦ ~</div>
|
||||
<p>Whether you are a student wondering if this field is for you, a colleague with an idea for collaboration, or someone who simply wants to reach out and say hello: I would love to hear from you. The best conversations start when we show up as we are and discover what we can build together.</p>
|
||||
|
||||
<div className="email-pill">
|
||||
<span style={{color:'var(--accent-rose)'}}>✉</span> kayla.newkirk@student.waynesburg.edu
|
||||
</div>
|
||||
|
||||
<div className="contact-row">
|
||||
<a href="mailto:kayla.newkirk@student.waynesburg.edu">✉ Send an Email</a>
|
||||
<a href="https://www.linkedin.com/in/kayla-newkirk-986b32182/" target="_blank">🔗 Connect on LinkedIn</a>
|
||||
</div>
|
||||
|
||||
<div className="download-row">
|
||||
<a href="/Kayla_Newkirk_CV.pdf" target="_blank">📄 Download CV</a>
|
||||
<a href="/Kayla_Newkirk_Resume.pdf" target="_blank">📄 Download Resume</a>
|
||||
<a href="/Profile.pdf" target="_blank">🔗 LinkedIn Profile</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════
|
||||
BACK TO TOP
|
||||
═══════════════════════════════════ */
|
||||
function BackToTop() {
|
||||
const [visible, setVisible] = useState(false);
|
||||
useEffect(() => {
|
||||
const onScroll = () => setVisible(window.scrollY > 500);
|
||||
window.addEventListener('scroll', onScroll);
|
||||
return () => window.removeEventListener('scroll', onScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{visible && (
|
||||
<motion.button
|
||||
className="back-to-top"
|
||||
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 20 }}
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
>
|
||||
↑
|
||||
</motion.button>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════
|
||||
APP
|
||||
═══════════════════════════════════ */
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<Cursor />
|
||||
<FloatingBlobs />
|
||||
<Nav />
|
||||
<TitlePage />
|
||||
<ChapterOne />
|
||||
<ChapterTwo />
|
||||
<ChapterThree />
|
||||
<ChapterFour />
|
||||
<ChapterFive />
|
||||
<ChapterSix />
|
||||
<Connect />
|
||||
<footer>
|
||||
<p>© 2025 Kayla Newkirk. Built with care in Syracuse, NY. ✿</p>
|
||||
</footer>
|
||||
<BackToTop />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
+389
@@ -0,0 +1,389 @@
|
||||
/* ══════════════════════════════════════
|
||||
KAYLA NEWKIRK — Enchanted Garden
|
||||
══════════════════════════════════════ */
|
||||
|
||||
:root {
|
||||
--bg: #f4efe6;
|
||||
--page: #fdfaf4;
|
||||
--pastel-lavender: #e2d2ed;
|
||||
--pastel-mint: #c2e2d6;
|
||||
--pastel-peach: #f7d4be;
|
||||
--pastel-pink: #f9d0dd;
|
||||
--pastel-yellow: #fbf0cb;
|
||||
--pastel-blue: #ceddf2;
|
||||
--accent-lavender: #8a67ab;
|
||||
--accent-mint: #579d8a;
|
||||
--accent-rose: #c15869;
|
||||
--accent-gold: #c48f38;
|
||||
--text-primary: #3a3129;
|
||||
--text-secondary: #6d6257;
|
||||
--text-muted: #b2a798;
|
||||
--border: #e4dbce;
|
||||
--font-body: 'DM Sans', sans-serif;
|
||||
--font-display: 'Cormorant Garamond', serif;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background: var(--bg);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.9;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
/* ── Custom Cursor ── */
|
||||
.cursor-dot {
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-rose);
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.cursor-ring {
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
width: 36px; height: 36px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid var(--accent-lavender);
|
||||
pointer-events: none;
|
||||
z-index: 9998;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
|
||||
/* ── Navigation ── */
|
||||
nav {
|
||||
position: fixed; top: 0; left: 0; right: 0;
|
||||
height: 68px;
|
||||
background: rgba(244, 239, 230, 0.88);
|
||||
backdrop-filter: blur(18px);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 32px;
|
||||
}
|
||||
.nav-inner {
|
||||
max-width: 1200px; width: 100%; margin: 0 auto;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
}
|
||||
.nav-brand {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.15rem; font-weight: 500; font-style: italic;
|
||||
color: var(--text-primary); text-decoration: none; position: relative;
|
||||
}
|
||||
.nav-brand::after {
|
||||
content: '❀'; position: absolute; top: -5px; right: -16px;
|
||||
font-size: 0.55rem; font-style: normal; color: var(--accent-rose);
|
||||
}
|
||||
.nav-links { display: flex; gap: 4px; align-items: center; }
|
||||
.nav-links a {
|
||||
text-decoration: none; color: var(--text-secondary); font-size: 0.8rem;
|
||||
font-weight: 400; font-family: var(--font-display); font-style: italic;
|
||||
padding: 5px 12px; border-radius: 20px; transition: all 0.25s;
|
||||
cursor: none;
|
||||
}
|
||||
.nav-links a:hover { background: var(--pastel-lavender); color: var(--text-primary); }
|
||||
.nav-links .nav-cta {
|
||||
background: var(--accent-lavender); color: #fff;
|
||||
font-style: normal; font-family: var(--font-body); font-weight: 500;
|
||||
}
|
||||
.nav-links .nav-cta:hover { background: #7a5799; color: #fff; }
|
||||
|
||||
/* ── Title Page ── */
|
||||
.title-page {
|
||||
min-height: 100vh;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
padding: 100px 24px 60px;
|
||||
position: relative; z-index: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.title-inner { max-width: 640px; position: relative; z-index: 1; }
|
||||
.title-ornament {
|
||||
font-family: var(--font-display); color: var(--accent-lavender);
|
||||
font-size: 1.4rem; letter-spacing: 0.3em; margin: 12px 0; opacity: 0.6;
|
||||
}
|
||||
.avatar-wrap { position: relative; display: inline-block; margin-bottom: 32px; }
|
||||
.avatar {
|
||||
width: 160px; height: 160px; border-radius: 50%; object-fit: cover;
|
||||
box-shadow: 0 8px 32px rgba(60,40,20,0.08); border: 3px solid var(--page);
|
||||
}
|
||||
.avatar-ring {
|
||||
position: absolute; top: -8px; left: -8px;
|
||||
width: 176px; height: 176px; border-radius: 50%;
|
||||
border: 2px dashed var(--accent-lavender);
|
||||
}
|
||||
.title-page h1 {
|
||||
font-family: var(--font-display); font-size: 3.2rem;
|
||||
font-weight: 500; font-style: italic; line-height: 1.15; margin-bottom: 4px;
|
||||
}
|
||||
.title-subtitle {
|
||||
font-size: 1rem; color: var(--accent-rose); font-weight: 400;
|
||||
font-family: var(--font-display); font-style: italic; margin-bottom: 8px;
|
||||
}
|
||||
.title-tagline {
|
||||
font-size: 1rem; color: var(--text-secondary); line-height: 1.8;
|
||||
max-width: 600px; margin: 0 auto; font-weight: 300;
|
||||
}
|
||||
.title-links { margin-top: 36px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn-primary, .btn-secondary {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
text-decoration: none; padding: 9px 22px; border-radius: 30px;
|
||||
font-weight: 500; font-size: 0.85rem; transition: all 0.25s;
|
||||
cursor: none;
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--accent-lavender); color: #fff;
|
||||
font-family: var(--font-body);
|
||||
box-shadow: 0 4px 16px rgba(138, 103, 171, 0.35);
|
||||
}
|
||||
.btn-primary:hover { background: #7a5799; transform: translateY(-2px); }
|
||||
.btn-secondary {
|
||||
border: 1px solid var(--border); color: var(--text-primary);
|
||||
background: var(--page); font-family: var(--font-body);
|
||||
}
|
||||
.btn-secondary:hover { border-color: var(--accent-lavender); transform: translateY(-2px); }
|
||||
.scroll-hint {
|
||||
position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
|
||||
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
||||
color: var(--text-muted); font-size: 0.7rem;
|
||||
font-family: var(--font-display); font-style: italic; letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
/* ── Chapters ── */
|
||||
.chapter {
|
||||
padding: 56px 32px; position: relative; z-index: 1;
|
||||
display: flex; justify-content: center;
|
||||
}
|
||||
.chapter:nth-child(even) { background: var(--page); }
|
||||
.chapter-inner {
|
||||
display: flex; gap: 36px; align-items: flex-start;
|
||||
max-width: 1120px; width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.chapter-right { flex-direction: row-reverse; }
|
||||
|
||||
.chapter-head {
|
||||
flex: 0 0 240px; position: sticky; top: 100px;
|
||||
}
|
||||
.chapter-right .chapter-head { text-align: right; }
|
||||
|
||||
.chapter-num {
|
||||
font-family: var(--font-display); font-size: 0.7rem;
|
||||
text-transform: uppercase; letter-spacing: 0.22em;
|
||||
color: var(--accent-rose); font-weight: 400; font-style: italic; margin-bottom: 4px;
|
||||
}
|
||||
.chapter-title {
|
||||
font-family: var(--font-display); font-size: 2.4rem;
|
||||
font-weight: 500; font-style: italic; line-height: 1.2; color: var(--text-primary);
|
||||
}
|
||||
.chapter-icon { display: block; margin-bottom: 8px; font-size: 1.5rem; }
|
||||
|
||||
.chapter-body { flex: 1; min-width: 0; max-width: 720px; }
|
||||
.chapter-body p {
|
||||
margin-bottom: 16px; color: var(--text-secondary);
|
||||
font-size: 0.95rem; line-height: 1.85;
|
||||
}
|
||||
|
||||
/* ── Drop Cap ── */
|
||||
.drop-cap::first-letter {
|
||||
font-family: var(--font-display); font-size: 3.8rem;
|
||||
font-weight: 500; font-style: italic; float: left;
|
||||
line-height: 0.75; padding-right: 10px; padding-top: 6px;
|
||||
color: var(--accent-lavender);
|
||||
}
|
||||
|
||||
/* ── Story Blocks ── */
|
||||
.story-block {
|
||||
padding: 0 0 16px 0; margin-bottom: 16px;
|
||||
border-bottom: 1px dotted var(--border);
|
||||
}
|
||||
.story-block:last-child { border-bottom: none; margin-bottom: 0; }
|
||||
.story-block:nth-child(even) { margin-left: 24px; }
|
||||
.story-block:nth-child(odd) { margin-right: 24px; }
|
||||
.story-block h3 {
|
||||
font-family: var(--font-display); font-size: 1.15rem;
|
||||
font-weight: 500; font-style: italic; margin-bottom: 1px; color: var(--text-primary);
|
||||
}
|
||||
.story-block .meta {
|
||||
font-size: 0.82rem; color: var(--accent-rose);
|
||||
font-family: var(--font-display); font-style: italic; margin-bottom: 8px;
|
||||
}
|
||||
.story-block p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.85; }
|
||||
|
||||
.story-label { font-family: var(--font-display); font-style: italic; color: var(--accent-lavender); }
|
||||
.story-label-mint { color: var(--accent-mint); }
|
||||
.story-label-peach { color: #b56b42; }
|
||||
.story-label-rose { color: var(--accent-rose); }
|
||||
|
||||
/* ── Zigzag Timeline ── */
|
||||
.timeline { position: relative; padding: 0; }
|
||||
.timeline::before {
|
||||
content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
|
||||
width: 2px; background: linear-gradient(to bottom, transparent, var(--accent-lavender) 5%, var(--accent-lavender) 95%, transparent);
|
||||
opacity: 0.3;
|
||||
}
|
||||
.timeline-item {
|
||||
position: relative; width: 48%; padding: 10px 0 20px;
|
||||
}
|
||||
.timeline-item:nth-child(odd) { margin-right: 52%; text-align: right; padding-right: 36px; }
|
||||
.timeline-item:nth-child(even) { margin-left: 52%; text-align: left; padding-left: 36px; }
|
||||
.timeline-item::before {
|
||||
content: ''; position: absolute; top: 24px; width: 12px; height: 12px;
|
||||
border-radius: 50%; background: var(--accent-lavender);
|
||||
border: 2px solid var(--page); box-shadow: 0 0 0 3px var(--accent-lavender);
|
||||
opacity: 0.4; z-index: 1;
|
||||
}
|
||||
.timeline-item:nth-child(odd)::before { right: -8px; }
|
||||
.timeline-item:nth-child(even)::before { left: -8px; }
|
||||
.timeline-item h3 {
|
||||
font-family: var(--font-display); font-size: 1.1rem;
|
||||
font-weight: 500; font-style: italic; margin-bottom: 1px; color: var(--text-primary);
|
||||
}
|
||||
.timeline-item .meta {
|
||||
font-size: 0.82rem; color: var(--accent-rose);
|
||||
font-family: var(--font-display); font-style: italic; margin-bottom: 6px;
|
||||
}
|
||||
.timeline-item p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.8; }
|
||||
|
||||
/* ── Awards Callout ── */
|
||||
.awards-callout {
|
||||
margin-top: 32px; padding: 28px 32px;
|
||||
background: linear-gradient(135deg, rgba(251,240,203,0.5), rgba(226,210,237,0.3));
|
||||
border-radius: 6px; border: 1px solid var(--border);
|
||||
}
|
||||
.awards-callout h3 {
|
||||
font-family: var(--font-display); font-style: italic; font-size: 1.05rem;
|
||||
color: var(--accent-gold); margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* ── Publications ── */
|
||||
.pub-list { list-style: none; padding: 0; }
|
||||
.pub-list li {
|
||||
padding: 10px 0; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.8;
|
||||
}
|
||||
.pub-list li::before { content: '❀ '; color: var(--accent-lavender); font-size: 0.65rem; }
|
||||
|
||||
/* ── Chapter Subhead ── */
|
||||
.chapter-subhead {
|
||||
font-family: var(--font-display); font-size: 1.3rem;
|
||||
font-weight: 500; font-style: italic; margin: 24px 0 10px; color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ── Bridge Text ── */
|
||||
.bridge {
|
||||
text-align: center; margin: 24px 0 0;
|
||||
font-family: var(--font-display); font-style: italic;
|
||||
font-size: 1.05rem; color: var(--accent-rose);
|
||||
}
|
||||
|
||||
/* ── Ornament ── */
|
||||
.ornament {
|
||||
text-align: center; color: var(--accent-lavender);
|
||||
font-size: 1.2rem; letter-spacing: 0.4em; margin: 28px 0; opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ── Connect ── */
|
||||
.connect-section { text-align: center; }
|
||||
.connect-section .chapter-inner {
|
||||
flex-direction: column; align-items: center;
|
||||
max-width: 600px; margin: 0 auto;
|
||||
}
|
||||
.connect-section .chapter-head { flex: none; position: static; text-align: center; }
|
||||
.connect-section .chapter-title { font-size: 1.9rem; }
|
||||
.connect-section .chapter-body { max-width: 600px; }
|
||||
|
||||
.email-pill {
|
||||
display: inline-flex; align-items: center; gap: 10px;
|
||||
background: var(--page); padding: 10px 24px; border-radius: 30px;
|
||||
font-weight: 500; font-size: 0.88rem; color: var(--text-primary);
|
||||
margin-bottom: 24px; box-shadow: 0 2px 14px rgba(60,40,20,0.06);
|
||||
font-family: var(--font-display); font-style: italic;
|
||||
}
|
||||
.email-pill i { color: var(--accent-rose); }
|
||||
|
||||
.contact-row {
|
||||
display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 22px;
|
||||
}
|
||||
.contact-row a {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
text-decoration: none; color: var(--text-primary); font-weight: 400;
|
||||
font-family: var(--font-display); font-style: italic;
|
||||
padding: 9px 20px; border-radius: 30px; background: var(--page);
|
||||
transition: all 0.25s; font-size: 0.88rem;
|
||||
box-shadow: 0 2px 14px rgba(60,40,20,0.06); cursor: none;
|
||||
}
|
||||
.contact-row a:hover { transform: translateY(-2px); }
|
||||
.contact-row a i { color: var(--accent-lavender); }
|
||||
|
||||
.download-row {
|
||||
display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
|
||||
}
|
||||
.download-row a {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
padding: 9px 20px; border-radius: 30px; text-decoration: none;
|
||||
font-weight: 400; font-family: var(--font-display); font-style: italic;
|
||||
font-size: 0.85rem; background: var(--page); color: var(--text-primary);
|
||||
border: 1px solid var(--border); transition: all 0.25s; cursor: none;
|
||||
}
|
||||
.download-row a:hover { border-color: var(--accent-lavender); transform: translateY(-2px); }
|
||||
|
||||
/* ── Footer ── */
|
||||
footer {
|
||||
text-align: center; padding: 32px 24px; font-size: 0.8rem;
|
||||
color: var(--text-muted); background: var(--page);
|
||||
font-family: var(--font-display); font-style: italic;
|
||||
}
|
||||
|
||||
/* ── Floating Blobs ── */
|
||||
.blob {
|
||||
position: fixed; border-radius: 50%; filter: blur(70px);
|
||||
opacity: 0.28; pointer-events: none; z-index: 0;
|
||||
}
|
||||
.blob-1 { width: 400px; height: 400px; background: var(--pastel-lavender); top: -100px; left: -60px; }
|
||||
.blob-2 { width: 340px; height: 340px; background: var(--pastel-mint); top: 40%; right: -80px; }
|
||||
.blob-3 { width: 280px; height: 280px; background: var(--pastel-pink); bottom: 5%; left: 20%; }
|
||||
.blob-4 { width: 240px; height: 240px; background: var(--pastel-peach); top: 25%; left: 55%; }
|
||||
.blob-5 { width: 260px; height: 260px; background: var(--pastel-blue); bottom: -30px; right: 10%; }
|
||||
|
||||
/* ── Back to Top ── */
|
||||
.back-to-top {
|
||||
position: fixed; bottom: 26px; right: 26px;
|
||||
width: 44px; height: 44px; border-radius: 50%;
|
||||
background: var(--accent-lavender); color: #fff; border: none;
|
||||
font-size: 1.1rem; z-index: 99;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
box-shadow: 0 4px 16px rgba(138, 103, 171, 0.4); cursor: none;
|
||||
}
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media (max-width: 900px) {
|
||||
.chapter-inner { flex-direction: column !important; gap: 24px; margin: 0 auto !important; }
|
||||
.chapter-head { flex: none; position: static; text-align: left !important; }
|
||||
.chapter-title { font-size: 1.8rem; }
|
||||
.chapter-icon { display: inline; margin-bottom: 0; font-size: 1.2rem; }
|
||||
.chapter-body { max-width: 100%; }
|
||||
.story-block:nth-child(even) { margin-left: 0; }
|
||||
.story-block:nth-child(odd) { margin-right: 0; }
|
||||
.timeline::before { left: 16px; }
|
||||
.timeline-item { width: 100%; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; padding-left: 44px !important; padding-right: 0 !important; }
|
||||
.timeline-item::before { left: 10px !important; right: auto !important; }
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.title-page h1 { font-size: 2.2rem; }
|
||||
.avatar { width: 130px; height: 130px; }
|
||||
.avatar-ring { width: 146px; height: 146px; top: -6px; left: -6px; }
|
||||
.chapter { padding: 70px 20px; }
|
||||
.nav-links { display: none; }
|
||||
.cursor-dot, .cursor-ring { display: none; }
|
||||
body { cursor: auto; }
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Reference in New Issue
Block a user