Skip to content

Commit 8e4740a

Browse files
imdanieldevimdanieldev
committed
...
1 parent b732a7e commit 8e4740a

File tree

1 file changed

+53
-58
lines changed

1 file changed

+53
-58
lines changed

‎src/App.vue

Lines changed: 53 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
<div class="flex flex-col items-center sm:items-start gap-2 sm:gap-5">
1010
<div class="flex flex-col justify-center items-center sm:items-start gap-1 sm:gap-5">
1111
<span class="text-2xl sm:text-3xl text-gray-300/60">Hi I'm </span>
12-
1312
<h1
1413
class="name gradient-text select-none cursor-text uppercase text-center text-4xl sm:text-6xl break-words montserrat-500">
1514
Danial Nasr
@@ -113,7 +112,7 @@
113112
</section>
114113
<section id="items"
115114
class="my-box-shadow min-h-svh w-full overflow-hidden relative px-2 py-4 z-10 flex justify-start flex-col items-center">
116-
<h2 class="text-2xl sm:text-4xl montserrat-600 uppercase tracking-[1rem]">Plans:</h2>
115+
<h2 class="text-2xl sm:text-4xl uppercase border-gradientb pb-2 text-center">Plans</h2>
117116
<div class="min-h-svh w-full lg:py-0 flex justify-center items-center">
118117
<div id="panels"
119118
class="flex min-h-[600svh] justify-start px-2 py-4 items-start w-full gap-10 flex-nowrap overflow-x-hidden relative">
@@ -244,99 +243,94 @@
244243
<section id="int"
245244
class="my-box-shadow min-h-svh w-full flex flex-col bg-neutral-950 justify-center items-center px-4 py-4 relative">
246245
<div class="min-h-svh w-full flex flex-col justify-center items-center">
247-
<h3 class="text-2xl sm:text-3xl uppercase text-center border-gradientb pb-2">Interests</h3>
248-
<ul class="grid grid-cols-1 sm:grid-cols-2 justify-items-center items-center gap-4 mt-2">
246+
<h3 class="text-2xl sm:text-3xl uppercase text-center border-gradientb pb-2">Questions</h3>
247+
<ul class="flex flex-wrap justify-center items-center gap-2 mt-2">
249248
<li
250249
class="bg-gradient-to-r rounded-md from-[#00ffd52c] to-[#3aff4a2c] px-4 py-1 relative overflow-hidden">
251250
<div class="flex justify-between items-center gap-6 cursor-pointer select-none"
252-
@click="itemsToggle('anime')" id="goint">
253-
My Favorite Anime
251+
@click="itemsToggle('two')" id="goint">
252+
Who Am I?
254253
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
255-
class="bi bi-caret-down-fill" viewBox="0 0 16 16">
254+
viewBox="0 0 16 16">
256255
<path
257256
d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
258257
</svg>
259258
</div>
260259
<Transition>
261-
<ul class="mt-4" v-if="itemsShow.anime">
262-
<li>Monster</li>
263-
<li>Tokyo Revengers</li>
264-
<li>Bleach</li>
265-
<li>One piece</li>
266-
<li>Naruto</li>
267-
<li>Dragon Ball</li>
268-
<li>The Beginning After The End</li>
269-
<li>Hunter X Hunter</li>
260+
<ul class="mt-4" v-if="itemsShow.two">
261+
<li>Full Name: Danial Nasr</li>
262+
<li>Age: {{ myage }}</li>
263+
<li>Location: Iran ,Isfahan</li>
264+
<li>Email: [email protected] (i don't check it)</li>
265+
<li>Social Media: Go to the first page</li>
270266
</ul>
271267
</Transition>
272268
</li>
273269
<li
274270
class="bg-gradient-to-r rounded-md from-[#00ffd52c] to-[#3aff4a2c] px-4 py-1 relative overflow-hidden">
275271
<div class="flex justify-between items-center gap-6 cursor-pointer select-none"
276-
@click="itemsToggle('music')" id="goint">
277-
My Favorite Musics
272+
@click="itemsToggle('one')" id="goint">
273+
Are the websites optimized?
278274
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
279-
class="bi bi-caret-down-fill" viewBox="0 0 16 16">
275+
viewBox="0 0 16 16">
280276
<path
281277
d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
282278
</svg>
283279
</div>
284280
<Transition>
285-
<ul class="mt-4" v-if="itemsShow.music">
286-
<li>Khafan (Ho3ein)</li>
287-
<li>Oxygen (Alibi, Nabilety)</li>
288-
<li>Joz To (TM Bax)</li>
289-
<li>Bad J (Tijay)</li>
290-
<li>Cheap (Hidden)</li>
291-
<li>Billie Jean (Micheal Jackson)</li>
292-
<li>Beat It (Micheal Jackson)</li>
293-
<li>In Da Club (50 Cent)</li>
294-
<li>Never Love Again (Eminem)</li>
295-
<li>Sava (Godpoori)</li>
296-
</ul>
281+
<p class="mt-4" v-if="itemsShow.one">
282+
They are completely up to date and optimized standards <br />
283+
because they are written with technology like Tailwind CSS. <br />
284+
But not in all plans. <br />
285+
In the Basic plan, it is not completely optimized, <br />
286+
but on small sites it does not have an impact.
287+
</p>
297288
</Transition>
298289
</li>
299290
<li
300291
class="bg-gradient-to-r rounded-md from-[#00ffd52c] to-[#3aff4a2c] px-4 py-1 relative overflow-hidden">
301292
<div class="flex justify-between items-center gap-6 cursor-pointer select-none"
302-
@click="itemsToggle('game')" id="goint">
303-
My Favorite Games
293+
@click="itemsToggle('three')" id="goint">
294+
Do we have a team?
304295
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
305-
class="bi bi-caret-down-fill" viewBox="0 0 16 16">
296+
viewBox="0 0 16 16">
306297
<path
307298
d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
308299
</svg>
309300
</div>
310301
<Transition>
311-
<ul class="mt-4" v-if="itemsShow.game">
312-
<li>Clash Royale</li>
313-
<li>Clash of Clans</li>
314-
<li>Call of duty mobile</li>
315-
<li>Subway Surfers</li>
316-
<li>Ninja Arashi (1,2)</li>
317-
<li>Shadow fight (2,4)</li>
318-
<li>Chess</li>
319-
</ul>
302+
<p class="mt-4" v-if="itemsShow.three">
303+
Team members are not used in light work, <br />
304+
but in heavier work, <br />
305+
such as the final plan or <br />
306+
for large sites in the standard plan, <br />
307+
team members are used.
308+
</p>
320309
</Transition>
321310
</li>
322311
<li
323312
class="bg-gradient-to-r rounded-md from-[#00ffd52c] to-[#3aff4a2c] px-4 py-1 relative overflow-hidden">
324313
<div class="flex justify-between items-center gap-6 cursor-pointer select-none"
325-
@click="itemsToggle('books')" id="goint">
326-
My Favorite Books
314+
@click="itemsToggle('four')" id="goint">
315+
How long does it take to build a website?
327316
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
328317
class="bi bi-caret-down-fill" viewBox="0 0 16 16">
329318
<path
330319
d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
331320
</svg>
332321
</div>
333322
<Transition>
334-
<ul class="mt-4" v-if="itemsShow.books">
335-
<li>Brief Answer to the Big Questions (Hawking)</li>
336-
<li>The Computer and the Brain (Neumann)</li>
337-
<li>The great ideas of biology (Nurse)</li>
338-
<li>365 days without you (Akhira)</li>
339-
</ul>
323+
<p class="mt-4" v-if="itemsShow.four">
324+
It depends on your website. <br />
325+
In the Basic plan, <br />
326+
it takes about 7 days and in the Standard plan, <br />
327+
it takes about 5 days. <br />
328+
Depending on whether you want to use a team or not, <br />
329+
the amount will be higher. <br />
330+
In the Essential plan, <br />
331+
the complete website will be delivered in about 1 month, <br />
332+
and again, it depends on your website.
333+
</p>
340334
</Transition>
341335
</li>
342336
</ul>
@@ -352,12 +346,12 @@ import { ScrollSmoother } from 'gsap/ScrollSmoother';
352346
import { ScrollToPlugin } from "gsap/ScrollToPlugin";
353347
import { SplitText } from "gsap/SplitText";
354348
gsap.registerPlugin(ScrollTrigger, ScrollSmoother, ScrollToPlugin, SplitText);
355-
349+
const myage = ref(new Date().getFullYear() - 2008);
356350
let itemsShow = ref({
357-
anime: false,
358-
music: false,
359-
books: false,
360-
game: false
351+
one: false,
352+
two: false,
353+
three: false,
354+
four: false
361355
});
362356
const itemsToggle = (key) => {
363357
itemsShow.value[key] = !itemsShow.value[key];
@@ -408,7 +402,8 @@ onMounted(() => {
408402
gsap.to(window, {
409403
duration: 1,
410404
scrollTo: document.querySelector("#int"),
411-
ease: "power2.inOut"
405+
ease: "power2.inOut",
406+
delay: 0.1
412407
});
413408
});
414409
});
@@ -460,7 +455,7 @@ onMounted(() => {
460455
position: absolute;
461456
bottom: 0;
462457
left: 0;
463-
background: linear-gradient(90deg, #00ffd5, #3aff4a);
458+
background: linear-gradient(85deg, #00ffd5, #3aff4a);
464459
border-radius: 999px;
465460
}
466461

0 commit comments

Comments
 (0)