import { useState, useEffect, useRef, useCallback } from „react”;
import { motion, AnimatePresence, useScroll, useTransform, useInView } from „framer-motion”;
/* ─── CSS injected via style tag ─── */
const GlobalStyles = () => (
);
/* ─── Placeholder images ─── */
const IMAGES = {
projects: [
„https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=800&h=600&fit=crop”,
„https://images.unsplash.com/photo-1486325212027-8081e485255e?w=800&h=600&fit=crop”,
„https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=800&h=600&fit=crop”,
„https://images.unsplash.com/photo-1600132806370-bf17e65e942f?w=800&h=600&fit=crop”,
],
explorations: [
„https://images.unsplash.com/photo-1614732414444-096e5f1122d5?w=600&h=600&fit=crop”,
„https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=600&fit=crop”,
„https://images.unsplash.com/photo-1557672172-298e090bd0f1?w=600&h=600&fit=crop”,
„https://images.unsplash.com/photo-1558618666-fcd25c85f82e?w=600&h=600&fit=crop”,
„https://images.unsplash.com/photo-1620121692029-d088224ddc74?w=600&h=600&fit=crop”,
„https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=600&h=600&fit=crop”,
],
journal: [
„https://images.unsplash.com/photo-1614732414444-096e5f1122d5?w=200&h=200&fit=crop”,
„https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=200&h=200&fit=crop”,
„https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=200&h=200&fit=crop”,
„https://images.unsplash.com/photo-1557672172-298e090bd0f1?w=200&h=200&fit=crop”,
],
};
/* ─── Data ─── */
const PROJECTS = [
{ slug: „automotive-motion”, title: „Automotive Motion”, gradient: „from-violet-500 via-fuchsia-400/60 via-indigo-500/60 to-transparent” },
{ slug: „urban-architecture”, title: „Urban Architecture”, gradient: „from-sky-500 via-blue-400/60 to-transparent” },
{ slug: „human-perspective”, title: „Human Perspective”, gradient: „from-emerald-500 via-emerald-300/60 via-teal-500/60 to-transparent” },
{ slug: „brand-identity”, title: „Brand Identity”, gradient: „from-amber-500 via-amber-300/60 via-orange-500/60 to-transparent” },
];
const JOURNAL = [
{ title: „The Future of Generative Art in 2026”, readTime: „6 min read”, date: „Feb 13, 2026” },
{ title: „Designing for the Next Billion Users”, readTime: „5 min read”, date: „Feb 06, 2026” },
{ title: „The Psychology of Minimalist Motion”, readTime: „6 min read”, date: „Feb 03, 2026” },
{ title: „The Importance of Mobile-First Design”, readTime: „5 min read”, date: „Jan 31, 2026” },
];
const EXPLORATIONS = [
{ id: 1, title: „Celestial Planets”, category: „3D Visualization” },
{ id: 2, title: „ASCII Art Study”, category: „Generative Art” },
{ id: 3, title: „Atmospheric Smoke”, category: „Visual Effects” },
{ id: 4, title: „Abstract Cylinder”, category: „3D Rendering” },
{ id: 5, title: „Organic Waves”, category: „Motion Design” },
{ id: 6, title: „Geometric Cubes”, category: „3D Composition” },
];
const STATS = [
{ number: „20+”, label: „Years Experience”, sublabel: „In the web design industry field.” },
{ number: „95+”, label: „Projects Done”, sublabel: „Around worldwide in last five years.” },
{ number: „200%”, label: „Satisfied Clients”, sublabel: „With a great experience and results.” },
];
const NAV_ITEMS = [„Home”, „Work”, „Resume”];
const ROLES = [„Creative”, „Fullstack”, „Founder”, „Scholar”];
const LOADING_WORDS = [„Design”, „Create”, „Inspire”];
/* ─── Section Animation Wrapper ─── */
const SectionReveal = ({ children, className = „”, delay = 0 }) => {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, margin: „-100px” });
return (
{children}
);
};
/* ─── Section Header ─── */
const SectionHeader = ({ eyebrow, heading, italicWord, subtext, buttonText, onButton }) => (
{heading} {italicWord}
{subtext &&
{subtext}
}
{buttonText && (
{buttonText} →
)}
);
/* ═══════════════════════════════════════════
SECTION 1: LOADING SCREEN
═══════════════════════════════════════════ */
const LoadingScreen = ({ onComplete }) => {
const [count, setCount] = useState(0);
const [wordIndex, setWordIndex] = useState(0);
const startTime = useRef(null);
useEffect(() => {
const duration = 2700;
const tick = (ts) => {
if (!startTime.current) startTime.current = ts;
const elapsed = ts – startTime.current;
const progress = Math.min(elapsed / duration, 1);
setCount(Math.floor(progress * 100));
if (progress < 1) requestAnimationFrame(tick);
else setTimeout(onComplete, 400);
};
requestAnimationFrame(tick);
}, [onComplete]);
useEffect(() => {
const iv = setInterval(() => setWordIndex((i) => (i + 1) % LOADING_WORDS.length), 900);
return () => clearInterval(iv);
}, []);
return (
{/* Top left label */}
Portfolio
{/* Center rotating words */}
{LOADING_WORDS[wordIndex]}
{/* Bottom section */}
{/* Counter */}
{String(count).padStart(3, „0”)}
{/* Progress bar */}
);
};
/* ═══════════════════════════════════════════
SECTION 2: HERO
═══════════════════════════════════════════ */
const Hero = ({ activeNav, setActiveNav }) => {
const [roleIndex, setRoleIndex] = useState(0);
const [scrollY, setScrollY] = useState(0);
const [heroVisible, setHeroVisible] = useState(false);
useEffect(() => {
const iv = setInterval(() => setRoleIndex((i) => (i + 1) % ROLES.length), 2000);
return () => clearInterval(iv);
}, []);
useEffect(() => {
const onScroll = () => setScrollY(window.scrollY);
window.addEventListener(„scroll”, onScroll, { passive: true });
return () => window.removeEventListener(„scroll”, onScroll);
}, []);
useEffect(() => {
setTimeout(() => setHeroVisible(true), 100);
}, []);
const scrollTo = (id) => {
const el = document.getElementById(id);
if (el) el.scrollIntoView({ behavior: „smooth” });
};
return (
{/* Video background placeholder — gradient animation */}
{/* Dark overlay */}
{/* Bottom fade */}
{/* ── Navbar ── */}
100 ? „0 4px 12px rgba(0,0,0,0.2)” : „none”,
transition: „box-shadow 0.3s”,
}}>
{/* Logo */}
e.currentTarget.style.transform = „scale(1.1)”}
onMouseLeave={(e) => e.currentTarget.style.transform = „scale(1)”}
>
JA
{/* Divider */}
{/* Nav links */}
{NAV_ITEMS.map((item) => (
{ setActiveNav(item); scrollTo(item.toLowerCase()); }}
style={{
padding: „6px 16px”,
borderRadius: 9999,
fontSize: 13,
cursor: „pointer”,
border: „none”,
background: activeNav === item ? „hsl(var(–stroke) / 0.5)” : „transparent”,
color: activeNav === item ? „hsl(var(–text))” : „hsl(var(–muted))”,
transition: „all 0.2s”,
}}
onMouseEnter={(e) => { if (activeNav !== item) { e.currentTarget.style.color = „hsl(var(–text))”; e.currentTarget.style.background = „hsl(var(–stroke) / 0.3)”; }}}
onMouseLeave={(e) => { if (activeNav !== item) { e.currentTarget.style.color = „hsl(var(–muted))”; e.currentTarget.style.background = „transparent”; }}}
>
{item}
))}
{/* Divider */}
{/* Say hi */}
Say hi ↗
{/* ── Hero Content ── */}
COLLECTION ’26
Michael
A{” „}
{ROLES[roleIndex]}
{” „}
lives in Chicago.
Designing seamless digital interactions by focusing on the unique nuances which bring systems to life.
e.currentTarget.style.transform = „scale(1.05)”}
onMouseLeave={(e) => e.currentTarget.style.transform = „scale(1)”}
>
See Works
e.currentTarget.style.transform = „scale(1.05)”}
onMouseLeave={(e) => e.currentTarget.style.transform = „scale(1)”}
>
Reach out…
{/* Scroll indicator */}
);
};
/* ═══════════════════════════════════════════
SECTION 3: SELECTED WORKS
═══════════════════════════════════════════ */
const SelectedWorks = () => {
const [hoveredCard, setHoveredCard] = useState(null);
const colSpans = [„1 / span 7”, „8 / span 5”, „1 / span 5”, „6 / span 7”];
return (
{/* Bento Grid */}
{PROJECTS.map((project, i) => (
= 768 ? colSpans[i] : „1 / -1”,
aspectRatio: „4/3”,
borderRadius: 24,
border: „1px solid hsl(var(–stroke))”,
background: „hsl(var(–surface))”,
overflow: „hidden”,
position: „relative”,
cursor: „pointer”,
}}
onMouseEnter={() => setHoveredCard(i)}
onMouseLeave={() => setHoveredCard(null)}
>
{/* Image */}
{/* Hover overlay */}
View — {project.title}
))}
);
};
/* ═══════════════════════════════════════════
SECTION 4: JOURNAL
═══════════════════════════════════════════ */
const Journal = () => {
const [hoveredEntry, setHoveredEntry] = useState(null);
return (
{JOURNAL.map((entry, i) => (
setHoveredEntry(i)}
onMouseLeave={() => setHoveredEntry(null)}
>
{/* Circle image */}
{/* Title */}
{entry.title}
{/* Dotted separator (desktop) */}
{/* Meta */}
{entry.readTime}
{entry.date}
{/* Arrow */}
→
))}
);
};
/* ═══════════════════════════════════════════
SECTION 5: EXPLORATIONS (PARALLAX GALLERY)
═══════════════════════════════════════════ */
const Explorations = () => {
const [lightbox, setLightbox] = useState(null);
const sectionRef = useRef(null);
const { scrollYProgress } = useScroll({ target: sectionRef, offset: [„start end”, „end start”] });
const leftY = useTransform(scrollYProgress, [0, 1], [„5vh”, „-40vh”]);
const rightY = useTransform(scrollYProgress, [0, 1], [„15vh”, „-25vh”]);
const leftItems = EXPLORATIONS.filter((_, i) => i % 2 === 0);
const rightItems = EXPLORATIONS.filter((_, i) => i % 2 === 1);
useEffect(() => {
const onKey = (e) => { if (e.key === „Escape”) setLightbox(null); };
window.addEventListener(„keydown”, onKey);
return () => window.removeEventListener(„keydown”, onKey);
}, []);
return (
{/* Pinned center content */}
Visual playground
A space for creative experiments, motion studies, and visual explorations.
● View on Dribbble ↗
{/* Parallax columns */}
{/* Left column */}
{leftItems.map((item) => (
setLightbox(item.id – 1)} />
))}
{/* Right column */}
{rightItems.map((item) => (
setLightbox(item.id – 1)} />
))}
{/* Lightbox */}
{lightbox !== null && (
setLightbox(null)}
style={{
position: „fixed”, inset: 0, zIndex: 100,
background: „rgba(0,0,0,0.95)”,
display: „flex”, alignItems: „center”, justifyContent: „center”,
cursor: „zoom-out”, padding: 24,
}}
>
)}
);
};
const ExplorationCard = ({ item, onClick }) => {
const [hovered, setHovered] = useState(false);
const rotation = (item.id % 2 === 0 ? 1 : -1) * (1.5 + item.id % 3);
return (
setHovered(true)}
onMouseLeave={() => setHovered(false)}
onClick={onClick}
>
{/* Hover content */}
{item.title}
{item.category}
);
};
/* ═══════════════════════════════════════════
SECTION 6: STATS
═══════════════════════════════════════════ */
const Stats = () => (
{STATS.map((stat, i) => (
{stat.number}
{stat.label}
{stat.sublabel}
))}
);
/* ═══════════════════════════════════════════
SECTION 7: CONTACT / FOOTER
═══════════════════════════════════════════ */
const ContactFooter = () => {
const SOCIALS = [„Twitter”, „LinkedIn”, „Dribbble”, „GitHub”];
return (
{/* Background gradient (simulates flipped video) */}
{/* Marquee */}
{Array(10).fill(null).map((_, i) => (
BUILDING THE FUTURE •{” „}
))}
{/* CTA */}
Have a project in mind? I’m always open to new ideas and collaborations.
hello@michaelsmith.com ↗
{/* Footer bar */}
{/* Available indicator */}
);
};
/* ═══════════════════════════════════════════
MAIN APP
═══════════════════════════════════════════ */
export default function Portfolio() {
const [isLoading, setIsLoading] = useState(true);
const [activeNav, setActiveNav] = useState(„Home”);
return (
{isLoading && setIsLoading(false)} />}
{!isLoading && (
)}
);
}
{/* Halftone overlay */}
{/* Hover overlay */}
{/* Title */}
{entry.title}
{/* Dotted separator (desktop) */}
{/* Meta */}
{/* Hover content */}