Michael Simard
39e61fc617
Features: - Hero section with animated circuit traces and botanical SVG decorations - Pulsing circuit animations with fading comet tails connecting plant elements - Mobile-focused About section highlighting Swift and Flutter expertise - Technologies & Skills showcase with properly padded badges - Contact form with validation and EmailJS integration - Responsive design with Tailwind CSS v4 and custom sage/charcoal color palette - Smooth scroll animations and fade-in effects - Centered layout with explicit inline styles for Tailwind v4 compatibility 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
100 lines
1.7 KiB
CSS
100 lines
1.7 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
/* Custom color palette - plant aesthetic */
|
|
--color-sage-50: #f5f9f6;
|
|
--color-sage-100: #e8f3eb;
|
|
--color-sage-200: #c8e6d0;
|
|
--color-sage-300: #a4d4b4;
|
|
--color-sage-400: #7fb069;
|
|
--color-sage-500: #5a9650;
|
|
--color-sage-600: #4a7c42;
|
|
--color-sage-700: #3a6235;
|
|
--color-sage-800: #2d4d2a;
|
|
--color-sage-900: #1f3520;
|
|
|
|
/* Neutral colors */
|
|
--color-charcoal-50: #f7f8f8;
|
|
--color-charcoal-100: #e8eaeb;
|
|
--color-charcoal-200: #d1d5d8;
|
|
--color-charcoal-300: #a8b1b7;
|
|
--color-charcoal-400: #7d8a93;
|
|
--color-charcoal-500: #636e72;
|
|
--color-charcoal-600: #525c61;
|
|
--color-charcoal-700: #444d51;
|
|
--color-charcoal-800: #3a4145;
|
|
--color-charcoal-900: #2d3436;
|
|
|
|
/* Font family */
|
|
--font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;
|
|
}
|
|
|
|
/* Base styles */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-family-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
background-color: #fafafa;
|
|
color: var(--color-charcoal-900);
|
|
margin: 0 auto;
|
|
max-width: 100vw;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Scroll animations */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animate-fadeInUp {
|
|
animation: fadeInUp 0.8s ease-out forwards;
|
|
}
|
|
|
|
.animate-fadeIn {
|
|
animation: fadeIn 0.6s ease-out forwards;
|
|
}
|
|
|
|
/* Staggered animation delays */
|
|
.delay-100 {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.delay-200 {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.delay-300 {
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
.delay-400 {
|
|
animation-delay: 0.4s;
|
|
}
|