mguilbert
87efea3cc1
- HeroSection: full-viewport split layout with staggered entrance animations, editorial typography, tech stack tags, animated scroll indicator - WorksSection: refined header with section label, scroll-reveal on entry - ProjectCard: per-card IntersectionObserver reveal, numbered projects, enhanced hover states (scale + brightness), improved CTA - FeatureSection: card grid with border/glass treatment and staggered reveals - AboutSection: animated timeline progress line, scroll-triggered card entrances - FeatureColumn: icon container with hover treatment - globals.css: fadeUp/lineGrow/arrowBounce keyframes, .reveal utility, prefers-reduced-motion support, brand-accent color token - lib/useReveal.ts: IntersectionObserver hook for scroll reveals Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
87 lines
1.4 KiB
CSS
87 lines
1.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-brand-brown: #2C1E16;
|
|
--color-brand-beige: #F5F4F0;
|
|
--color-brand-accent: #8B7355;
|
|
|
|
--font-sans: var(--font-inter);
|
|
--font-serif: var(--font-playfair);
|
|
}
|
|
|
|
@keyframes fadeUp {
|
|
from { opacity: 0; transform: translateY(28px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes lineGrow {
|
|
from { width: 0%; }
|
|
to { width: 95%; }
|
|
}
|
|
|
|
@keyframes arrowBounce {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(6px); }
|
|
}
|
|
|
|
@keyframes underlineSlide {
|
|
from { transform: scaleX(0); }
|
|
to { transform: scaleX(1); }
|
|
}
|
|
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(28px);
|
|
transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
|
|
.reveal.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.reveal {
|
|
opacity: 1;
|
|
transform: none;
|
|
transition: none;
|
|
}
|
|
.animate-arrow-bounce {
|
|
animation: none !important;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--background: #ffffff;
|
|
--foreground: #171717;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0px;
|
|
background: transparent;
|
|
}
|
|
|
|
* {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
} |