Skip to content

Commit 96337fc

Browse files
imdanieldevimdanieldev
committed
not end...
1 parent f9d6c47 commit 96337fc

1 file changed

Lines changed: 148 additions & 6 deletions

File tree

‎src/App.vue‎

Lines changed: 148 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -198,8 +198,10 @@
198198
<div class="stars top-0"></div>
199199
<div class="min-h-svh w-full flex flex-col justify-around items-center">
200200
<div>
201-
<h3 class="text-2xl sm:text-3xl uppercase text-center">Technical Skills</h3>
202-
<ul class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 md:gap-5 justify-items-center mt-4">
201+
<h3 class="text-2xl sm:text-3xl uppercase text-center border-gradientb pb-2">Technical Skills
202+
</h3>
203+
<ul
204+
class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 md:gap-5 justify-items-center mt-4">
203205
<li class="bg-[#e34c26] rounded-md px-3 py-0.5">HTML</li>
204206
<li class="bg-[#264de4] rounded-md px-3 py-0.5">CSS</li>
205207
<li class="bg-[#f0db4f] text-black rounded-md px-3 py-0.5">Javascript</li>
@@ -210,21 +212,26 @@
210212
<li class="bg-[#41D1FF] text-black rounded-md px-3 py-0.5">Vite</li>
211213
<li class="bg-[#41B883] text-black rounded-md px-3 py-0.5">VueJS</li>
212214
<li class="bg-[#00DC82] text-black rounded-md px-3 py-0.5">NuxtJS</li>
215+
<li class="bg-[#ffd321] text-black rounded-md px-3 py-0.5">Daisy UI</li>
213216
<li class="bg-[#7BC6FF] text-black rounded-md px-3 py-0.5">VuetifyJS</li>
214217
<li class="bg-[#0ae448] text-black rounded-md px-3 py-0.5">Gsap</li>
215218
<li class="bg-[#8993be] text-black rounded-md px-3 py-0.5">PHP</li>
216219
<li class="bg-[#00749C] rounded-md px-3 py-0.5">Wordpress</li>
217-
<li class="bg-gradient-to-l from-[#DD2C00] to-[#FF9100] rounded-md px-3 py-0.5">Firebase</li>
220+
<li class="bg-gradient-to-l from-[#DD2C00] to-[#FF9100] rounded-md px-3 py-0.5">Firebase
221+
</li>
218222
<li class="bg-[#4285F4] rounded-md px-3 py-0.5">Google Console</li>
219223
<li class="bg-[#F1502F] rounded-md px-3 py-0.5">Git</li>
220224
<li class="bg-[#042B59] rounded-md px-3 py-0.5">Dart (Basic)</li>
221-
<li class="bg-gradient-to-r from-[#306998] to-[#ffde57] text-black rounded-md px-3 py-0.5">Python (Basic)</li>
225+
<li
226+
class="bg-gradient-to-r from-[#306998] to-[#ffde57] text-black rounded-md px-3 py-0.5">
227+
Python (Basic)</li>
222228
<li class="bg-[#F7931E] text-black rounded-md px-3 py-0.5">Linux</li>
223229
<li class="bg-[#00a4ef] text-black rounded-md px-3 py-0.5">Windows</li>
224230
</ul>
225231
</div>
226232
<div>
227-
<h3 class="text-2xl sm:text-3xl uppercase text-center">Personal Skills</h3>
233+
<h3 class="text-2xl sm:text-3xl uppercase text-center border-gradientb pb-2">Personal Skills
234+
</h3>
228235
<ul class="grid grid-cols-1 sm:grid-cols-2 gap-2 md:gap-5 justify-items-center mt-4">
229236
<li class="bg-[#f58b34] text-black rounded-md px-3 py-0.5">MIT App Inventor</li>
230237
<li class="bg-[#3ddc84] text-black rounded-md px-3 py-0.5">Custom Rom</li>
@@ -234,17 +241,126 @@
234241
</div>
235242
</div>
236243
</section>
244+
<section
245+
class="my-box-shadow min-h-svh w-full flex flex-col bg-neutral-950 justify-center items-center px-4 py-4 relative">
246+
<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">
249+
<li
250+
class="bg-gradient-to-r rounded-md from-[#00ffd52c] to-[#3aff4a2c] px-4 py-1 relative overflow-hidden">
251+
<div class="flex justify-between items-center gap-6 cursor-pointer select-none"
252+
@click="itemsToggle('anime')">
253+
My Favorite Anime
254+
<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">
256+
<path
257+
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" />
258+
</svg>
259+
</div>
260+
<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>
270+
</ul>
271+
</Transition>
272+
</li>
273+
<li
274+
class="bg-gradient-to-r rounded-md from-[#00ffd52c] to-[#3aff4a2c] px-4 py-1 relative overflow-hidden">
275+
<div class="flex justify-between items-center gap-6 cursor-pointer select-none"
276+
@click="itemsToggle('music')">
277+
My Favorite Musics
278+
<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">
280+
<path
281+
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" />
282+
</svg>
283+
</div>
284+
<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>
297+
</Transition>
298+
</li>
299+
<li
300+
class="bg-gradient-to-r rounded-md from-[#00ffd52c] to-[#3aff4a2c] px-4 py-1 relative overflow-hidden">
301+
<div class="flex justify-between items-center gap-6 cursor-pointer select-none"
302+
@click="itemsToggle('game')">
303+
My Favorite Games
304+
<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">
306+
<path
307+
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" />
308+
</svg>
309+
</div>
310+
<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>
320+
</Transition>
321+
</li>
322+
<li
323+
class="bg-gradient-to-r rounded-md from-[#00ffd52c] to-[#3aff4a2c] px-4 py-1 relative overflow-hidden">
324+
<div class="flex justify-between items-center gap-6 cursor-pointer select-none"
325+
@click="itemsToggle('books')">
326+
My Favorite Books
327+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
328+
class="bi bi-caret-down-fill" viewBox="0 0 16 16">
329+
<path
330+
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" />
331+
</svg>
332+
</div>
333+
<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+
</ul>
339+
</Transition>
340+
</li>
341+
</ul>
342+
</div>
343+
</section>
237344
</div>
238345
</template>
239346
<script setup>
240-
import { onMounted } from 'vue';
347+
import { onMounted, ref } from 'vue';
241348
import { gsap } from 'gsap';
242349
import { ScrollTrigger } from 'gsap/ScrollTrigger';
243350
import { ScrollSmoother } from 'gsap/ScrollSmoother';
244351
import { ScrollToPlugin } from "gsap/ScrollToPlugin";
245352
import { SplitText } from "gsap/SplitText";
246353
gsap.registerPlugin(ScrollTrigger, ScrollSmoother, ScrollToPlugin, SplitText);
247354
355+
let itemsShow = ref({
356+
anime: false,
357+
music: false,
358+
books: false,
359+
game: false
360+
});
361+
const itemsToggle = (key) => {
362+
itemsShow.value[key] = !itemsShow.value[key];
363+
}
248364
onMounted(() => {
249365
let smoother = ScrollSmoother.create({
250366
smooth: 0.1,
@@ -284,6 +400,17 @@ onMounted(() => {
284400
285401
</script>
286402
<style scoped>
403+
.v-enter-active,
404+
.v-leave-active {
405+
transition: all 1s ease-in-out;
406+
}
407+
408+
.v-enter-from,
409+
.v-leave-to {
410+
font-size: 0;
411+
transform: translateY(100px);
412+
}
413+
287414
.gradient-text {
288415
background-image: linear-gradient(to right, #00ffd5, #3aff4a);
289416
-webkit-background-clip: text;
@@ -307,6 +434,21 @@ onMounted(() => {
307434
border-image: linear-gradient(180deg, #00ffd5, #3aff4a) 1;
308435
}
309436
437+
.border-gradientb {
438+
position: relative;
439+
}
440+
441+
.border-gradientb::after {
442+
content: '';
443+
width: 100%;
444+
height: 2px;
445+
position: absolute;
446+
bottom: 0;
447+
left: 0;
448+
background: linear-gradient(90deg, #00ffd5, #3aff4a);
449+
border-radius: 999px;
450+
}
451+
310452
.my-box-shadow {
311453
box-shadow: 0 -18px 100px 24px rgba(0, 0, 0, 1);
312454
-webkit-box-shadow: 0 -18px 100px 24px rgba(0, 0, 0, 1);

0 commit comments

Comments
 (0)