Skip to content

Commit 9688afd

Browse files
imdanieldevimdanieldev
committed
add icon and new section
1 parent 2aee061 commit 9688afd

3 files changed

Lines changed: 74 additions & 26 deletions

File tree

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<title>Danial Nasr</title>
2626
</head>
2727

28-
<body class="overscroll-none">
28+
<body class="overscroll-none bg-neutral-950">
2929
<script type="module" src="/src/main.js"></script>
3030
</body>
3131

‎src/App.vue‎

Lines changed: 68 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<section
55
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">
66
<div ref="animateBox"
7-
class="relative w-full flex justify-around items-center flex-col py-5 px-3 sm:px-7 h-svh">
7+
class="relative w-full flex justify-around items-center flex-col py-10 px-3 sm:px-7 h-svh">
88
<h1 class="text-center text-4xl sm:text-6xl break-words montserrat-500 name">Danial Nasr</h1>
99
<p class="text-center mt-2 text-xl sm:text-2xl my-text">
1010
I am a web developer who works part time.
@@ -20,15 +20,17 @@
2020
</ul>
2121
<div
2222
class="grid justify-around grid-cols-2 w-full sm:grid-cols-5 mt-2 items-center text-lg sm:text-xl contactbtn">
23-
<a class="cursor-pointer font-medium break-words text-center mt-2 sm:mt-1 decoration-white decoration-1 decoration-solid underline transition-colors hover:text-blue-400 hover:decoration-blue-400"
24-
href="//t.me/D6NTR">Telegram</a>
23+
<a class="flex justify-center gap-2 items-center cursor-pointer font-medium break-words text-center mt-2 sm:mt-1 decoration-white decoration-1 decoration-solid underline transition-colors hover:text-blue-400 hover:decoration-blue-400"
24+
href="//t.me/D6NTR">
25+
Telegram
26+
</a>
2527
<a class="cursor-pointer font-medium break-words text-center mt-2 sm:mt-1 decoration-white decoration-1 decoration-solid underline transition-colors hover:text-blue-400 hover:decoration-blue-400"
2628
href="//instagram.com/imdanieln2008">Instagram</a>
2729
<a class="cursor-pointer mt-2 sm:mt-1 hidden sm:flex justify-center items-center animate-bounce godown"
2830
href="#">
29-
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-white" viewBox="0 0 16 16">
30-
<path fill-rule="evenodd"
31-
d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1" />
31+
<svg viewbox="0 0 32 32" class="w-8 h-8 fill-white">
32+
<path
33+
d="M26.7 16l-1.9-1.9L17.3 21.6V5.3h-2.6v16.3l-7.5-7.5L5.3 16l10.7 10.7 10.7-10.7z" />
3234
</svg>
3335
</a>
3436
<a class="cursor-pointer font-medium break-words text-center mt-2 sm:mt-1 decoration-white decoration-1 decoration-solid underline transition-colors hover:text-blue-400 hover:decoration-blue-400"
@@ -39,16 +41,16 @@
3941
<div class="block sm:hidden contactbtn2">
4042
<a class="cursor-pointer mt-2 sm:mt-1 flex animate-bounce justify-center items-center godown"
4143
href="#">
42-
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-white" viewBox="0 0 16 16">
43-
<path fill-rule="evenodd"
44-
d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1" />
44+
<svg viewbox="0 0 32 32" class="w-8 h-8 fill-white">
45+
<path
46+
d="M26.7 16l-1.9-1.9L17.3 21.6V5.3h-2.6v16.3l-7.5-7.5L5.3 16l10.7 10.7 10.7-10.7z" />
4547
</svg>
4648
</a>
4749
</div>
4850
</div>
4951
</section>
50-
<section id="items"
51-
class="my-box-shadow min-h-svh w-full overflow-hidden relative starsbg px-2 py-4 border-t-2 border-solid border-white z-10">
52+
<section id="items" ref="animateBox2"
53+
class="my-box-shadow min-h-svh w-full overflow-hidden relative starsbg px-2 py-4 z-10">
5254
<div class="stars"></div>
5355
<div class="shooting-star"></div>
5456
<div class="shooting-star"></div>
@@ -60,7 +62,15 @@
6062
<div class="flex justify-around px-2 items-center w-full gap-10 flex-col lg:flex-row">
6163
<div
6264
class="border-gradient3 relative bg-white/5 backdrop-blur-sm mt-5 gap-6 flex justify-center items-center flex-col w-full lg:w-[30vw] min-h-[40vh] lg:min-h-[50vh] py-5 px-3 sm:px-7 translate-y-0 lg:translate-y-9 transition-transform duration-700 hover:-translate-y-3 lg:hover:translate-y-6">
63-
<h3 class="text-2xl montserrat-500 tracking-[0.5rem] text-center">Basic Plan</h3>
65+
<h3 class="text-2xl montserrat-500 tracking-[0.5rem] text-center flex gap-2">
66+
<svg viewbox="0 0 32 32" class="w-8 h-8 fill-current stroke-black">
67+
<path d="M5.3 12h14v4.7H5.3z m0 7.3h14V24H5.3zM22 12H26.7v12h-4.7z"
68+
opacity=".3" />
69+
<path
70+
d="M26.7 5.3H5.3c-1.5 0-2.7 1.2-2.6 2.7L2.7 24c0 1.5 1.2 2.7 2.6 2.7h21.4c1.5 0 2.7-1.2 2.6-2.7V8c0-1.5-1.2-2.7-2.6-2.7z m-7.4 18.7H5.3v-4.7h14V24z m0-7.3H5.3V12h14v4.7zM26.7 24h-4.7V12H26.7v12z" />
71+
</svg>
72+
Basic Plan
73+
</h3>
6474
<p class="text-center">In this plan, we provide you with a static site using Vanilla JS
6575
and
6676
SCSS, which can be used
@@ -70,7 +80,15 @@
7080
</div>
7181
<div
7282
class="border-gradient2 relative bg-white/5 backdrop-blur-sm mt-5 gap-6 flex justify-center items-center flex-col w-full lg:w-[30vw] min-h-[40vh] lg:min-h-[50vh] py-5 px-3 sm:px-7 translate-y-0 transition-transform duration-700 hover:-translate-y-3">
73-
<h3 class="text-2xl montserrat-500 tracking-[0.5rem] text-center">Standard Plan</h3>
83+
<h3 class="text-2xl montserrat-500 tracking-[0.5rem] text-center flex gap-2">
84+
<svg viewbox="0 0 32 32" class="w-8 h-8 fill-current stroke-black">
85+
<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"
86+
opacity=".3" />
87+
<path
88+
d="M29.3 12.3l-9.6-0.8L16 2.7 12.3 11.5 2.7 12.3l7.2 6.3L7.8 28 16 23 24.2 28l-2.1-9.4L29.3 12.3zM16 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.7L16 20.5z" />
89+
</svg>
90+
Standard Plan
91+
</h3>
7492
<p class="text-center">In this plan, we design a site for you using WordPress and valid
7593
plugins
7694
and templates. Any type of site is possible, whether it is an introduction, a blog,
@@ -83,7 +101,15 @@
83101
</div>
84102
<div
85103
class="border-gradient1 relative bg-white/5 backdrop-blur-sm mt-5 gap-6 flex justify-center items-center flex-col w-full lg:w-[30vw] min-h-[40vh] lg:min-h-[50vh] py-5 px-3 sm:px-7 translate-y-0 lg:-translate-y-9 transition-transform duration-700 hover:-translate-y-3 lg:hover:-translate-y-12">
86-
<h3 class="text-2xl montserrat-500 tracking-[0.5rem] text-center">Essential Plan</h3>
104+
<h3 class="text-2xl montserrat-500 tracking-[0.5rem] text-center flex gap-2">
105+
<svg viewbox="0 0 32 32" class="w-8 h-8 fill-current stroke-black">
106+
<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"
107+
opacity=".3" />
108+
<path
109+
d="M25.3 4H6.7L2.7 12l13.3 16L29.3 12l-4-8z m-1.6 2.7l2 4h-3.6l-2-4h3.6zM8.3 6.7h3.6l-2 4H6.3l2-4zM14.7 22.2L7.3 13.3H14.7v8.9zM12.8 10.7l2-4h2.4l2 4H12.8zM17.3 22.2V13.3h7.4L17.3 22.2z" />
110+
</svg>
111+
Essential Plan
112+
</h3>
87113
<p class="text-center">In this plan, a site is designed for you with PHP and VueJS, and
88114
the
89115
coding is completely proprietary, and while fully respecting security, it is written
@@ -94,7 +120,12 @@
94120
</div>
95121
</div>
96122
</div>
97-
123+
</section>
124+
<section
125+
class="my-box-shadow min-h-svh w-full flex flex-col bg-neutral-950 justify-center items-center px-4 py-4 relative overflow-hidden z-10">
126+
<div>
127+
Coming Soon...
128+
</div>
98129
</section>
99130
</div>
100131
</template>
@@ -108,6 +139,7 @@ import { SplitText } from "gsap/SplitText";
108139
gsap.registerPlugin(ScrollTrigger, ScrollSmoother, ScrollToPlugin, SplitText);
109140
110141
const animateBox = ref(null);
142+
const animateBox2 = ref(null);
111143
onMounted(() => {
112144
let smoother = ScrollSmoother.create({
113145
smooth: 1,
@@ -116,14 +148,21 @@ onMounted(() => {
116148
});
117149
gsap.to(animateBox.value, {
118150
y: "100%",
119-
scale: 1.5,
120-
filter: "blur(0.2rem)",
151+
scale: 1.1,
121152
scrollTrigger: {
122153
trigger: animateBox.value,
123154
pin: true,
124155
scrub: true,
125156
}
126157
});
158+
gsap.to(animateBox2.value, {
159+
y: "100%",
160+
scrollTrigger: {
161+
trigger: animateBox2.value,
162+
pin: true,
163+
scrub: true,
164+
}
165+
});
127166
let split = new SplitText(".name", { type: "chars" });
128167
let words = new SplitText(".my-text", { type: "words" });
129168
let skill1 = new SplitText(".skills li:nth-child(1)", { type: "words" });
@@ -188,15 +227,15 @@ onMounted(() => {
188227
});
189228
gsap.from(contactbtn1.lines, {
190229
opacity: 0,
191-
x: 200,
230+
x: 100,
192231
stagger: 0.05,
193232
duration: 1,
194233
ease: "power3.Out",
195234
delay: 11
196235
});
197236
gsap.from(contactbtn2.lines, {
198237
opacity: 0,
199-
x: 300,
238+
x: 50,
200239
stagger: 0.05,
201240
duration: 1,
202241
ease: "power3.Out",
@@ -213,7 +252,7 @@ onMounted(() => {
213252
});
214253
gsap.from(contactbtn6.lines, {
215254
opacity: 0,
216-
y: 100,
255+
y: -100,
217256
scale: 2,
218257
stagger: 0.05,
219258
duration: 1,
@@ -222,15 +261,15 @@ onMounted(() => {
222261
});
223262
gsap.from(contactbtn4.lines, {
224263
opacity: 0,
225-
x: -200,
264+
x: -50,
226265
stagger: 0.05,
227266
duration: 1,
228267
ease: "power3.Out",
229268
delay: 15
230269
});
231270
gsap.from(contactbtn5.lines, {
232271
opacity: 0,
233-
x: -300,
272+
x: -100,
234273
stagger: 0.05,
235274
duration: 1,
236275
ease: "power3.Out",
@@ -241,12 +280,13 @@ onMounted(() => {
241280
event.preventDefault();
242281
243282
gsap.to(window, {
244-
duration: 3,
283+
duration: 2,
245284
scrollTo: document.querySelector("#items"),
246-
ease: "elastic.out(1,0.5)"
285+
ease: "elastic.out(1.5,0.75)"
247286
});
248287
});
249288
});
289+
ScrollTrigger.refresh();
250290
});
251291
252292
</script>
@@ -373,21 +413,25 @@ onMounted(() => {
373413
left: -100px;
374414
animation-delay: 2s;
375415
}
416+
376417
.shooting-star:nth-child(4) {
377418
top: 35%;
378419
left: -100px;
379420
animation-delay: 3.5s;
380421
}
422+
381423
.shooting-star:nth-child(5) {
382424
top: 45%;
383425
left: -100px;
384426
animation-delay: 4.5s;
385427
}
428+
386429
.shooting-star:nth-child(6) {
387430
top: 50%;
388431
left: -100px;
389432
animation-delay: 5.5s;
390433
}
434+
391435
@keyframes twinkle {
392436
393437
0%,

‎vite.config.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,9 @@ import vue from '@vitejs/plugin-vue'
44
// https://vitejs.dev/config/
55
export default defineConfig({
66
base: "/",
7-
plugins: [vue()]
7+
plugins: [vue()],
8+
server: {
9+
host: true,
10+
port: 5173
11+
}
812
})

0 commit comments

Comments
 (0)