Skip to content

Commit cb4de9f

Browse files
imdanieldevimdanieldev
committed
fuck website
1 parent 366c077 commit cb4de9f

1 file changed

Lines changed: 138 additions & 31 deletions

File tree

‎src/App.vue‎

Lines changed: 138 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,31 @@
11
<template>
22
<div
33
class="selection:bg-slate-900 montserrat-400 flex-col selection:text-white min-h-svh bg-transparent text-white w-full relative flex justify-center items-center">
4+
<div class="shooting-star"></div>
5+
<div class="shooting-star"></div>
6+
<div class="shooting-star"></div>
7+
<div class="shooting-star"></div>
8+
<div class="shooting-star"></div>
9+
<div class="shooting-star"></div>
10+
<div class="shooting-star"></div>
11+
<div class="shooting-star"></div>
12+
<div class="shooting-star"></div>
13+
<div class="shooting-star"></div>
14+
<div class="shooting-star"></div>
15+
<div class="shooting-star"></div>
16+
<div class="shooting-star"></div>
17+
<div class="shooting-star"></div>
18+
<div class="shooting-star"></div>
19+
<div class="shooting-star"></div>
20+
<div class="shooting-star"></div>
21+
<div class="shooting-star"></div>
22+
<div class="shooting-star"></div>
23+
<div class="shooting-star"></div>
24+
<div class="shooting-star"></div>
25+
<div class="shooting-star"></div>
426
<section
527
class="min-h-svh w-full flex flex-col bg-neutral-950 justify-center items-center px-4 py-4 relative overflow-hidden z-10">
28+
<div class="stars top-0"></div>
629
<div ref="animateBox"
730
class="relative w-full flex justify-around items-center flex-col py-10 px-3 sm:px-7 min-h-svh">
831
<h1 class="text-center text-4xl sm:text-6xl break-words montserrat-500 name">Danial Nasr</h1>
@@ -49,21 +72,18 @@
4972
</div>
5073
</div>
5174
</section>
52-
<section id="items" class="my-box-shadow min-h-svh w-full overflow-hidden relative starsbg px-2 py-4 z-10">
53-
<div class="stars"></div>
54-
<div class="shooting-star"></div>
55-
<div class="shooting-star"></div>
56-
<div class="shooting-star"></div>
57-
<div class="shooting-star"></div>
58-
<div class="shooting-star"></div>
59-
<div class="shooting-star"></div>
75+
<section id="items" class="my-box-shadow min-h-svh w-full overflow-hidden relative px-2 py-4 z-10">
76+
<div class="stars top-0"></div>
77+
<div class="stars top-1/3"></div>
78+
<div class="stars top-2/3"></div>
6079
<div class="min-h-svh w-full lg:py-0 flex justify-center items-center">
6180
<div id="panels"
6281
class="flex min-h-[600svh] lg:min-h-[300svh] justify-start px-2 py-4 items-start w-full gap-10 flex-nowrap overflow-x-hidden relative">
63-
<div class="w-full grow-0 shrink-0 basis-full flex justify-end lg:justify-between items-center panel">
82+
<div
83+
class="w-full grow-0 shrink-0 basis-full flex justify-end lg:justify-between items-center panel">
6484
<p class="text-2xl hidden lg:block">Start of plans (Scroll to see).</p>
6585
<div
66-
class="border-gradient3 relative bg-white/5 backdrop-blur-lg mt-5 gap-6 flex justify-center items-center flex-col w-full lg:w-[30vw] min-h-[60vh] lg:min-h-[50vh] py-5 px-3 sm:px-7">
86+
class="border-gradient3 relative bg-white/5 mt-5 gap-6 flex justify-center items-center flex-col w-full lg:w-[30vw] min-h-[60vh] lg:min-h-[50vh] py-5 px-3 sm:px-7">
6787
<h3 class="text-2xl montserrat-500 tracking-[0.5rem] text-center flex gap-2">
6888
<svg viewbox="0 0 32 32" class="w-8 h-8 fill-current stroke-black">
6989
<path d="M5.3 12h14v4.7H5.3z m0 7.3h14V24H5.3zM22 12H26.7v12h-4.7z"
@@ -85,7 +105,7 @@
85105
</div>
86106
<div class="w-full grow-0 shrink-0 basis-full flex justify-center items-center panel h-fit">
87107
<div
88-
class="border-gradient2 relative bg-white/5 backdrop-blur-lg mt-5 gap-6 flex justify-center items-center flex-col w-full lg:w-[30vw] min-h-[60vh] lg:min-h-[50vh] py-5 px-3 sm:px-7">
108+
class="border-gradient2 relative bg-white/5 mt-5 gap-6 flex justify-center items-center flex-col w-full lg:w-[30vw] min-h-[60vh] lg:min-h-[50vh] py-5 px-3 sm:px-7">
89109
<h3 class="text-2xl montserrat-500 tracking-[0.5rem] text-center flex gap-2">
90110
<svg viewbox="0 0 32 32" class="w-8 h-8 fill-current stroke-black">
91111
<path d="M16 20.5l-5 3.1 1.3-5.7-4.4-3.9 5.8-0.5L16 8.1l2.3 5.4 5.8 0.5-4.4 3.9 1.3 5.7z"
@@ -111,7 +131,7 @@
111131
</div>
112132
<div class="w-full grow-0 shrink-0 basis-full flex justify-between items-center panel pr-6">
113133
<div
114-
class="border-gradient1 relative bg-white/5 backdrop-blur-lg mt-5 gap-6 flex justify-center items-center flex-col w-full lg:w-[30vw] min-h-[60vh] lg:min-h-[50vh] py-5 px-3 sm:px-7">
134+
class="border-gradient1 relative bg-white/5 mt-5 gap-6 flex justify-center items-center flex-col w-full lg:w-[30vw] min-h-[60vh] lg:min-h-[50vh] py-5 px-3 sm:px-7">
115135
<h3 class="text-2xl montserrat-500 tracking-[0.5rem] text-center flex gap-2">
116136
<svg viewbox="0 0 32 32" class="w-8 h-8 fill-current stroke-black">
117137
<path d="M11.8 6.7H8.3l-2 4h3.5z m13.9 4l-2-4h-3.5l2 4zM14.7 22.2V13.3H7.3z m2.6 0L24.7 13.3H17.3zM17.2 6.7h-2.4l-2 4h6.4z"
@@ -136,7 +156,8 @@
136156
</div>
137157
</div>
138158
</section>
139-
<section class="min-h-svh w-full flex flex-col bg-neutral-950 justify-center items-center px-4 py-4">
159+
<section class="min-h-svh w-full flex flex-col bg-neutral-950 justify-center items-center px-4 py-4 relative">
160+
<div class="stars top-0"></div>
140161
<div>
141162
Coming Soon...
142163
</div>
@@ -313,7 +334,7 @@ onMounted(() => {
313334
});
314335
315336
</script>
316-
<style scoped>
337+
<style scoped lang="scss">
317338
.border-gradient1 {
318339
border: 6px solid;
319340
border-image: linear-gradient(60deg, #00fcdb, #e500ff) 1;
@@ -327,6 +348,9 @@ onMounted(() => {
327348
.border-gradient3 {
328349
border: 6px solid;
329350
border-image: linear-gradient(180deg, #00fcdb, #e500ff) 1;
351+
backdrop-filter: blur(60px);
352+
z-index: 40;
353+
position: relative;
330354
}
331355
332356
.my-box-shadow {
@@ -399,22 +423,21 @@ onMounted(() => {
399423
}
400424
401425
.starsbg {
402-
/* background: linear-gradient(to bottom, #0b0b2b, #1b2735 70%, #090a0f); */
403426
background-color: #0b0b2b;
404427
}
405428
406429
.stars {
407430
width: 1px;
408431
height: 1px;
409-
position: fixed;
410-
top: 0;
432+
position: absolute;
411433
left: 0;
412434
background: white;
413435
box-shadow: 2vw 5vh 2px white, 10vw 8vh 2px white, 15vw 15vh 1px white, 22vw 22vh 1px white, 28vw 12vh 2px white, 32vw 32vh 1px white, 38vw 18vh 2px white, 42vw 35vh 1px white, 48vw 25vh 2px white, 53vw 42vh 1px white, 58vw 15vh 2px white, 63vw 38vh 1px white, 68vw 28vh 2px white, 73vw 45vh 1px white, 78vw 32vh 2px white, 83vw 48vh 1px white, 88vw 20vh 2px white, 93vw 52vh 1px white, 98vw 35vh 2px white, 5vw 60vh 1px white, 12vw 65vh 2px white, 18vw 72vh 1px white, 25vw 78vh 2px white, 30vw 85vh 1px white, 35vw 68vh 2px white, 40vw 82vh 1px white, 45vw 92vh 2px white, 50vw 75vh 1px white, 55vw 88vh 2px white, 60vw 95vh 1px white, 65vw 72vh 2px white, 70vw 85vh 1px white, 75vw 78vh 2px white, 80vw 92vh 1px white, 85vw 82vh 2px white, 90vw 88vh 1px white, 95vw 75vh 2px white;
414-
animation: twinkle 8s infinite linear;
436+
z-index: 20;
415437
}
416438
417439
.shooting-star {
440+
z-index: 20;
418441
position: fixed;
419442
width: 30px;
420443
height: 1px;
@@ -423,31 +446,31 @@ onMounted(() => {
423446
}
424447
425448
.shooting-star:nth-child(1) {
426-
top: 5%;
449+
top: 0%;
427450
left: -100px;
428451
animation-delay: 0s;
429452
}
430453
431454
.shooting-star:nth-child(2) {
432-
top: 15%;
455+
top: 10%;
433456
left: -100px;
434457
animation-delay: 1s;
435458
}
436459
437460
.shooting-star:nth-child(3) {
438-
top: 25%;
461+
top: 20%;
439462
left: -100px;
440463
animation-delay: 2s;
441464
}
442465
443466
.shooting-star:nth-child(4) {
444-
top: 35%;
467+
top: 30%;
445468
left: -100px;
446469
animation-delay: 3.5s;
447470
}
448471
449472
.shooting-star:nth-child(5) {
450-
top: 45%;
473+
top: 40%;
451474
left: -100px;
452475
animation-delay: 4.5s;
453476
}
@@ -458,16 +481,100 @@ onMounted(() => {
458481
animation-delay: 5.5s;
459482
}
460483
461-
@keyframes twinkle {
484+
.shooting-star:nth-child(7) {
485+
top: 60%;
486+
left: -100px;
487+
animation-delay: 6.5s;
488+
}
462489
463-
0%,
464-
100% {
465-
opacity: 0.8;
466-
}
490+
.shooting-star:nth-child(8) {
491+
top: 70%;
492+
left: -100px;
493+
animation-delay: 7s;
494+
}
467495
468-
50% {
469-
opacity: 0.4;
470-
}
496+
.shooting-star:nth-child(9) {
497+
top: 80%;
498+
left: -100px;
499+
animation-delay: 8s;
500+
}
501+
502+
.shooting-star:nth-child(10) {
503+
top: 90%;
504+
left: -100px;
505+
animation-delay: 8s;
506+
}
507+
508+
.shooting-star:nth-child(11) {
509+
top: 85%;
510+
left: -100px;
511+
animation-delay: 9s;
512+
}
513+
514+
.shooting-star:nth-child(12) {
515+
top: 0%;
516+
left: -150px;
517+
animation-delay: 10s;
518+
}
519+
520+
.shooting-star:nth-child(13) {
521+
top: 10%;
522+
left: -150px;
523+
animation-delay: 11s;
524+
}
525+
526+
.shooting-star:nth-child(14) {
527+
top: 20%;
528+
left: -150px;
529+
animation-delay: 12s;
530+
}
531+
532+
.shooting-star:nth-child(15) {
533+
top: 30%;
534+
left: -150px;
535+
animation-delay: 13s;
536+
}
537+
538+
.shooting-star:nth-child(16) {
539+
top: 40%;
540+
left: -150px;
541+
animation-delay: 14s;
542+
}
543+
544+
.shooting-star:nth-child(17) {
545+
top: 50%;
546+
left: -150px;
547+
animation-delay: 15s;
548+
}
549+
550+
.shooting-star:nth-child(18) {
551+
top: 60%;
552+
left: -150px;
553+
animation-delay: 16.5s;
554+
}
555+
556+
.shooting-star:nth-child(19) {
557+
top: 70%;
558+
left: -150px;
559+
animation-delay: 17s;
560+
}
561+
562+
.shooting-star:nth-child(20) {
563+
top: 80%;
564+
left: -150px;
565+
animation-delay: 18s;
566+
}
567+
568+
.shooting-star:nth-child(21) {
569+
top: 90%;
570+
left: -200px;
571+
animation-delay: 19.5s;
572+
}
573+
574+
.shooting-star:nth-child(22) {
575+
top: 85%;
576+
left: -50px;
577+
animation-delay: 20.5s;
471578
}
472579
473580
@keyframes shoot {

0 commit comments

Comments
 (0)