Skip to content

Commit 4ab2269

Browse files
iamabdullah73524iamabdullah73524
committed
extract reusable UI components
1 parent b38198c commit 4ab2269

14 files changed

Lines changed: 199 additions & 175 deletions

File tree

public/screenshots/lightmode/Screenshot 2026-06-12 015202.png renamed to public/screenshots/lightmode/About.png

File renamed without changes.

public/screenshots/lightmode/Screenshot 2026-06-12 015210.png renamed to public/screenshots/lightmode/Blogs.png

File renamed without changes.

public/screenshots/lightmode/Screenshot 2026-06-12 015219.png renamed to public/screenshots/lightmode/Career.png

File renamed without changes.

public/screenshots/lightmode/Screenshot 2026-06-12 015142.png renamed to public/screenshots/lightmode/Home.png

File renamed without changes.

public/screenshots/lightmode/Screenshot 2026-06-12 015236.png renamed to public/screenshots/lightmode/work.png

File renamed without changes.

‎src/components/Footer.astro‎

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import MailIcon from "@/assets/icons/mail.svg";
44
import TwitterIcon from "@/assets/icons/x.svg";
55
import quickLinks from "@/data/footer-links.json";
66
import partners from "@/data/footer-partners.json";
7+
import FooterLink from "@/components/FooterLink.astro";
8+
import PartnerLogo from "@/components/PartnerLogo.astro";
79
810
import awsLogo from "@/assets/images/aws.webp";
911
import cloudflareLogo from "@/assets/images/cloudflare.svg";
@@ -41,17 +43,7 @@ const logoMap: Record<string, any> = {
4143
<h4 class="text-foreground mb-6 text-xl font-bold">Quick Links</h4>
4244

4345
<ul class="text-foreground/70 grid grid-cols-2 gap-x-10 gap-y-4">
44-
{
45-
quickLinks
46-
.filter(({ isActive }) => isActive)
47-
.map((link) => (
48-
<li>
49-
<a href={link.href} class="transition hover:text-blue-600">
50-
{link.label}
51-
</a>
52-
</li>
53-
))
54-
}
46+
{quickLinks.filter(({ isActive }) => isActive).map((link) => <FooterLink link={link} />)}
5547
</ul>
5648
</div>
5749

@@ -127,19 +119,7 @@ const logoMap: Record<string, any> = {
127119
{
128120
partners
129121
.filter(({ isActive }) => isActive)
130-
.map((partner) => (
131-
<a href={partner.href} target="_blank" rel="noopener noreferrer">
132-
<img
133-
src={logoMap[partner.logo]?.src}
134-
alt={partner.name}
135-
width="120"
136-
height="32"
137-
loading="lazy"
138-
decoding="async"
139-
class="h-8 w-auto object-contain"
140-
/>
141-
</a>
142-
))
122+
.map((partner) => <PartnerLogo partner={partner} logoSrc={logoMap[partner.logo]?.src} />)
143123
}
144124
</div>
145125
</div>

‎src/components/FooterLink.astro‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
interface Props {
3+
link: {
4+
label: string;
5+
href: string;
6+
};
7+
}
8+
9+
const { link } = Astro.props;
10+
---
11+
12+
<li>
13+
<a href={link.href} class="transition hover:text-blue-600">
14+
{link.label}
15+
</a>
16+
</li>

‎src/components/FounderCard.astro‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
interface Props {
3+
founder: {
4+
name: string;
5+
designation: string;
6+
location: string;
7+
initials: string;
8+
description: string;
9+
tags: string[];
10+
email: string | null;
11+
linkedin: string | null;
12+
isActive: boolean;
13+
};
14+
}
15+
16+
const { founder } = Astro.props;
17+
---
18+
19+
<div
20+
class="border-foreground/10 bg-background dark:bg-foreground/[0.03] group relative overflow-hidden rounded-[2rem] border p-8 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
21+
>
22+
<!-- Glow -->
23+
<div class="absolute -right-10 -top-10 h-64 w-64 rounded-full bg-brandBlue/10 blur-[100px]"></div>
24+
25+
<div class="relative z-10">
26+
<div class="flex items-center gap-5">
27+
<div
28+
class="flex h-16 w-16 items-center justify-center rounded-[2rem] bg-brandBlue/10 text-4xl font-bold text-brandBlue"
29+
>
30+
{
31+
founder.name
32+
.split(" ")
33+
.map((word: string) => word.charAt(0))
34+
.slice(0, 2)
35+
.join("")
36+
}
37+
</div>
38+
39+
<div>
40+
<h2 class="text-foreground text-3xl font-bold">
41+
{founder.name}
42+
</h2>
43+
44+
<p class="mt-1 font-medium text-brandBlue">
45+
{founder.designation}
46+
</p>
47+
</div>
48+
</div>
49+
50+
<p class="text-foreground/70 mt-6 leading-8">
51+
{founder.description}
52+
</p>
53+
</div>
54+
</div>

‎src/components/Header.astro‎

Lines changed: 29 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import "../assets/styles/custom-font.css";
44
import ThemeToggle from "@/components/ThemeToggle.astro";
55
import logoImage from "@/assets/images/logo.png";
66
import navLinks from "@/data/navLinks.json";
7+
import NavItem from "@/components/NavItem.astro";
78
89
const currentPath = Astro.url.pathname;
910
@@ -16,6 +17,26 @@ const isCurrentPage = (path: string) => {
1617
<style>
1718
.brand {
1819
font-family: Boisu, sans-serif;
20+
font-size: 1.5rem;
21+
white-space: nowrap;
22+
}
23+
24+
@media (max-width: 480px) {
25+
.brand {
26+
font-size: 0.85rem;
27+
}
28+
}
29+
30+
@media (min-width: 1280px) {
31+
.brand {
32+
font-size: 2rem;
33+
}
34+
}
35+
36+
@media (min-width: 1536px) {
37+
.brand {
38+
font-size: 2.5rem;
39+
}
1940
}
2041
</style>
2142
<header class="sticky top-0 z-50 w-full border-b border-black/20 bg-white dark:border-white/20 dark:bg-[#050B1C]">
@@ -29,30 +50,16 @@ const isCurrentPage = (path: string) => {
2950
alt="Recursive Zero"
3051
class="h-10 w-10 rounded-full object-contain dark:brightness-200 dark:invert"
3152
/>
32-
<span class="brand text-foreground text-3xl xl:text-4xl 2xl:text-5xl font-bold">
33-
RECURSIVE ZERO
34-
</span>
53+
<span class="brand text-foreground font-bold"> RECURSIVE ZERO </span>
3554
</a>
3655

3756
<!-- Desktop Nav -->
38-
<nav class="absolute left-[55%] -translate-x-1/2">
57+
<nav class="absolute left-[55%] -translate-x-1/2">
3958
<ul class="flex items-center gap-10">
4059
{
4160
navLinks
4261
.filter(({ isActive }) => isActive)
43-
.map((item) => (
44-
<li>
45-
<a
46-
href={item.href}
47-
class:list={[
48-
"text-lg font-semibold transition hover:text-blue-600",
49-
isCurrentPage(item.href) ? "text-blue-600 underline underline-offset-8" : "text-foreground"
50-
]}
51-
>
52-
{item.name}
53-
</a>
54-
</li>
55-
))
62+
.map((item) => <NavItem item={item} active={isCurrentPage(item.href)} />)
5663
}
5764
</ul>
5865
</nav>
@@ -73,16 +80,16 @@ const isCurrentPage = (path: string) => {
7380
<!-- MOBILE -->
7481
<div class="lg:hidden">
7582
<!-- Top Bar -->
76-
<div class="flex h-20 items-center justify-between px-5">
77-
<a href="/" class="flex items-center gap-3">
83+
<div class="flex h-20 items-center justify-between gap-2 px-4">
84+
<a href="/" class="flex min-w-0 items-center gap-2">
7885
<Picture
7986
src={logoImage}
8087
formats={["png", "webp", "jpg"]}
8188
alt="Recursive Zero"
8289
class="h-10 w-10 rounded-full object-contain dark:brightness-200 dark:invert"
8390
/>
8491

85-
<span class="brand text-foreground text-xl font-bold"> RECURSIVE ZERO </span>
92+
<span class="brand text-foreground truncate font-bold"> RECURSIVE ZERO </span>
8693
</a>
8794

8895
<div class="flex items-center gap-3">
@@ -108,7 +115,7 @@ const isCurrentPage = (path: string) => {
108115
src={logoImage}
109116
formats={["png", "webp", "jpg"]}
110117
alt="Recursive Zero"
111-
class="h-10 w-10 rounded-full object-contain dark:brightness-200 dark:invert"
118+
class="h-10 w-10 shrink-0 rounded-full object-contain dark:brightness-200 dark:invert"
112119
/>
113120

114121
<span class="brand text-foreground text-xl font-bold"> RECURSIVE ZERO </span>
@@ -134,19 +141,7 @@ const isCurrentPage = (path: string) => {
134141
{
135142
navLinks
136143
.filter(({ isActive }) => isActive)
137-
.map((item) => (
138-
<li>
139-
<a
140-
href={item.href}
141-
class:list={[
142-
"block text-4xl font-bold transition",
143-
isCurrentPage(item.href) ? "text-blue-600" : "text-foreground"
144-
]}
145-
>
146-
{item.name}
147-
</a>
148-
</li>
149-
))
144+
.map((item) => <NavItem item={item} active={isCurrentPage(item.href)} mobile={true} />)
150145
}
151146

152147
<li class="pt-8">

‎src/components/JobTile.astro‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
interface Props {
3+
job: {
4+
title: string;
5+
description: string;
6+
location: string;
7+
type: string;
8+
isActive?: boolean;
9+
};
10+
}
11+
12+
const { job } = Astro.props;
13+
---
14+
15+
<div class="dark:border-foreground/10 bg-background/60 rounded-3xl border-2 border-gray-300 p-8 shadow-sm backdrop-blur-md">
16+
<h3 class="text-foreground text-2xl font-bold">
17+
{job.title}
18+
</h3>
19+
20+
<p class="text-foreground/70 mt-4 leading-8">
21+
{job.description}
22+
</p>
23+
24+
<div class="mt-6 flex flex-wrap gap-3">
25+
<span class="rounded-full bg-brandBlue px-4 py-2 text-sm font-medium text-white">
26+
{job.location}
27+
</span>
28+
29+
<span class="text-foreground rounded-full bg-brandBlue/10 px-4 py-2 text-sm font-medium">
30+
{job.type}
31+
</span>
32+
</div>
33+
</div>

0 commit comments

Comments
 (0)