52 | ```
53 |
--------------------------------------------------------------------------------
/src/styles/global.css:
--------------------------------------------------------------------------------
1 | /* Remove all the complex mobile menu styles and keep only what's necessary */
2 | @tailwind base;
3 | @tailwind components;
4 | @tailwind utilities;
5 |
6 | @layer base {
7 | :root {
8 | font-family: "Inter", sans-serif;
9 | -webkit-font-smoothing: antialiased;
10 | -moz-osx-font-smoothing: grayscale;
11 | --theme-transition: 0.3s ease;
12 | }
13 |
14 | html {
15 | scroll-behavior: smooth;
16 | scroll-padding-top: 5rem;
17 | }
18 |
19 | body {
20 | @apply min-h-screen bg-white text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100;
21 | margin: 0;
22 | padding: 0;
23 | overflow-x: hidden;
24 | }
25 |
26 | /* Simple theme transition */
27 | body, a, button {
28 | transition: background-color var(--theme-transition),
29 | color var(--theme-transition),
30 | border-color var(--theme-transition);
31 | }
32 | }
33 |
34 | /* Minimal responsive styles */
35 | @media (max-width: 640px) {
36 | html {
37 | scroll-padding-top: 4rem;
38 | }
39 |
40 | /* Better touch targets on mobile */
41 | button, a {
42 | @apply min-h-[44px];
43 | }
44 | }
45 |
46 |
47 | /* Add smooth animations */
48 | @keyframes fadeIn {
49 | from { opacity: 0; }
50 | to { opacity: 1; }
51 | }
52 |
53 | @keyframes slideUp {
54 | from { transform: translateY(20px); opacity: 0; }
55 | to { transform: translateY(0); opacity: 1; }
56 | }
57 |
58 | @keyframes slideDown {
59 | from { transform: translateY(-20px); opacity: 0; }
60 | to { transform: translateY(0); opacity: 1; }
61 | }
62 |
63 | @keyframes scaleIn {
64 | from { transform: scale(0.95); opacity: 0; }
65 | to { transform: scale(1); opacity: 1; }
66 | }
67 |
68 | /* Apply animations to elements */
69 | .animate-fade-in {
70 | animation: fadeIn 0.6s ease forwards;
71 | }
72 |
73 | .animate-slide-up {
74 | animation: slideUp 0.6s ease forwards;
75 | }
76 |
77 | .animate-slide-down {
78 | animation: slideDown 0.6s ease forwards;
79 | }
80 |
81 | .animate-scale-in {
82 | animation: scaleIn 0.6s ease forwards;
83 | }
84 |
85 | /* Staggered animation delays */
86 | .delay-100 {
87 | animation-delay: 0.1s;
88 | }
89 |
90 | .delay-200 {
91 | animation-delay: 0.2s;
92 | }
93 |
94 | .delay-300 {
95 | animation-delay: 0.3s;
96 | }
97 |
98 | .delay-400 {
99 | animation-delay: 0.4s;
100 | }
101 |
102 | /* Smooth hover transitions */
103 | a, button {
104 | transition: all 0.2s ease;
105 | }
106 |
107 | a:hover, button:hover {
108 | transform: translateY(-1px);
109 | }
110 |
111 | /* Smooth page transitions */
112 | .page-transition {
113 | transition: opacity 0.3s ease, transform 0.3s ease;
114 | }
115 |
116 | .page-entering {
117 | opacity: 0;
118 | transform: translateY(10px);
119 | }
120 |
121 | .page-entered {
122 | opacity: 1;
123 | transform: translateY(0);
124 | }
125 |
--------------------------------------------------------------------------------
/src/components/Background.astro:
--------------------------------------------------------------------------------
1 | ---
2 | // Background.astro - Dot pattern and ambient glow background with smooth theme transitions
3 | ---
4 |
5 | 
6 | 
23 |
64 |
75 |
76 |
77 | {heroImage && (
78 | 65 | {title} 66 |
67 | 68 |
69 |
72 |
73 |
79 |
89 | )}
90 |
91 |
80 | 
86 |
87 |
88 |
92 |
94 |
95 |
96 |
97 |
101 |
102 | {updatedDate && (
103 |
98 |
100 |
104 | Last updated on
106 | )}
107 | 
71 |