Skip to content

Commit d23264a

Browse files
author
Abd Ash
committed
Fix logos + Add loading
1 parent 854a8ec commit d23264a

3 files changed

Lines changed: 258 additions & 24 deletions

File tree

‎src/components/Loader.astro‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
---
2+
---
3+
4+
<div id="loader" class="loader">
5+
<div class="loader-content">
6+
<div class="scanner"></div>
7+
<div class="loader-logo">
8+
<img src="/logo.png" alt="Loading" width="auto" height="180" />
9+
</div>
10+
<div class="glitch-wrapper">
11+
<div class="glitch" data-text="INITIALIZING SYSTEM...">
12+
INITIALIZING SYSTEM...
13+
</div>
14+
</div>
15+
<div class="progress-bar">
16+
<div class="progress-fill"></div>
17+
</div>
18+
</div>
19+
</div>
20+
21+
<script>
22+
window.addEventListener("load", () => {
23+
const loader = document.getElementById("loader");
24+
if (loader) {
25+
setTimeout(() => {
26+
loader.classList.add("loader-hidden");
27+
setTimeout(() => {
28+
loader.style.display = "none";
29+
}, 3000); // 1.5s fade out
30+
}, 3000); // Minimum 2.5s show time
31+
}
32+
});
33+
</script>
34+
35+
<style>
36+
.loader {
37+
position: fixed;
38+
inset: 0;
39+
background: #050a10; /* Slightly darker than body */
40+
z-index: 9999;
41+
display: flex;
42+
align-items: center;
43+
justify-content: center;
44+
transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
45+
}
46+
47+
.loader-hidden {
48+
opacity: 0;
49+
visibility: hidden;
50+
pointer-events: none;
51+
}
52+
53+
.loader-content {
54+
display: flex;
55+
flex-direction: column;
56+
align-items: center;
57+
position: relative;
58+
gap: 24px;
59+
}
60+
61+
/* Scanner Effect */
62+
.scanner {
63+
position: absolute;
64+
top: -50%;
65+
left: -50%;
66+
width: 200%;
67+
height: 200%;
68+
background: radial-gradient(
69+
circle,
70+
rgba(46, 196, 182, 0.1) 0%,
71+
transparent 70%
72+
);
73+
animation: rotate 4s linear infinite;
74+
z-index: -1;
75+
pointer-events: none;
76+
}
77+
78+
@keyframes rotate {
79+
from {
80+
transform: rotate(0deg);
81+
}
82+
to {
83+
transform: rotate(360deg);
84+
}
85+
}
86+
87+
/* Glitch Text */
88+
.glitch-wrapper {
89+
position: relative;
90+
overflow: hidden;
91+
}
92+
93+
.glitch {
94+
font-family: "JetBrains Mono", monospace;
95+
font-size: 1rem;
96+
font-weight: 700;
97+
color: var(--teal);
98+
letter-spacing: 0.1em;
99+
position: relative;
100+
}
101+
102+
.glitch::before,
103+
.glitch::after {
104+
content: attr(data-text);
105+
position: absolute;
106+
top: 0;
107+
left: 0;
108+
width: 100%;
109+
height: 100%;
110+
background: #050a10;
111+
}
112+
113+
.glitch::before {
114+
left: 2px;
115+
text-shadow: -1px 0 #ff00c1;
116+
clip: rect(44px, 450px, 56px, 0);
117+
animation: glitch-anim 5s infinite linear alternate-reverse;
118+
}
119+
120+
.glitch::after {
121+
left: -2px;
122+
text-shadow: -1px 0 #00fff9;
123+
clip: rect(44px, 450px, 56px, 0);
124+
animation: glitch-anim2 5s infinite linear alternate-reverse;
125+
}
126+
127+
@keyframes glitch-anim {
128+
0% {
129+
clip: rect(32px, 9999px, 11px, 0);
130+
}
131+
20% {
132+
clip: rect(68px, 9999px, 89px, 0);
133+
}
134+
40% {
135+
clip: rect(15px, 9999px, 96px, 0);
136+
}
137+
60% {
138+
clip: rect(83px, 9999px, 2px, 0);
139+
}
140+
80% {
141+
clip: rect(4px, 9999px, 60px, 0);
142+
}
143+
100% {
144+
clip: rect(55px, 9999px, 36px, 0);
145+
}
146+
}
147+
148+
@keyframes glitch-anim2 {
149+
0% {
150+
clip: rect(65px, 9999px, 99px, 0);
151+
}
152+
20% {
153+
clip: rect(12px, 9999px, 3px, 0);
154+
}
155+
40% {
156+
clip: rect(88px, 9999px, 45px, 0);
157+
}
158+
60% {
159+
clip: rect(2px, 9999px, 76px, 0);
160+
}
161+
80% {
162+
clip: rect(34px, 9999px, 18px, 0);
163+
}
164+
100% {
165+
clip: rect(91px, 9999px, 52px, 0);
166+
}
167+
}
168+
169+
/* Progress Bar */
170+
.progress-bar {
171+
width: 200px;
172+
height: 2px;
173+
background: rgba(46, 196, 182, 0.2);
174+
border-radius: 2px;
175+
overflow: hidden;
176+
position: relative;
177+
}
178+
179+
.progress-fill {
180+
position: absolute;
181+
top: 0;
182+
left: 0;
183+
height: 100%;
184+
width: 0%;
185+
background: var(--teal);
186+
box-shadow: 0 0 10px var(--teal);
187+
animation: load 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
188+
}
189+
190+
@keyframes load {
191+
0% {
192+
width: 0%;
193+
}
194+
50% {
195+
width: 70%;
196+
}
197+
100% {
198+
width: 100%;
199+
}
200+
}
201+
202+
.loader-logo img {
203+
animation: pulse 2s ease-in-out infinite;
204+
filter: drop-shadow(0 0 15px rgba(46, 196, 182, 0.4));
205+
}
206+
207+
@keyframes pulse {
208+
0%,
209+
100% {
210+
opacity: 0.8;
211+
transform: scale(0.98);
212+
}
213+
50% {
214+
opacity: 1;
215+
transform: scale(1.02);
216+
}
217+
}
218+
</style>

‎src/layouts/MainLayout.astro‎

Lines changed: 39 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,29 @@
11
---
2-
import '../styles/global.css';
2+
import "../styles/global.css";
3+
import Loader from "../components/Loader.astro";
34
45
interface Props {
56
title?: string;
67
description?: string;
78
}
89
910
const {
10-
title = 'Abdulrahman Mahmutoglu — Senior Frontend & AI Engineer | abdash',
11-
description = 'Senior Frontend & AI Engineer specializing in Vue, React, Svelte, and Astro. Building scalable web architectures and AI-driven systems.',
11+
title = "Abdulrahman Mahmutoglu — Senior Frontend & AI Engineer | abdash",
12+
description = "Senior Frontend & AI Engineer specializing in Vue, React, Svelte, and Astro. Building scalable web architectures and AI-driven systems.",
1213
} = Astro.props;
1314
---
1415

15-
<!doctype html>
16+
<!DOCTYPE html>
1617
<html lang="en">
1718
<head>
1819
<meta charset="UTF-8" />
1920
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
2021
<meta name="description" content={description} />
2122
<meta name="author" content="Abdulrahman Mahmutoglu" />
22-
<meta name="keywords" content="abdash, Abdulrahman Mahmutoglu, frontend engineer, senior software engineer, Vue, React, Svelte, Astro, portfolio" />
23+
<meta
24+
name="keywords"
25+
content="abdash, Abdulrahman Mahmutoglu, frontend engineer, senior software engineer, Vue, React, Svelte, Astro, portfolio"
26+
/>
2327

2428
<!-- Open Graph -->
2529
<meta property="og:type" content="website" />
@@ -39,33 +43,45 @@ const {
3943
<!-- Fonts -->
4044
<link rel="preconnect" href="https://fonts.googleapis.com" />
4145
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
42-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
46+
<link
47+
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
48+
rel="stylesheet"
49+
/>
4350

4451
<!-- Favicon -->
4552
<link rel="icon" type="image/png" href="/favicon.png" />
4653

4754
<title>{title}</title>
4855

4956
<!-- JSON-LD Structured Data -->
50-
<script type="application/ld+json" set:html={JSON.stringify({
51-
"@context": "https://schema.org",
52-
"@type": "Person",
53-
"name": "Abdulrahman Mahmutoglu",
54-
"alternateName": "abdash",
55-
"url": "https://abdash.net",
56-
"jobTitle": "Senior Frontend & AI Engineer",
57-
"worksFor": {
58-
"@type": "Organization",
59-
"name": "Cybernetic Labs"
60-
},
61-
"sameAs": [
62-
"https://github.com/AbdAsh",
63-
"https://linkedin.com/in/abdash"
64-
],
65-
"knowsAbout": ["Frontend Development", "Vue.js", "React", "Svelte", "Astro", "AI/ML", "n8n"]
66-
})} />
57+
<script
58+
type="application/ld+json"
59+
set:html={JSON.stringify({
60+
"@context": "https://schema.org",
61+
"@type": "Person",
62+
name: "Abdulrahman Mahmutoglu",
63+
alternateName: "abdash",
64+
url: "https://abdash.net",
65+
jobTitle: "Senior Frontend & AI Engineer",
66+
worksFor: {
67+
"@type": "Organization",
68+
name: "Cybernetic Labs",
69+
},
70+
sameAs: ["https://github.com/AbdAsh", "https://linkedin.com/in/abdash"],
71+
knowsAbout: [
72+
"Frontend Development",
73+
"Vue.js",
74+
"React",
75+
"Svelte",
76+
"Astro",
77+
"AI/ML",
78+
"n8n",
79+
],
80+
})}
81+
></script>
6782
</head>
6883
<body>
84+
<Loader />
6985
<slot />
7086
</body>
7187
</html>

‎src/pages/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import "../styles/experience.css";
1616
<img
1717
src="/logo.png"
1818
alt="AbdAsh Logo"
19-
width="72"
19+
width="auto"
2020
height="72"
2121
class="profile-logo"
2222
/>

0 commit comments

Comments
 (0)