Skip to content

Commit 0995b03

Browse files
rishichawdarishichawda
committed
add bits pages
Signed-off-by: rishichawda <[email protected]>
1 parent e4fb4d3 commit 0995b03

15 files changed

+1287
-24
lines changed

‎src/components/article/articles_card.astro‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
// Articles Card - Reusable navigation card
3+
interface Props {
4+
orientation?: "horizontal" | "vertical";
5+
}
6+
7+
const { orientation = "vertical" } = Astro.props;
8+
const isHorizontal = orientation === "horizontal";
9+
---
10+
11+
<a
12+
href="/articles/"
13+
class="block p-6 bg-white/70 backdrop-blur-sm rounded-3xl border border-brand-200/30 hover:shadow-xl hover:shadow-brand-500/10 transition-all duration-500 hover:-translate-y-1 hover:border-brand-300/50 group"
14+
>
15+
<div class:list={["flex", isHorizontal ? "flex-col gap-3" : "items-start gap-4"]}>
16+
<div class:list={["flex items-center", isHorizontal ? "gap-3" : "flex-col"]}>
17+
<div class:list={[
18+
"flex-shrink-0 bg-gradient-to-br from-brand-300 via-brand-400 to-brand-700 rounded-2xl flex items-center justify-center group-hover:scale-105 transition-transform duration-300",
19+
isHorizontal ? "w-8 h-8" : "w-12 h-12"
20+
]}>
21+
<svg xmlns="http://www.w3.org/2000/svg" class:list={[isHorizontal ? "h-4 w-4" : "h-6 w-6", "text-white"]} fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
22+
<path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
23+
</svg>
24+
</div>
25+
{isHorizontal && (
26+
<h3 class="text-gray-800 font-bold text-lg font-['Red_Hat_Display_Variable'] group-hover:text-brand-700 transition-colors">
27+
Articles
28+
</h3>
29+
)}
30+
</div>
31+
<div class="flex-1">
32+
{!isHorizontal && (
33+
<h3 class="text-gray-800 font-bold text-lg font-['Red_Hat_Display_Variable'] mb-2 group-hover:text-brand-700 transition-colors">
34+
Articles
35+
</h3>
36+
)}
37+
<p class="text-gray-600 text-sm font-['Montserrat_Variable'] leading-relaxed">
38+
In-depth technical articles, tutorials, and insights on web development and engineering
39+
</p>
40+
</div>
41+
</div>
42+
</a>

‎src/components/article/bits_card.astro‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
// Bits Card - Reusable navigation card
3+
interface Props {
4+
orientation?: "horizontal" | "vertical";
5+
}
6+
7+
const { orientation = "vertical" } = Astro.props;
8+
const isHorizontal = orientation === "horizontal";
9+
---
10+
11+
<a
12+
href="/bits/"
13+
class="block p-6 bg-white/70 backdrop-blur-sm rounded-3xl border border-brand-200/30 hover:shadow-xl hover:shadow-brand-500/10 transition-all duration-500 hover:-translate-y-1 hover:border-brand-300/50 group"
14+
>
15+
<div class:list={["flex", isHorizontal ? "flex-col gap-3" : "items-start gap-4"]}>
16+
<div class:list={["flex items-center", isHorizontal ? "gap-3" : "flex-col"]}>
17+
<div class:list={[
18+
"flex-shrink-0 bg-gradient-to-br from-brand-300 via-brand-400 to-brand-700 rounded-2xl flex items-center justify-center group-hover:scale-105 transition-transform duration-300",
19+
isHorizontal ? "w-8 h-8" : "w-12 h-12"
20+
]}>
21+
<svg xmlns="http://www.w3.org/2000/svg" class:list={[isHorizontal ? "h-4 w-4" : "h-6 w-6", "text-white"]} fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
22+
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
23+
</svg>
24+
</div>
25+
{isHorizontal && (
26+
<h3 class="text-gray-800 font-bold text-lg font-['Red_Hat_Display_Variable'] group-hover:text-brand-700 transition-colors">
27+
Bits
28+
</h3>
29+
)}
30+
</div>
31+
<div class="flex-1">
32+
{!isHorizontal && (
33+
<h3 class="text-gray-800 font-bold text-lg font-['Red_Hat_Display_Variable'] mb-2 group-hover:text-brand-700 transition-colors">
34+
Bits
35+
</h3>
36+
)}
37+
<p class="text-gray-600 text-sm font-['Montserrat_Variable'] leading-relaxed">
38+
Bite-sized thoughts and short insights—quick reads when you have a minute.
39+
</p>
40+
</div>
41+
</div>
42+
</a>

‎src/components/article/gallery_card.astro‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
// Gallery Card - Reusable navigation card
3+
interface Props {
4+
orientation?: "horizontal" | "vertical";
5+
}
6+
7+
const { orientation = "vertical" } = Astro.props;
8+
const isHorizontal = orientation === "horizontal";
9+
---
10+
11+
<a
12+
href="/gallery/"
13+
class="block p-6 bg-white/70 backdrop-blur-sm rounded-3xl border border-brand-200/30 hover:shadow-xl hover:shadow-brand-500/10 transition-all duration-500 hover:-translate-y-1 hover:border-brand-300/50 group"
14+
>
15+
<div class:list={["flex", isHorizontal ? "flex-col gap-3" : "items-start gap-4"]}>
16+
<div class:list={["flex items-center", isHorizontal ? "gap-3" : "flex-col"]}>
17+
<div class:list={[
18+
"flex-shrink-0 bg-gradient-to-br from-brand-300 via-brand-400 to-brand-700 rounded-2xl flex items-center justify-center group-hover:scale-105 transition-transform duration-300",
19+
isHorizontal ? "w-8 h-8" : "w-12 h-12"
20+
]}>
21+
<svg xmlns="http://www.w3.org/2000/svg" class:list={[isHorizontal ? "h-4 w-4" : "h-6 w-6", "text-white"]} fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
22+
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
23+
</svg>
24+
</div>
25+
{isHorizontal && (
26+
<h3 class="text-gray-800 font-bold text-lg font-['Red_Hat_Display_Variable'] group-hover:text-brand-700 transition-colors">
27+
Photography Gallery
28+
</h3>
29+
)}
30+
</div>
31+
<div class="flex-1">
32+
{!isHorizontal && (
33+
<h3 class="text-gray-800 font-bold text-lg font-['Red_Hat_Display_Variable'] mb-2 group-hover:text-brand-700 transition-colors">
34+
Photography Gallery
35+
</h3>
36+
)}
37+
<p class="text-gray-600 text-sm font-['Montserrat_Variable'] leading-relaxed">
38+
Explore my photography collection featuring landscapes, portraits, and street photography
39+
</p>
40+
</div>
41+
</div>
42+
</a>

‎src/components/article/global_search_card.astro‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
// Global Search Card - Reusable navigation card
3+
interface Props {
4+
orientation?: "horizontal" | "vertical";
5+
}
6+
7+
const { orientation = "vertical" } = Astro.props;
8+
const isHorizontal = orientation === "horizontal";
9+
---
10+
11+
<a
12+
href="/search/"
13+
class="block p-6 bg-gradient-to-br from-brand-500/10 via-brand-400/10 to-brand-300/10 rounded-3xl border border-brand-200/50 hover:shadow-xl hover:shadow-brand-500/10 transition-all duration-500 hover:-translate-y-1 hover:border-brand-300/50 group"
14+
>
15+
<div class:list={["flex", isHorizontal ? "flex-col gap-3" : "items-start gap-4"]}>
16+
<div class:list={["flex items-center", isHorizontal ? "gap-3" : "flex-col"]}>
17+
<div class:list={[
18+
"flex-shrink-0 bg-gradient-to-br from-brand-600 to-brand-500 rounded-2xl flex items-center justify-center group-hover:scale-105 transition-transform duration-300",
19+
isHorizontal ? "w-8 h-8" : "w-12 h-12"
20+
]}>
21+
<svg xmlns="http://www.w3.org/2000/svg" class:list={[isHorizontal ? "h-4 w-4" : "h-6 w-6", "text-white"]} fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
22+
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z" />
23+
</svg>
24+
</div>
25+
{isHorizontal && (
26+
<h3 class="text-brand-800 font-bold text-lg font-['Red_Hat_Display_Variable'] group-hover:text-brand-700 transition-colors">
27+
Global Search
28+
</h3>
29+
)}
30+
</div>
31+
<div class="flex-1">
32+
{!isHorizontal && (
33+
<h3 class="text-brand-800 font-bold text-lg font-['Red_Hat_Display_Variable'] mb-2 group-hover:text-brand-700 transition-colors">
34+
Global Search
35+
</h3>
36+
)}
37+
<p class="text-brand-600 text-sm font-['Montserrat_Variable'] leading-relaxed">
38+
Search across articles, gallery, and quotes to find exactly what you're looking for
39+
</p>
40+
</div>
41+
</div>
42+
</a>

‎src/components/article/navigation_cards.astro‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
// Navigation cards wrapper component
3+
interface Props {
4+
orientation?: "horizontal" | "vertical";
5+
}
6+
7+
const { orientation = "vertical" } = Astro.props;
8+
---
9+
10+
<div class:list={[
11+
orientation === "horizontal" ? "grid grid-cols-1 md:grid-cols-3 gap-6" : "space-y-6"
12+
]}>
13+
<slot />
14+
</div>

‎src/components/article/quotes_card.astro‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
// Quotes Card - Reusable navigation card
3+
interface Props {
4+
orientation?: "horizontal" | "vertical";
5+
}
6+
7+
const { orientation = "vertical" } = Astro.props;
8+
const isHorizontal = orientation === "horizontal";
9+
---
10+
11+
<a
12+
href="/reads/"
13+
class="block p-6 bg-white/70 backdrop-blur-sm rounded-3xl border border-brand-200/30 hover:shadow-xl hover:shadow-brand-500/10 transition-all duration-500 hover:-translate-y-1 hover:border-brand-300/50 group"
14+
>
15+
<div class:list={["flex", isHorizontal ? "flex-col gap-3" : "items-start gap-4"]}>
16+
<div class:list={["flex items-center", isHorizontal ? "gap-3" : "flex-col"]}>
17+
<div class:list={[
18+
"flex-shrink-0 bg-gradient-to-br from-brand-300 via-brand-400 to-brand-700 rounded-2xl flex items-center justify-center group-hover:scale-105 transition-transform duration-300",
19+
isHorizontal ? "w-8 h-8" : "w-12 h-12"
20+
]}>
21+
<svg xmlns="http://www.w3.org/2000/svg" class:list={[isHorizontal ? "h-4 w-4" : "h-6 w-6", "text-white"]} fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
22+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
23+
</svg>
24+
</div>
25+
{isHorizontal && (
26+
<h3 class="text-gray-800 font-bold text-lg font-['Red_Hat_Display_Variable'] group-hover:text-brand-700 transition-colors">
27+
Favourite Quotes
28+
</h3>
29+
)}
30+
</div>
31+
<div class="flex-1">
32+
{!isHorizontal && (
33+
<h3 class="text-gray-800 font-bold text-lg font-['Red_Hat_Display_Variable'] mb-2 group-hover:text-brand-700 transition-colors">
34+
Favourite Quotes
35+
</h3>
36+
)}
37+
<p class="text-gray-600 text-sm font-['Montserrat_Variable'] leading-relaxed">
38+
Discover inspiring lines from books and the internet that resonated with me
39+
</p>
40+
</div>
41+
</div>
42+
</a>

‎src/components/article/series_card.astro‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
// Series Card - Reusable navigation card
3+
interface Props {
4+
orientation?: "horizontal" | "vertical";
5+
}
6+
7+
const { orientation = "vertical" } = Astro.props;
8+
const isHorizontal = orientation === "horizontal";
9+
---
10+
11+
<a
12+
href="/articles/series/"
13+
class="block p-6 bg-gradient-to-br from-purple-50/80 via-white/80 to-purple-100/50 rounded-3xl border border-purple-200/40 hover:shadow-xl hover:shadow-purple-500/10 transition-all duration-500 hover:-translate-y-1 hover:border-purple-300/60 group"
14+
>
15+
<div class:list={["flex", isHorizontal ? "flex-col gap-3" : "items-start gap-4"]}>
16+
<div class:list={["flex items-center", isHorizontal ? "gap-3" : "flex-col"]}>
17+
<div class:list={[
18+
"flex-shrink-0 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl flex items-center justify-center group-hover:scale-105 transition-transform duration-300 shadow-lg",
19+
isHorizontal ? "w-8 h-8" : "w-12 h-12"
20+
]}>
21+
<svg xmlns="http://www.w3.org/2000/svg" class:list={[isHorizontal ? "h-4 w-4" : "h-6 w-6", "text-white"]} fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
22+
<path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
23+
</svg>
24+
</div>
25+
{isHorizontal && (
26+
<h3 class="text-purple-800 font-bold text-lg font-['Red_Hat_Display_Variable'] group-hover:text-purple-700 transition-colors">
27+
Article Series
28+
</h3>
29+
)}
30+
</div>
31+
<div class="flex-1">
32+
{!isHorizontal && (
33+
<h3 class="text-purple-800 font-bold text-lg font-['Red_Hat_Display_Variable'] mb-2 group-hover:text-purple-700 transition-colors">
34+
Article Series
35+
</h3>
36+
)}
37+
<p class="text-purple-600 text-sm font-['Montserrat_Variable'] leading-relaxed">
38+
Explore in-depth, multi-part tutorials and comprehensive guides on complex topics
39+
</p>
40+
</div>
41+
</div>
42+
</a>

‎src/components/article/tags_filter.astro‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
interface Props {
3+
tags: string[];
4+
}
5+
6+
const { tags } = Astro.props;
7+
---
8+
9+
<div class="bg-white/70 backdrop-blur-sm rounded-3xl border border-brand-200/30 p-6">
10+
<h3 class="text-gray-900 font-bold text-xl font-['Red_Hat_Display_Variable'] mb-6 flex items-center">
11+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-brand-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
12+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.99 1.99 0 013 12V7a4 4 0 014-4z" />
13+
</svg>
14+
Filter by Tags
15+
</h3>
16+
<div class="flex flex-wrap gap-2">
17+
{
18+
tags.map((tag) => (
19+
<button
20+
class="group inline-flex items-center font-['Montserrat_Variable'] px-3 py-1.5 rounded-lg text-xs font-medium bg-brand-50 text-brand-700 border border-brand-200/50 hover:bg-brand-100 hover:text-brand-800 hover:shadow-md transition-all duration-300 data-[selected=true]:bg-gradient-to-r data-[selected=true]:from-brand-600 data-[selected=true]:to-brand-500 data-[selected=true]:text-white data-[selected=true]:shadow-lg data-[selected=true]:shadow-brand-500/30 cursor-pointer"
21+
data-tag={tag}
22+
>
23+
<span>{tag}</span>
24+
<svg
25+
class="overflow-hidden w-0 group-data-[selected=true]:w-3 group-data-[selected=true]:ml-1.5 transition-all duration-300"
26+
viewBox="0 0 24 24"
27+
fill="none"
28+
stroke="currentColor"
29+
stroke-width="2"
30+
stroke-linecap="round"
31+
stroke-linejoin="round"
32+
>
33+
<line x1="18" y1="6" x2="6" y2="18" />
34+
<line x1="6" y1="6" x2="18" y2="18" />
35+
</svg>
36+
</button>
37+
))
38+
}
39+
</div>
40+
</div>

‎src/components/landing/articles_preview.astro‎

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { Image } from "astro:assets";
33
import { getCollection } from "astro:content";
44
import type { CollectionEntry } from "astro:content";
5+
import BitsPreview from "./bits_preview.astro";
56
67
const allArticles = await getCollection("articles");
78
const articles = allArticles
@@ -34,7 +35,14 @@ const articles = allArticles
3435
</p>
3536
</div>
3637

37-
<div class="relative flex flex-row items center" id="blog-carousel">
38+
<BitsPreview />
39+
40+
<div class="mb-16">
41+
<h3 class="text-xl sm:text-2xl font-medium text-gray-700 mb-6 font-['Red_Hat_Display_Variable']">
42+
In-Depth Articles
43+
</h3>
44+
45+
<div class="relative flex flex-row items center" id="blog-carousel">
3846
<button
3947
class="bg-white/80 backdrop-blur-sm max-w-fit m-auto rounded-full p-3 shadow-lg border border-brand-200/50 text-brand-600 hover:text-brand-800 hover:bg-white transition-all duration-200 sm:block"
4048
id="prev-btn"
@@ -136,6 +144,7 @@ const articles = allArticles
136144
</div>
137145
<div class="flex justify-center gap-2 mt-6 sm:mt-8" id="carousel-dots">
138146
</div>
147+
</div>
139148
</div>
140149
</section>
141150

@@ -210,13 +219,30 @@ const articles = allArticles
210219

211220
function updateDots(totalSlides: number) {
212221
if (dotsContainer) {
213-
dotsContainer.innerHTML = "";
214-
for (let i = 0; i < totalSlides; i++) {
215-
const dot = document.createElement("span");
216-
dot.className = `w-2 h-2 rounded-full ${i === currentIndex ? "bg-[#B7BEE7]" : "bg-[#B7BEE7]/40"}`;
217-
dot.setAttribute("data-index", i.toString());
218-
dotsContainer.appendChild(dot);
222+
// Only create dots if they don't exist or count has changed
223+
const existingDots = dotsContainer.querySelectorAll('button[data-index]');
224+
if (existingDots.length !== totalSlides) {
225+
dotsContainer.innerHTML = "";
226+
for (let i = 0; i < totalSlides; i++) {
227+
const dot = document.createElement("button");
228+
dot.className = `w-2.5 h-2.5 rounded-full transition-all duration-200 cursor-pointer bg-brand-200 hover:bg-brand-400`;
229+
dot.setAttribute("data-index", i.toString());
230+
dot.setAttribute("aria-label", `Go to slide ${i + 1}`);
231+
dotsContainer.appendChild(dot);
232+
}
219233
}
234+
235+
// Update dot states
236+
const dots = dotsContainer.querySelectorAll('button[data-index]');
237+
dots.forEach((dot, index) => {
238+
if (index === currentIndex) {
239+
dot.classList.add('bg-brand-600', 'w-8');
240+
dot.classList.remove('bg-brand-200', 'hover:bg-brand-400');
241+
} else {
242+
dot.classList.remove('bg-brand-600', 'w-8');
243+
dot.classList.add('bg-brand-200', 'hover:bg-brand-400');
244+
}
245+
});
220246
}
221247
}
222248

0 commit comments

Comments
 (0)