Skip to content

Commit e956ab1

Browse files
CarloBuCarloBu
committed
dark-mode
1 parent 2160f8a commit e956ab1

30 files changed

+256
-65
lines changed

‎public/videos/1TRWi1OGDsE.mp4

2.52 MB
Binary file not shown.

‎public/videos/4cjP5PliBWE.mp4

385 KB
Binary file not shown.

‎public/videos/5Ny-zh5-78I.mp4

311 KB
Binary file not shown.

‎public/videos/5SnE9RTewk0.mp4

1.55 MB
Binary file not shown.

‎public/videos/8AYx3xes9N0.mp4

1.32 MB
Binary file not shown.

‎public/videos/GFpVyWX1tMA.mp4

178 KB
Binary file not shown.

‎public/videos/IYSuNOpZYrQ.mp4

347 KB
Binary file not shown.

‎public/videos/KVokeWWqjzA.mp4

640 KB
Binary file not shown.

‎public/videos/Oeo1sJ6Kqtg.mp4

436 KB
Binary file not shown.

‎public/videos/Oj_PYR5kgAM.mp4

2.47 MB
Binary file not shown.

‎public/videos/U0zeRTBXUU0.mp4

554 KB
Binary file not shown.

‎public/videos/V4c1JcTSZZo.mp4

2.1 MB
Binary file not shown.

‎public/videos/VB1U1yV3vl4.mp4

864 KB
Binary file not shown.

‎public/videos/WNeknS10U9U.mp4

2.16 MB
Binary file not shown.

‎public/videos/Z8kYDheJUVY.mp4

372 KB
Binary file not shown.

‎public/videos/a3qElcnSX_Q.mp4

156 KB
Binary file not shown.

‎public/videos/aDDp39e6LwI.mp4

302 KB
Binary file not shown.

‎public/videos/aPsWpL0umOw.mp4

235 KB
Binary file not shown.

‎public/videos/pHUUwba9u4U.mp4

1.54 MB
Binary file not shown.

‎public/videos/rI7q4BuaUeI.mp4

601 KB
Binary file not shown.

‎public/videos/rJ3XjTUEafo.mp4

262 KB
Binary file not shown.

‎public/videos/s9y3YYM4CDU.mp4

2.17 MB
Binary file not shown.

‎public/videos/xMJYxQA_310.mp4

279 KB
Binary file not shown.

‎src/components/ColorThemeToggle.astro

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
const applyTheme = () => {
2424
const darkModeSetting = localStorage.getItem('darkMode');
2525
const userPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
26-
const isDarkMode = darkModeSetting === 'enabled' || (!darkModeSetting && userPrefersDark);
26+
const isDarkMode = darkModeSetting ? darkModeSetting === 'enabled' : false; // Default to light mode
2727
document.documentElement.classList.toggle('dark', isDarkMode);
2828
const checkbox = document.querySelector('input[type="checkbox"]') as HTMLInputElement | null;
2929
if (checkbox) {
@@ -56,9 +56,8 @@
5656
<script is="inline">
5757
// Set the initial theme
5858
(() => {
59-
const userPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
6059
const darkModeSetting = localStorage.getItem('darkMode');
61-
const isDarkMode = darkModeSetting === 'enabled' || (!darkModeSetting && userPrefersDark);
60+
const isDarkMode = darkModeSetting ? darkModeSetting === 'enabled' : false; // Default to light mode
6261
document.documentElement.classList.toggle('dark', isDarkMode);
6362
document.querySelector('input[type="checkbox"]').checked = isDarkMode;
6463
})();

‎src/components/YouTubeClipsGrid.astro

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ export interface Props {
66
77
const { tutorials } = Astro.props;
88
9-
type Library = 'GSAP' | 'FRAMER' | 'JAVASCRIPT' | 'CSS' | 'default';
9+
type Library = 'GSAP' | 'FRAMER' | 'JS' | 'CSS' | 'default';
1010
1111
const colorMappings: Record<Library, { background: string; badge: string }> = {
12-
GSAP: { background: 'hover:bg-lime-100', badge: 'bg-lime-400 text-black' },
13-
FRAMER: { background: 'hover:bg-violet-100', badge: 'bg-violet-500 text-white' },
14-
JAVASCRIPT: { background: 'hover:bg-yellow-100', badge: 'bg-yellow-500 text-white' },
15-
CSS: { background: 'hover:bg-blue-100', badge: 'bg-blue-500 text-white' },
16-
default: { background: 'hover:bg-gray-100', badge: 'bg-gray-500 text-white' },
12+
GSAP: { background: 'hover:bg-lime-100', badge: 'bg-lime-400 text-text' },
13+
FRAMER: { background: 'hover:bg-violet-100', badge: 'bg-violet-500 text-text' },
14+
JS: { background: 'hover:bg-yellow-100', badge: 'bg-yellow-500 text-text' },
15+
CSS: { background: 'hover:bg-blue-100', badge: 'bg-blue-500 text-text' },
16+
default: { background: 'hover:bg-gray-100', badge: 'bg-gray-500 text-text' },
1717
};
1818
1919
function getColor(library: string, type: 'background' | 'badge') {
@@ -48,7 +48,7 @@ function getBadgeColors(library: string) {
4848
tutorials.map((tut) => {
4949
return (
5050
<div
51-
class={`hover:shadow-cardLight focus:shadow-cardLight group flex flex-col justify-between overflow-hidden rounded-base border-2 border-black bg-white transition duration-300 ease-in-out focus:outline-red-500 ${getBackgroundColors(tut.library)}`}
51+
class={`bg-lightBg group flex flex-col justify-between overflow-hidden rounded-base border-2 border-black transition duration-300 ease-in-out hover:shadow-cardLight focus:shadow-cardLight dark:bg-bg ${getBackgroundColors(tut.library)}`}
5252
>
5353
<div class="aspect-video overflow-hidden">
5454
<video
@@ -62,7 +62,7 @@ function getBadgeColors(library: string) {
6262
<div class="p-4 md:p-5">
6363
<>
6464
<div class="mb-2 flex items-center justify-between">
65-
<h3 class="line-clamp-2 text-lg font-bold text-gray-800">{tut.title}</h3>
65+
<h3 class="line-clamp-2 text-lg font-bold text-text">{tut.title}</h3>
6666
</div>
6767
<div class="mt-6 flex items-center justify-between">
6868
<div class="mr-4 inline-flex items-center gap-4">
@@ -80,7 +80,7 @@ function getBadgeColors(library: string) {
8080
href={tut.link}
8181
target="_blank"
8282
rel="noopener noreferrer"
83-
class="hover:shadow-buttonLight flex-shrink-0 rounded-base border-2 border-black bg-main px-5 py-2 transition duration-300 ease-in-out hover:bg-mainHover active:bg-mainActive"
83+
class="flex-shrink-0 rounded-base border-2 border-black bg-main px-5 py-2 transition duration-300 ease-in-out hover:bg-pink-300 hover:shadow-buttonLight active:bg-pink-500"
8484
>
8585
Watch
8686
</a>

‎src/content/tutorials/tutorials.json

Lines changed: 219 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,97 +3,281 @@
33
{
44
"src": "/videos/jldgDYGuyBA.mp4",
55
"category": ["Hero", "Slider"],
6-
"library": "GSAP",
7-
"title": "3D Image Gallery | Shooting Fire Animation | Animated Landing Page | HTML, CSS & JavaScript (+GSAP)",
6+
"channelTitle": "Codegrid",
87
"link": "https://youtu.be/jldgDYGuyBA",
9-
"channelTitle": "Codegrid"
8+
"title": "3D Image Gallery | Shooting Fire Animation | Animated Landing Page | HTML, CSS & JavaScript (+GSAP)",
9+
"library": "GSAP"
1010
},
1111
{
1212
"src": "/videos/UBzF9iZt9aI.mp4",
1313
"category": ["Scroll Animation", "Slider"],
14-
"library": "GSAP",
15-
"title": "Infinite Scroll - GSAP ScrollTrigger Animation | Responsive Image Gallery Page HTML, CSS, JavaScript",
14+
"channelTitle": "Codegrid",
1615
"link": "https://youtu.be/UBzF9iZt9aI",
17-
"channelTitle": "Codegrid"
16+
"title": "Infinite Scroll - GSAP ScrollTrigger Animation | Responsive Image Gallery Page HTML, CSS, JavaScript",
17+
"library": "GSAP"
1818
},
1919
{
2020
"src": "/videos/e3u-pC9c7m4.mp4",
2121
"category": ["Hero", "Loader"],
22-
"link": "https://youtu.be/e3u-pC9c7m4",
23-
"title": "JavaScript UI Animations | Use GSAP like a Pro",
22+
"library": "GSAP",
2423
"channelTitle": "Daniel Hult",
25-
"library": "GSAP"
24+
"title": "JavaScript UI Animations | Use GSAP like a Pro",
25+
"link": "https://youtu.be/e3u-pC9c7m4"
2626
},
2727
{
2828
"src": "/videos/mFNvQyq7otM.mp4",
2929
"category": ["Scroll Animation", "Hero"],
30-
"link": "https://youtu.be/mFNvQyq7otM",
31-
"title": "Code a Creative Agency Website from Scratch (Animations & Javascript)",
30+
"library": "JS",
3231
"channelTitle": "Daniel Hult",
33-
"library": "JAVASCRIPT"
32+
"title": "Code a Creative Agency Website from Scratch (Animations & Javascript)",
33+
"link": "https://youtu.be/mFNvQyq7otM"
3434
},
3535
{
3636
"src": "/videos/gmFRISDoaLw.mp4",
3737
"category": ["Loader"],
38-
"link": "https://youtu.be/gmFRISDoaLw",
39-
"title": "Loading Transition with Javascript (GSAP Flip Animation)",
38+
"library": "GSAP",
4039
"channelTitle": "Daniel Hult",
41-
"library": "GSAP"
40+
"title": "Loading Transition with Javascript (GSAP Flip Animation)",
41+
"link": "https://youtu.be/gmFRISDoaLw"
4242
},
4343
{
4444
"src": "/videos/laS7TrKXqG8.mp4",
4545
"category": ["Scroll Animation"],
46-
"link": "https://youtu.be/laS7TrKXqG8",
47-
"title": "Scroll Animations with JavaScript | Smooth Scrolling, GSAP ScrollTrigger & Parallax",
46+
"library": "GSAP",
4847
"channelTitle": "Daniel Hult",
49-
"library": "GSAP"
48+
"title": "Scroll Animations with JavaScript | Smooth Scrolling, GSAP ScrollTrigger & Parallax",
49+
"link": "https://youtu.be/laS7TrKXqG8"
5050
},
5151
{
5252
"src": "/videos/i_DFpKZebi8.mp4",
5353
"category": ["Loader"],
54-
"link": "https://youtu.be/i_DFpKZebi8",
55-
"title": "Smooth Intro Animation with React & GSAP | PART 1",
54+
"library": "GSAP",
5655
"channelTitle": "Daniel Hult",
57-
"library": "GSAP"
56+
"title": "Smooth Intro Animation with React & GSAP | PART 1",
57+
"link": "https://youtu.be/i_DFpKZebi8"
5858
},
5959
{
6060
"src": "/videos/RhHXKAwn5pw.mp4",
6161
"category": ["Navigation"],
62-
"link": "https://youtu.be/RhHXKAwn5pw",
63-
"title": "Page Transitions in NextJS with GSAP",
62+
"library": "GSAP",
6463
"channelTitle": "Daniel Hult",
65-
"library": "GSAP"
64+
"title": "Page Transitions in NextJS with GSAP",
65+
"link": "https://youtu.be/RhHXKAwn5pw"
6666
},
6767
{
6868
"src": "/videos/ecP8RwpkiQw.mp4",
6969
"category": ["Navigation"],
70-
"link": "https://youtu.be/ecP8RwpkiQw",
71-
"title": "Impossible FLIP Layout Animations With Svelte And GSAP",
70+
"library": "GSAP",
7271
"channelTitle": "Joy of Code",
73-
"library": "GSAP"
72+
"title": "Impossible FLIP Layout Animations With Svelte And GSAP",
73+
"link": "https://youtu.be/ecP8RwpkiQw"
7474
},
7575
{
7676
"src": "/videos/eHMZefLQc4k.mp4",
7777
"category": ["Scroll Animation"],
78-
"link": "https://youtu.be/eHMZefLQc4k",
79-
"title": "Awwwards-Winning Scroll Trigger Animations with GSAP - Awwwards Rebuild - HTML, CSS, Javascript",
78+
"library": "GSAP",
8079
"channelTitle": "We Are Digital Makers",
81-
"library": "GSAP"
80+
"title": "Awwwards-Winning Scroll Trigger Animations with GSAP - Awwwards Rebuild - HTML, CSS, Javascript",
81+
"link": "https://youtu.be/eHMZefLQc4k"
8282
},
8383
{
8484
"src": "/videos/TPF56BWiJY4.mp4",
8585
"category": ["Scroll Animation", "Slider"],
86-
"link": "https://youtu.be/TPF56BWiJY4",
87-
"title": "Image Gallery Animation On Scroll | GSAP ScrollTrigger Animation",
86+
"library": "GSAP",
8887
"channelTitle": "Codegrid",
89-
"library": "GSAP"
88+
"title": "Image Gallery Animation On Scroll | GSAP ScrollTrigger Animation",
89+
"link": "https://youtu.be/TPF56BWiJY4"
9090
},
9191
{
9292
"src": "/videos/V-kgJU-Fndk.mp4",
9393
"category": ["Scroll Animation"],
94-
"link": "https://youtu.be/V-kgJU-Fndk",
95-
"title": "Marquee Animation | Text Animation On Scroll JavaScript | HTML, CSS & GSAP",
94+
"library": "GSAP",
9695
"channelTitle": "Codegrid",
96+
"title": "Marquee Animation | Text Animation On Scroll JavaScript | HTML, CSS & GSAP",
97+
"link": "https://youtu.be/V-kgJU-Fndk"
98+
},
99+
{
100+
"src": "/videos/8AYx3xes9N0.mp4",
101+
"category": ["Loader", "Hero"],
102+
"link": "https://youtu.be/8AYx3xes9N0",
103+
"title": "Interactive Grid Thumbnail - Website Rebuild - HTML, CSS, Javascript (GSAP)",
104+
"channelTitle": "We Are Digital Makers",
105+
"library": "GSAP"
106+
},
107+
{
108+
"src": "/videos/s9y3YYM4CDU.mp4",
109+
"category": ["Scroll Animation"],
110+
"link": "https://youtu.be/s9y3YYM4CDU",
111+
"title": "Smooth Scroll Animated Progress Bar w/Lenis - Awwwards Rebuild - HTML, CSS, Javascript",
112+
"channelTitle": "We Are Digital Makers",
113+
"library": "JS"
114+
},
115+
{
116+
"src": "/videos/VB1U1yV3vl4.mp4",
117+
"category": ["Hover Effect"],
118+
"link": "https://youtu.be/VB1U1yV3vl4",
119+
"title": "Responsive 3D Card Animation - HTML, CSS, Javascript (GSAP)",
120+
"channelTitle": "We Are Digital Makers",
121+
"library": "GSAP"
122+
},
123+
{
124+
"src": "/videos/aDDp39e6LwI.mp4",
125+
"category": ["Navigation"],
126+
"link": "https://youtu.be/aDDp39e6LwI",
127+
"title": "Elevate Your Menus with SVG Animations - Awwwards Rebuild (P2) - HTML, CSS, Javascript (GSAP)",
128+
"channelTitle": "We Are Digital Makers",
129+
"library": "GSAP"
130+
},
131+
{
132+
"src": "/videos/GFpVyWX1tMA.mp4",
133+
"category": ["Loader"],
134+
"link": "https://youtu.be/GFpVyWX1tMA",
135+
"title": "Create Eye-Catching Preloader Animation - Awwwards Rebuild (P1)",
136+
"channelTitle": "We Are Digital Makers",
137+
"library": "GSAP"
138+
},
139+
{
140+
"src": "/videos/Oj_PYR5kgAM.mp4",
141+
"category": ["Hover Effect"],
142+
"link": "https://youtu.be/Oj_PYR5kgAM",
143+
"title": "Hover Smooth Trail Animation - Awwwards Rebuild - HTML, CSS, Javascript (GSAP)",
144+
"channelTitle": "We Are Digital Makers",
145+
"library": "GSAP"
146+
},
147+
{
148+
"src": "/videos/Oeo1sJ6Kqtg.mp4",
149+
"category": ["Navigation"],
150+
"link": "https://youtu.be/Oeo1sJ6Kqtg",
151+
"title": "Page Transition with Barba.js and GSAP (part3) - HTML, CSS, Javascript",
152+
"channelTitle": "We Are Digital Makers",
153+
"library": "GSAP"
154+
},
155+
{
156+
"src": "/videos/WNeknS10U9U.mp4",
157+
"category": ["Scroll Animation"],
158+
"link": "https://youtu.be/WNeknS10U9U",
159+
"title": "Scroll Clip Path Gallery and Thumbnail - Awwwards Rebuild - HTML, CSS, Javascript",
160+
"channelTitle": "We Are Digital Makers",
161+
"library": "JS"
162+
},
163+
{
164+
"src": "/videos/KVokeWWqjzA.mp4",
165+
"category": ["Loader", "Hover Effect"],
166+
"link": "https://youtu.be/KVokeWWqjzA",
167+
"title": "Page Intro and Hover Animation - Awwwards Rebuild - HTML, CSS, Javascript(GSAP)",
168+
"channelTitle": "We Are Digital Makers",
169+
"library": "GSAP"
170+
},
171+
{
172+
"src": "/videos/aPsWpL0umOw.mp4",
173+
"category": ["Slider"],
174+
"link": "https://youtu.be/aPsWpL0umOw",
175+
"title": "GSAP Slider Animation - HTML, CSS, Javascript(GSAP)",
176+
"channelTitle": "We Are Digital Makers",
177+
"library": "GSAP"
178+
},
179+
{
180+
"src": "/videos/rJ3XjTUEafo.mp4",
181+
"category": ["Hover Effect", "Hero"],
182+
"link": "https://youtu.be/rJ3XjTUEafo",
183+
"title": "Spline 3D Responsive Animated Page - HTML, CSS, Javascript (Spline.js)",
184+
"channelTitle": "We Are Digital Makers",
185+
"library": "JS"
186+
},
187+
{
188+
"src": "/videos/5SnE9RTewk0.mp4",
189+
"category": ["Slider", "Scroll Animation"],
190+
"link": "https://youtu.be/5SnE9RTewk0",
191+
"title": "Lenis Infinite Vertical Scroll - HTML, CSS, Javascript(Lenis)",
192+
"channelTitle": "We Are Digital Makers",
193+
"library": "JS"
194+
},
195+
{
196+
"src": "/videos/Z8kYDheJUVY.mp4",
197+
"category": ["Navigation"],
198+
"link": "https://youtu.be/Z8kYDheJUVY",
199+
"title": "Responsive Full Screen Menu Animation - Awwwards Rebuild - HTML, CSS, Javascript (GSAP)",
200+
"channelTitle": "We Are Digital Makers",
201+
"library": "GSAP"
202+
},
203+
{
204+
"src": "/videos/pHUUwba9u4U.mp4",
205+
"category": ["Scroll Animation", "Text Animation"],
206+
"link": "https://youtu.be/pHUUwba9u4U",
207+
"title": "Page Scroll Text Animation - Awwwards Rebuild - HTML, CSS, Javascript",
208+
"channelTitle": "We Are Digital Makers",
209+
"library": "JS"
210+
},
211+
{
212+
"src": "/videos/V4c1JcTSZZo.mp4",
213+
"category": ["Scroll Animation", "Slider"],
214+
"link": "https://youtu.be/V4c1JcTSZZo",
215+
"title": "Lenis Horizontal Smooth Scroll - HTML, CSS, Javascript (Lenis)",
216+
"channelTitle": "We Are Digital Makers",
217+
"library": "JS"
218+
},
219+
{
220+
"src": "/videos/rI7q4BuaUeI.mp4",
221+
"category": ["Navigation"],
222+
"link": "https://youtu.be/rI7q4BuaUeI",
223+
"title": "Responsive Toggle View Animation - Awwwards Rebuild - HTML, CSS, Javascript (GSAP)",
224+
"channelTitle": "We Are Digital Makers",
225+
"library": "GSAP"
226+
},
227+
{
228+
"src": "/videos/5Ny-zh5-78I.mp4",
229+
"category": ["Hover Effect"],
230+
"link": "https://youtu.be/5Ny-zh5-78I",
231+
"title": "Click to Reveal Animation - Awwwards Rebuild - HTML, CSS, Javascript (GSAP)",
232+
"channelTitle": "We Are Digital Makers",
233+
"library": "GSAP"
234+
},
235+
{
236+
"src": "/videos/U0zeRTBXUU0.mp4",
237+
"category": ["Loader", "Hero"],
238+
"link": "https://youtu.be/U0zeRTBXUU0",
239+
"title": "Smooth Website Intro Animation - HTML, CSS, Javascript (GSAP)",
240+
"channelTitle": "We Are Digital Makers",
241+
"library": "GSAP"
242+
},
243+
{
244+
"src": "/videos/1TRWi1OGDsE.mp4",
245+
"category": ["Scroll Animation"],
246+
"link": "https://youtu.be/1TRWi1OGDsE",
247+
"title": "GSAP ScrollTrigger Sticky Section - GSAP Showcase Rebuild (part2)",
248+
"channelTitle": "We Are Digital Makers",
249+
"library": "GSAP"
250+
},
251+
{
252+
"src": "/videos/IYSuNOpZYrQ.mp4",
253+
"category": ["Navigation"],
254+
"link": "https://youtu.be/IYSuNOpZYrQ",
255+
"title": "Page Transition with Barba.js and GSAP (part2) - HTML, CSS, Javascript",
256+
"channelTitle": "We Are Digital Makers",
257+
"library": "GSAP"
258+
},
259+
{
260+
"src": "/videos/4cjP5PliBWE.mp4",
261+
"category": ["Loader", "Hero"],
262+
"link": "https://youtu.be/4cjP5PliBWE",
263+
"title": "Preloader Animation and Hero Reveal - HTML, CSS, Javascript (GSAP)",
264+
"channelTitle": "We Are Digital Makers",
265+
"library": "GSAP"
266+
},
267+
{
268+
"src": "/videos/xMJYxQA_310.mp4",
269+
"category": ["Loader", "Hero"],
270+
"link": "https://youtu.be/xMJYxQA_310",
271+
"title": "Landing Page Reveal Animation - Awwwards Rebuild (part1) - HTML, CSS, GSAP and Splitting.js",
272+
"channelTitle": "We Are Digital Makers",
273+
"library": "GSAP"
274+
},
275+
{
276+
"src": "/videos/a3qElcnSX_Q.mp4",
277+
"category": ["Navigation"],
278+
"link": "https://youtu.be/a3qElcnSX_Q",
279+
"title": "Full Screen Menu Animation - Awwwards Rebuild (part2) - HTML, CSS, JS (GSAP)",
280+
"channelTitle": "We Are Digital Makers",
97281
"library": "GSAP"
98282
}
99283
]

0 commit comments

Comments
 (0)