Skip to content

Commit 5e85dd3

Browse files
iamabdullah73524iamabdullah73524
committed
resolve mobile view issues and increase performance of webiste
1 parent de214b1 commit 5e85dd3

12 files changed

Lines changed: 48 additions & 43 deletions

File tree

‎public/assets/images/blog/AstroRouting.webp‎

2.27 MB
Loading

‎public/assets/images/blog/StyelGuide.webp‎

2.09 MB
Loading

‎public/assets/images/blog/TechStack.webp‎

2.44 MB
Loading

‎public/assets/images/blog/TheNewEra.webp‎

2.35 MB
Loading

‎public/numpad/app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ if (typeof document !== "undefined") {
55
const input = document.getElementById("input");
66
const addBtn = document.getElementById("addBtn");
77
const timeline = document.getElementById("timeline");
8-
const themeBtn = document.getElementById("themeBtn");
8+
// const themeBtn = document.getElementById("themeBtn");
99

1010
addBtn?.addEventListener("click", () => {
1111
const rawValue = input.value;

‎src/assets/styles/globals.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
height: 100%;
3232
scroll-behavior: smooth;
3333
font-family: system-ui, sans-serif;
34+
scrollbar-gutter: stable;
3435
}
3536

3637
*,

‎src/components/Header.astro‎

Lines changed: 41 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ const navLinks = [
1111
{ name: "About", href: "/about", isActive: true },
1212
{ name: "Blogs", href: "/blogs", isActive: true },
1313
{ name: "Career", href: "/career", isActive: true },
14-
{ name: "Work", href: "/work", isActive: true },
15-
14+
{ name: "Work", href: "/work", isActive: true }
1615
];
1716
1817
const isCurrentPage = (path: string) => {
@@ -27,19 +26,18 @@ const isCurrentPage = (path: string) => {
2726
}
2827
</style>
2928
<header class="sticky top-0 z-50 w-full border-b border-black/20 bg-white dark:border-white/20 dark:bg-[#050B1C]">
30-
<header class="bg-background sticky top-0 z-50 w-full border-b border-black/20 dark:border-white/20">
31-
<!-- DESKTOP -->
29+
<div class="bg-background">
3230
<div class="mx-auto hidden h-24 items-center justify-between px-4 sm:px-6 lg:flex lg:px-10">
3331
<!-- Logo -->
3432
<a href="/" class="flex items-center gap-3">
3533
<Picture
3634
src={logoImage}
3735
formats={["png", "webp", "jpg"]}
3836
alt="Recursive Zero"
39-
class="h-12 w-12 rounded-full object-contain dark:brightness-200 dark:invert"
37+
class="h-10 w-10 rounded-full object-contain dark:brightness-200 dark:invert"
4038
/>
4139

42-
<span class="brand text-foreground text-3xl font-extrabold"> RECURSIVE ZERO </span>
40+
<span class="brand text-foreground text-xl font-bold"> RECURSIVE ZERO </span>
4341
</a>
4442

4543
<!-- Desktop Nav -->
@@ -110,16 +108,16 @@ const isCurrentPage = (path: string) => {
110108
<!-- Fullscreen Mobile Menu -->
111109
<div id="mobileMenu" class="fixed inset-0 z-[9999] hidden bg-white dark:bg-[#050B1C]">
112110
<!-- Header -->
113-
<div class="flex items-center justify-between border-b border-black/10 px-5 py-5 dark:border-white/10">
111+
<div class="flex h-20 items-center justify-between border-b border-black/10 px-5 dark:border-white/10">
114112
<div class="flex items-center gap-3">
115113
<Picture
116114
src={logoImage}
117115
formats={["png", "webp", "jpg"]}
118116
alt="Recursive Zero"
119-
class="h-12 w-12 rounded-full object-contain dark:brightness-200 dark:invert"
117+
class="h-10 w-10 rounded-full object-contain dark:brightness-200 dark:invert"
120118
/>
121119

122-
<span class="brand text-foreground text-2xl font-bold"> RECURSIVE ZERO </span>
120+
<span class="brand text-foreground text-xl font-bold"> RECURSIVE ZERO </span>
123121
</div>
124122

125123
<div class="flex items-center gap-3">
@@ -158,37 +156,44 @@ const isCurrentPage = (path: string) => {
158156
}
159157

160158
<li class="pt-8">
161-
class="bg-foreground text-background rounded-2xl border border-black px-6 py-3 text-lg font-semibold transition hover:border-transparent hover:bg-cyan-500 dark:border-white"
159+
<a
160+
href="/career"
161+
class="bg-foreground text-background inline-flex rounded-xl border border-black px-6 py-3 text-lg font-semibold transition hover:border-transparent hover:bg-cyan-500 dark:border-white"
162+
>
163+
Join Us
164+
</a>
162165
</li>
163166
</ul>
164167
</nav>
165168
</div>
166169
</div>
167-
</header>
168-
169-
<script is:inline>
170-
function initMobileMenu() {
171-
const openBtn = document.getElementById("mobileMenuBtn");
172-
173-
const closeBtn = document.getElementById("closeMenuBtn");
174-
175-
const menu = document.getElementById("mobileMenu");
176-
177-
if (!openBtn || !closeBtn || !menu) return;
178-
179-
openBtn.addEventListener("click", () => {
180-
menu.classList.remove("hidden");
181-
document.body.style.overflow = "hidden";
182-
});
183-
184-
closeBtn.addEventListener("click", () => {
185-
menu.classList.add("hidden");
186-
document.body.style.overflow = "auto";
187-
});
188-
}
189-
190-
initMobileMenu();
170+
</div>
171+
<script is:inline>
172+
function initMobileMenu() {
173+
const openBtn = document.getElementById("mobileMenuBtn");
174+
const closeBtn = document.getElementById("closeMenuBtn");
175+
const menu = document.getElementById("mobileMenu");
176+
177+
if (!openBtn || !closeBtn || !menu) return;
178+
179+
openBtn.addEventListener("click", () => {
180+
menu.classList.remove("hidden");
181+
182+
document.body.style.overflow = "hidden";
183+
document.body.style.position = "fixed";
184+
document.body.style.width = "100%";
185+
});
186+
187+
closeBtn.addEventListener("click", () => {
188+
menu.classList.add("hidden");
189+
190+
document.body.style.overflow = "";
191+
document.body.style.position = "";
192+
document.body.style.width = "";
193+
});
194+
}
191195

192-
document.addEventListener("astro:page-load", initMobileMenu);
193-
</script>
196+
initMobileMenu();
197+
document.addEventListener("astro:page-load", initMobileMenu);
198+
</script>
194199
</header>

‎src/content/blog/routing-astro.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: "How routing works in Astro ?"
33
description: "The full guide on routing in astro framework . The easy and simple guide to understand and implement routing "
44
date: 2024-12-12
5-
image: "https://images.unsplash.com/photo-1556075798-4825dfaaf498"
5+
image: "/assets/images/blog/AstroRouting.webp"
66

77
tags:
88
- astro

‎src/content/blog/state-management.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: "The new era of state management with Zustand ?"
33
description: "The simple and easy to understand all about Zustand the new and simple way to manage the state in client side. "
44
date: 2024-12-12
5-
image: "https://images.unsplash.com/photo-1555066931-4365d14bab8c"
5+
image: "/assets/images/blog/TheNewEra.webp"
66

77
tags:
88
- react

‎src/content/blog/style-guide.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
title: "The style guide the must know to start the code"
33
description: "The full guid on file structure , css naming convention , tailwind usage and , css classes naming convention . "
44
date: 2024-12-26
5-
image: "https://images.unsplash.com/photo-1461749280684-dccba630e2f6"
6-
5+
image: "/assets/images/blog/StyelGuide.webp"
76
tags:
87
- css
98
- tailwind

0 commit comments

Comments
 (0)