Skip to content

Commit 1c59706

Browse files
vivCodingvivCoding
committed
jazz
1 parent 8ed4db7 commit 1c59706

17 files changed

Lines changed: 866 additions & 789 deletions

‎pages/_includes/index/about.liquid‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<section
2+
id="about"
3+
class="-mt-16 scroll-mt-24 px-10 motion-reduce:-mt-0 sm:px-20 xl:scroll-mt-36 2xl:px-32"
4+
>
5+
<h1 class="group mb-6 w-fit text-4xl font-medium sm:mb-10 sm:text-5xl xl:mb-16 xl:text-7xl">
6+
<span class="about-line-word inline-block opacity-0 animation-delay-[0ms] motion-reduce:animate-none motion-reduce:opacity-100"
7+
>About</span
8+
>
9+
<span class="about-line-word inline-block opacity-0 animation-delay-[250ms] motion-reduce:animate-none motion-reduce:opacity-100"
10+
>Me</span
11+
>
12+
<span
13+
id="about-line-emoji"
14+
class="-ml-4 inline-block origin-bottom-right animate-wave opacity-0 animation-delay-[500ms] animation-duration-500 group-hover:animate-[wave_infinite] motion-reduce:animate-none motion-reduce:opacity-100 motion-reduce:group-hover:animate-none xl:-ml-8"
15+
>👋</span
16+
>
17+
</h1>
18+
19+
{% comment %} ig a bit more scalable, since now i can insert mini links wherever i want if i want {% endcomment %}
20+
{% assign sentence1 = "I am currently a Master's student in CS at Purdue University." | split: " " %}
21+
{% assign sentence2 = "I like web dev and generative AI, especially code generation." | split: " " %}
22+
{% assign sentence3 = "I also like making fun and useful things." | split: " " %}
23+
{% assign sentence4 = "My current favorite sorting algorithm is" | split: " " %}
24+
25+
{% assign delay = 500 %}
26+
<p class="my-8 text-lg sm:my-8 sm:text-2xl xl:my-14 xl:text-4xl">
27+
{% for word in sentence1 %}
28+
<span class="about-line-word inline-block opacity-0 motion-reduce:animate-none motion-reduce:opacity-100 animation-delay-[{{ delay }}ms]">
29+
{{ word }}
30+
</span>
31+
{% assign delay = delay | plus: 50 %}
32+
{% endfor %}
33+
</p>
34+
35+
{% assign delay = delay | plus: 50 %}
36+
<p class="my-8 text-lg sm:my-8 sm:text-2xl xl:my-14 xl:text-4xl">
37+
{% for word in sentence2 %}
38+
<span class="about-line-word inline-block opacity-0 motion-reduce:animate-none motion-reduce:opacity-100 animation-delay-[{{ delay }}ms]">
39+
{{ word }}
40+
</span>
41+
{% assign delay = delay | plus: 50 %}
42+
{% endfor %}
43+
</p>
44+
45+
{% assign delay = delay | plus: 50 %}
46+
<p class="my-8 text-lg sm:my-8 sm:text-2xl xl:my-14 xl:text-4xl">
47+
{% for word in sentence3 %}
48+
<span class="about-line-word inline-block opacity-0 motion-reduce:animate-none motion-reduce:opacity-100 animation-delay-[{{ delay }}ms]">
49+
{{ word }}
50+
</span>
51+
{% assign delay = delay | plus: 50 %}
52+
{% endfor %}
53+
</p>
54+
55+
{% assign delay = delay | plus: 50 %}
56+
<p class="my-8 text-lg sm:my-8 sm:text-2xl xl:my-14 xl:text-4xl">
57+
{% for word in sentence4 %}
58+
<span class="about-line-word inline-block opacity-0 motion-reduce:animate-none motion-reduce:opacity-100 animation-delay-[{{ delay }}ms]">
59+
{{ word }}
60+
</span>
61+
{% assign delay = delay | plus: 50 %}
62+
{% endfor %}
63+
<span
64+
class="about-line-word inline-block opacity-0 motion-reduce:animate-none motion-reduce:opacity-100 animation-delay-[{{ delay }}ms]"
65+
>
66+
<a
67+
href="https://en.wikipedia.org/wiki/Bogosort"
68+
class="m-0 font-semibold text-[#00C2FF] transition duration-200 hover:text-blue-100"
69+
target="_blank"
70+
rel="noreferrer noopener"
71+
>bogosort</a
72+
>.
73+
</span>
74+
</p>
75+
</section>

‎pages/_includes/index/contact.liquid‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<section id="contact" class="my-24 px-10 sm:px-20 lg:my-36 2xl:px-32">
2+
<h1 class="group mb-4 w-fit text-4xl font-medium sm:mb-6 sm:text-5xl xl:mb-10 xl:text-7xl">
3+
<span class="contact-line-word inline-block opacity-0 motion-reduce:animate-none motion-reduce:opacity-100"
4+
>Contact</span
5+
>
6+
<span
7+
id="contact-line-emoji"
8+
class="-ml-4 inline-block opacity-0 animation-delay-[250ms] motion-reduce:animate-none motion-reduce:opacity-100 xl:-ml-10"
9+
>
10+
<span class="inline-block group-hover:animate-swoosh motion-reduce:group-hover:animate-none">📨</span>
11+
</span>
12+
</h1>
13+
{% assign sentence1 = "Got a question or comment?" | split: " " %}
14+
{% assign sentence2 = "Send me a message through this" | split: " " %}
15+
{% assign delay = 250 %}
16+
17+
<p class="my-2 text-sm sm:my-4 sm:text-base xl:my-8 xl:text-xl">
18+
{% for word in sentence1 %}
19+
<span class="contact-line-word inline-block opacity-0 motion-reduce:animate-none motion-reduce:opacity-100 animation-delay-[{{ delay }}ms]">
20+
{{- word -}}
21+
</span>
22+
{% assign delay = delay | plus: 50 %}
23+
{% endfor %}
24+
</p>
25+
26+
{% assign delay = delay | plus: 50 %}
27+
<p class="my-2 text-sm sm:my-4 sm:text-base xl:my-8 xl:text-xl">
28+
{% for word in sentence2 %}
29+
<span class="contact-line-word inline-block opacity-0 motion-reduce:animate-none motion-reduce:opacity-100 animation-delay-[{{ delay }}ms]">
30+
{{- word -}}
31+
</span>
32+
{% assign delay = delay | plus: 50 %}
33+
{% endfor %}
34+
<span
35+
class="contact-line-word inline-block opacity-0 motion-reduce:animate-none motion-reduce:opacity-100 animation-delay-[{{ delay }}ms]"
36+
>
37+
<a
38+
href="https://forms.gle/ThEVfFZfQopvp1929"
39+
class="m-0 font-semibold text-[#00C2FF] transition duration-200 hover:text-blue-100"
40+
target="_blank"
41+
rel="noreferrer noopener"
42+
>form</a
43+
>!
44+
</span>
45+
</p>
46+
</section>

‎pages/_includes/index/intro.liquid‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<section id="intro" class="flex h-screen w-full items-center justify-center">
2+
<div id="hero" class="relative flex w-fit flex-row items-center justify-center px-8">
3+
<svg
4+
id="logoInit"
5+
width="175"
6+
class="invisible relative left-1/2 z-10 w-[110px] overflow-visible py-4 motion-reduce:visible motion-reduce:left-0 motion-reduce:z-0 motion-reduce:rotate-3 sm:w-[145px] lg:w-[175px]"
7+
viewBox="0 0 65 54"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
11+
<path
12+
id="logoBottom"
13+
class="drop-shadow-lg motion-reduce:translate-x-[5px] motion-reduce:translate-y-[5px]"
14+
d="M27.2926 52.6568L7 8H20.5494L28.8681 27.011C29.1202 27.6065 29.4773 28.4145 29.9395 29.4353C30.4436 30.456 30.9688 31.6469 31.515 33.0078C32.1032 34.3263 32.6704 35.751 33.2165 37.2821C33.7627 38.8132 34.2459 40.4081 34.666 42.0668H32.0822C32.7124 40.0253 33.3636 38.1327 34.0358 36.389C34.75 34.6027 35.4433 32.944 36.1155 31.4129C36.8297 29.8818 37.4389 28.4571 37.9431 27.1386L46.1357 8H59.3701L39.5816 52.6568H27.2926Z"
15+
fill="#213941"
16+
/>
17+
<path
18+
id="logoMiddle"
19+
class="drop-shadow-lg motion-reduce:translate-x-[2px] motion-reduce:translate-y-[3px]"
20+
d="M26.8954 52.752L5 5H19.6196L28.5954 25.3287C28.8674 25.9654 29.2527 26.8295 29.7514 27.921C30.2954 29.0124 30.862 30.2858 31.4513 31.7411C32.086 33.151 32.698 34.6745 33.2873 36.3117C33.8766 37.9489 34.3979 39.6543 34.8512 41.428H32.0633C32.7433 39.245 33.4459 37.2212 34.1713 35.3566C34.9419 33.4466 35.6899 31.6729 36.4152 30.0357C37.1858 28.3985 37.8432 26.875 38.3871 25.4652L47.2269 5H61.5066L40.1551 52.752H26.8954Z"
21+
fill="#396572"
22+
/>
23+
<path
24+
id="logoTop"
25+
class="drop-shadow-lg motion-reduce:translate-x-[-2px] motion-reduce:translate-y-[-3px]"
26+
d="M25.4743 52.8763L25.6082 53.1673H25.9285H40.1373H40.4611L40.5935 52.872L63.4734 1.86602L63.7894 1.16138H63.0172H47.7154H47.3871L47.2566 1.46257L37.7841 23.3223L37.7801 23.3313L37.7766 23.3406C37.1987 24.8334 36.4993 26.4496 35.6776 28.1896L35.6775 28.1895L35.6728 28.2C34.893 29.9546 34.0893 31.8543 33.2617 33.899L33.2617 33.899L33.2594 33.9048C33.1927 34.0757 33.1262 34.2477 33.0599 34.421C32.4838 32.8593 31.8873 31.3948 31.2702 30.0277C30.6378 28.4714 30.0277 27.1045 29.4399 25.9282C28.908 24.7675 28.4982 23.8514 28.2098 23.1784L28.2098 23.1784L28.2073 23.1728L18.5891 1.45888L18.4573 1.16138H18.1319H2.46581H1.68544L2.01156 1.87033L25.4743 52.8763Z"
27+
fill="#00C2FF"
28+
stroke="#00C2FF"
29+
></path>
30+
<path
31+
id="logoStroke"
32+
class="fill-none motion-reduce:stroke-none"
33+
d="M25.4743 52.8763L25.6082 53.1673H25.9285H40.1373H40.4611L40.5935 52.872L63.4734 1.86602L63.7894 1.16138H63.0172H47.7154H47.3871L47.2566 1.46257L37.7841 23.3223L37.7801 23.3313L37.7766 23.3406C37.1987 24.8334 36.4993 26.4496 35.6776 28.1896L35.6775 28.1895L35.6728 28.2C34.893 29.9546 34.0893 31.8543 33.2617 33.899L33.2617 33.899L33.2594 33.9048C33.1927 34.0757 33.1262 34.2477 33.0599 34.421C32.4838 32.8593 31.8873 31.3948 31.2702 30.0277C30.6378 28.4714 30.0277 27.1045 29.4399 25.9282C28.908 24.7675 28.4982 23.8514 28.2098 23.1784L28.2098 23.1784L28.2073 23.1728L18.5891 1.45888L18.4573 1.16138H18.1319H2.46581H1.68544L2.01156 1.87033L25.4743 52.8763Z"
34+
stroke="#00C2FF"
35+
/>
36+
</svg>
37+
<div
38+
id="heroSeparator"
39+
class="mx-6 origin-center scale-y-0 self-stretch rounded border-l-4 border-white motion-reduce:scale-y-100 sm:mx-8 lg:mx-12"
40+
></div>
41+
<div class="px-2 py-4">
42+
<div id="heroText" class="opacity-0 motion-reduce:opacity-100">
43+
<h1 id="heroTitle" class="whitespace-nowrap text-2xl font-semibold sm:text-5xl lg:text-6xl">Vincent V</h1>
44+
<div class="mt-5">
45+
<div id="heroDesc" class="opacity-0 motion-reduce:opacity-100">
46+
<h3 id="subtitle" class="pl-1 text-sm font-medium sm:text-base lg:text-lg">
47+
CS Master's <br class="inline sm:hidden">
48+
@ Purdue University
49+
</h3>
50+
<div id="links" class="mt-5 flex flex-row space-x-4 pl-0.5 text-3xl lg:text-4xl">
51+
<a
52+
class="group relative block hover:cursor-pointer motion-reduce:hover:animate-none "
53+
href="https://github.com/vivCoding"
54+
title="GitHub"
55+
target="_blank"
56+
rel="noreferrer noopener"
57+
>
58+
<svg
59+
xmlns="http://www.w3.org/2000/svg"
60+
class="fill-white transition group-hover:scale-125 group-hover:opacity-70 motion-reduce:group-hover:scale-100"
61+
height="1em"
62+
viewBox="0 0 496 512"
63+
>
64+
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
65+
<path
66+
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
67+
/>
68+
</svg>
69+
<span
70+
class="pointer-events-none absolute left-1/2 top-full mt-3 block w-24 -translate-x-1/2 rounded bg-slate-700 bg-opacity-90 p-2 text-center text-sm opacity-0 transition delay-0 after:absolute after:left-1/2 after:top-0 after:-translate-x-1/2 after:-translate-y-full after:border-x-8 after:border-b-8 after:border-x-transparent after:border-b-slate-700 after:border-opacity-90 after:bg-opacity-90 after:content-[''] group-hover:pointer-events-auto group-hover:opacity-100"
71+
>
72+
GitHub
73+
</span>
74+
</a>
75+
<a
76+
class="group relative block hover:cursor-pointer motion-reduce:hover:animate-none "
77+
href="https://www.linkedin.com/in/vincent-v-"
78+
title="LinkedIn"
79+
target="_blank"
80+
rel="noreferrer noopener"
81+
>
82+
<svg
83+
xmlns="http://www.w3.org/2000/svg"
84+
class="fill-white transition group-hover:scale-125 group-hover:opacity-70 motion-reduce:group-hover:scale-100"
85+
height="1em"
86+
viewBox="0 0 448 512"
87+
>
88+
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
89+
<path
90+
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
91+
/>
92+
</svg>
93+
<span
94+
class="pointer-events-none absolute left-1/2 top-full mt-3 block w-24 -translate-x-1/2 rounded bg-slate-700 bg-opacity-90 p-2 text-center text-sm opacity-0 transition delay-0 after:absolute after:left-1/2 after:top-0 after:-translate-x-1/2 after:-translate-y-full after:border-x-8 after:border-b-8 after:border-x-transparent after:border-b-slate-700 after:border-opacity-90 after:bg-opacity-90 after:content-[''] group-hover:pointer-events-auto group-hover:opacity-100"
95+
>
96+
LinkedIn
97+
</span>
98+
</a>
99+
<a
100+
class="group relative block hover:cursor-pointer motion-reduce:hover:animate-none "
101+
href="/blog"
102+
title="Little corner"
103+
>
104+
<svg
105+
class="fill-white transition group-hover:scale-125 group-hover:opacity-70 motion-reduce:group-hover:scale-100"
106+
xmlns="http://www.w3.org/2000/svg"
107+
height="1em"
108+
viewBox="0 0 512 512"
109+
>
110+
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"/>
111+
</svg>
112+
<span
113+
class="pointer-events-none absolute left-1/2 top-full mt-3 block w-24 -translate-x-1/2 rounded bg-slate-700 bg-opacity-90 p-2 text-center text-sm opacity-0 transition delay-0 after:absolute after:left-1/2 after:top-0 after:-translate-x-1/2 after:-translate-y-full after:border-x-8 after:border-b-8 after:border-x-transparent after:border-b-slate-700 after:border-opacity-90 after:bg-opacity-90 after:content-[''] group-hover:pointer-events-auto group-hover:opacity-100"
114+
>
115+
Little corner
116+
</span>
117+
</a>
118+
</div>
119+
</div>
120+
</div>
121+
</div>
122+
</div>
123+
</div>
124+
</section>

‎pages/_includes/index/nav.liquid‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<nav id="navbar" class="fixed z-10 w-full bg-[#0D0F20] p-6 sm:pl-9">
2+
<div class="flex flex-row justify-center gap-x-7 text-base font-medium sm:justify-start">
3+
<a
4+
class="navbarLink inline-block animate-fade-in-down opacity-0 transition animation-delay-[1.5s] animation-duration-500 hover:scale-125 motion-reduce:animate-none motion-reduce:opacity-100 motion-reduce:hover:scale-100"
5+
href="#"
6+
>Home</a
7+
>
8+
<a
9+
class="navbarLink inline-block animate-fade-in-down opacity-0 transition animation-delay-[1.6s] animation-duration-500 hover:scale-125 motion-reduce:animate-none motion-reduce:opacity-100 motion-reduce:hover:scale-100"
10+
href="#about"
11+
>About</a
12+
>
13+
<a
14+
class="navbarLink inline-block animate-fade-in-down opacity-0 transition animation-delay-[1.7s] animation-duration-500 hover:scale-125 motion-reduce:animate-none motion-reduce:opacity-100 motion-reduce:hover:scale-100"
15+
href="#projects"
16+
>Projects</a
17+
>
18+
<a
19+
class="navbarLink inline-block animate-fade-in-down opacity-0 transition animation-delay-[1.8s] animation-duration-500 hover:scale-125 motion-reduce:animate-none motion-reduce:opacity-100 motion-reduce:hover:scale-100"
20+
href="#contact"
21+
>Contact</a
22+
>
23+
</div>
24+
</nav>

0 commit comments

Comments
 (0)