Skip to content

Commit fdf2082

Browse files
devshafidevshafi
committed
feat: add cyber overlays for enhanced visual effects in hero section
1 parent 12010f3 commit fdf2082

2 files changed

Lines changed: 93 additions & 1 deletion

File tree

‎index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,8 @@
6868
<body>
6969
<div class="bg-shape shape-1" aria-hidden="true"></div>
7070
<div class="bg-shape shape-2" aria-hidden="true"></div>
71+
<div class="cyber-grid-overlay" aria-hidden="true"></div>
72+
<div class="cyber-scan-overlay" aria-hidden="true"></div>
7173

7274
<header class="site-header">
7375
<div class="header-inner">
@@ -111,6 +113,7 @@
111113

112114
<main>
113115
<section id="home" class="hero section">
116+
<div class="hero-network" aria-hidden="true"></div>
114117
<div class="hero-layout">
115118
<div>
116119
<p class="kicker">PhD Student | Cybersecurity Researcher</p>

‎styles.css‎

Lines changed: 90 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ html {
2121
body {
2222
margin: 0;
2323
min-height: 100vh;
24+
position: relative;
25+
overflow-x: hidden;
2426
font-family: "Sora", "Segoe UI", sans-serif;
2527
color: var(--text);
2628
background:
@@ -30,6 +32,46 @@ body {
3032
line-height: 1.65;
3133
}
3234

35+
.cyber-grid-overlay,
36+
.cyber-scan-overlay {
37+
position: fixed;
38+
inset: 0;
39+
pointer-events: none;
40+
}
41+
42+
.cyber-grid-overlay {
43+
z-index: 0;
44+
opacity: 0.48;
45+
mix-blend-mode: multiply;
46+
background:
47+
radial-gradient(circle at center, rgba(19, 32, 51, 0.045) 1px, transparent 1px) 0 0 / 18px 18px,
48+
linear-gradient(rgba(19, 32, 51, 0.03) 1px, transparent 1px) 0 0 / 100% 44px,
49+
linear-gradient(90deg, rgba(19, 32, 51, 0.03) 1px, transparent 1px) 0 0 / 44px 100%;
50+
}
51+
52+
.cyber-scan-overlay {
53+
z-index: 1;
54+
opacity: 0.82;
55+
background: linear-gradient(
56+
112deg,
57+
transparent 18%,
58+
rgba(37, 99, 235, 0.06) 48%,
59+
rgba(17, 159, 93, 0.05) 54%,
60+
transparent 72%
61+
);
62+
background-size: 210% 210%;
63+
animation: cyber-scan-sweep 14s ease-in-out infinite alternate;
64+
}
65+
66+
@keyframes cyber-scan-sweep {
67+
0% {
68+
background-position: 0% 50%;
69+
}
70+
100% {
71+
background-position: 100% 50%;
72+
}
73+
}
74+
3375
h1,
3476
h2,
3577
h3 {
@@ -201,6 +243,8 @@ ul {
201243
}
202244

203245
main {
246+
position: relative;
247+
z-index: 2;
204248
width: min(1120px, calc(100% - 2rem));
205249
margin: 6.4rem auto 3rem;
206250
}
@@ -218,13 +262,38 @@ section[id] {
218262
.hero {
219263
padding-top: clamp(2.4rem, 5vw, 4.2rem);
220264
padding-bottom: clamp(2rem, 5vw, 4rem);
265+
position: relative;
266+
overflow: hidden;
221267
}
222268

223269
.hero-layout {
224270
display: grid;
225271
grid-template-columns: minmax(0, 1.2fr) minmax(220px, 330px);
226272
gap: clamp(1rem, 3vw, 2.2rem);
227273
align-items: center;
274+
position: relative;
275+
z-index: 1;
276+
}
277+
278+
.hero-network {
279+
position: absolute;
280+
inset: 0;
281+
pointer-events: none;
282+
opacity: 0.56;
283+
background:
284+
radial-gradient(circle at 14% 26%, rgba(15, 118, 110, 0.22) 0 2px, transparent 3px),
285+
radial-gradient(circle at 33% 45%, rgba(17, 159, 93, 0.2) 0 2px, transparent 3px),
286+
radial-gradient(circle at 57% 30%, rgba(37, 99, 235, 0.18) 0 2px, transparent 3px),
287+
radial-gradient(circle at 74% 48%, rgba(15, 118, 110, 0.17) 0 2px, transparent 3px),
288+
linear-gradient(24deg, transparent 33%, rgba(19, 32, 51, 0.06) 34%, rgba(19, 32, 51, 0.06) 36%, transparent 37%),
289+
linear-gradient(-18deg, transparent 46%, rgba(19, 32, 51, 0.055) 47%, rgba(19, 32, 51, 0.055) 49%, transparent 50%);
290+
}
291+
292+
.hero-network::after {
293+
content: "";
294+
position: absolute;
295+
inset: 0;
296+
background: radial-gradient(circle at 18% 30%, rgba(17, 159, 93, 0.08), transparent 40%);
228297
}
229298

230299
.kicker {
@@ -516,6 +585,8 @@ article.card {
516585
}
517586

518587
.site-footer {
588+
position: relative;
589+
z-index: 2;
519590
text-align: center;
520591
padding: 0 1rem 2.1rem;
521592
color: var(--muted);
@@ -526,7 +597,7 @@ article.card {
526597
position: fixed;
527598
border-radius: 999px;
528599
pointer-events: none;
529-
z-index: -1;
600+
z-index: 0;
530601
filter: blur(38px);
531602
}
532603

@@ -666,6 +737,18 @@ article.card {
666737
margin-top: 6.3rem;
667738
}
668739

740+
.cyber-grid-overlay {
741+
opacity: 0.28;
742+
}
743+
744+
.cyber-scan-overlay {
745+
opacity: 0.66;
746+
}
747+
748+
.hero-network {
749+
opacity: 0.34;
750+
}
751+
669752
.hero-layout {
670753
grid-template-columns: 1fr;
671754
}
@@ -688,3 +771,9 @@ article.card {
688771
left: -1.36rem;
689772
}
690773
}
774+
775+
@media (prefers-reduced-motion: reduce) {
776+
.cyber-scan-overlay {
777+
animation: none;
778+
}
779+
}

0 commit comments

Comments
 (0)