Skip to content

Commit cf09873

Browse files
xirfxirf
committed
feat: responsive (LP)
1 parent 1478782 commit cf09873

File tree

6 files changed

+65
-41
lines changed

6 files changed

+65
-41
lines changed

‎src/components/BaseNavbar.astro

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,24 +17,47 @@ const links = [
1717
url: "/contact",
1818
},
1919
];
20+
21+
let dummy = ["delay-100", "delay-200", "delay-300", "delay-400", "delay-500", "delay-600", "delay-700", "delay-800", "delay-900"];
2022
---
2123

22-
<header class="fixed top-0 left-0 w-full text-white z-999 py-12 flex items-center justify-between px-1/12">
23-
<div class="flex gap-32 items-center flex-grow">
24-
<a href="/" class="text-3xl font-logo">Andka</a>
25-
<nav class="flex items-center gap-16">
24+
<header class="absolute top-0 left-0 w-full text-white z-999 py-6 sm:(py-12) flex items-center justify-between px-1/12" x-data="{open:true}">
25+
<div class="flex gap-32 items-center justify-between flex-grow relative">
26+
<a href="/" class="text-2xl sm:text-3xl font-logo">Andka</a>
27+
<nav
28+
class="flex items-center justify-center gap-8 fixed w-full h-full flex-col top-0 left-0 bg-#ffffff08 backdrop-blur-3xl transition-all duration-500 ease-in-out lg:(flex-row h-auto bg-transparent backdrop-blur-0 relative gap-32)"
29+
:style="open ? 'transform:translateY(0);' : 'transform:translateY(-100%)'">
2630
{
2731
links.map((link, index) => (
28-
<a href={link.url} class="font-light tracking-wide opacity-80 hover:opacity-100 transition-all ">
29-
{link.name}
32+
<a href={link.url} class="font-light tracking-wide opacity-80 hover:opacity-100 transition-all">
33+
<div
34+
class={`transition-all duration-500 ease-in-out delay-${index + 1}00`}
35+
x-bind:style="open ? 'transform:translateX(0); opacity: 1' : 'transform:translateX(-100px); opacity: 0;'">
36+
{link.name}
37+
</div>
3038
</a>
3139
))
3240
}
41+
<div
42+
class={`transition-all duration-500 ease-in-out delay-${links.length + 1}00 lg:(grow flex justify-end)`}
43+
x-bind:style="open ? 'transform:translateX(0); opacity: 1' : 'transform:translateX(-100px); opacity: 0;'">
44+
<a href="mailto:andikacahargen2@gmail.com">
45+
<button class="border-2 px-8 py-2 rounded-full border-#ffffff44 bg-#ffffff22 backdrop-blur"> Let's Talk</button>
46+
</a>
47+
</div>
3348
</nav>
49+
<div class="lg:hidden" @click="open = !open">
50+
<div class="w-5 h-5 relative ">
51+
<div
52+
class="absolute left-0 w-full h-2px bg-white top-1 duration-500 transition-all ease-in-out"
53+
:style="open ? 'transform:rotate(45deg); top: 50%' : 'transform:rotate(0deg);'">
54+
</div>
55+
56+
<div
57+
class="absolute left-0 w-full h-2px bg-white top-3 duration-500 transition-all ease-in-out"
58+
:style="open ? 'transform:rotate(-45deg); top: 50%; background-color: purple;' : 'transform:rotate(0deg);'">
59+
</div>
60+
</div>
61+
</div>
3462
</div>
35-
<a href="mailto:andikacahargen2@gmail.com">
36-
<button class="border-2 px-8 py-2 rounded-full border-#ffffff44 bg-#ffffff22 backdrop-blur">
37-
Let's Talk
38-
</button>
39-
</a>
4063
</header>

‎src/components/home/About.astro

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
33
---
44

5-
<div class="w-full p-20 flex flex-col gap-32 relative">
5+
<div class="w-full py-20 px-8 sm:(px-20 py-20) flex flex-col gap-32 relative">
66
<div class="max-w-3xl m-auto gap-8 flex flex-col">
7-
<h1 class="text-5xl font-bold font-heading">Who Am I?</h1>
8-
<section class="text-xl font-300 flex flex-col gap-4 pl-8">
7+
<h1 class="text-4xl sm:text-5xl font-bold font-heading">Who Am I?</h1>
8+
<section class="sm:text-xl font-300 flex flex-col gap-4 sm:pl-8">
99
<p>
1010
I'm <span class="text-purple">Andika Nur Pratama</span> from East Java, Indonesia, and I began my journey in 2019. Currently, I'm
1111
pursuing my education at the University of Muhammadiyah Ponorogo, specializing in Informatics Engineering.

‎src/components/home/Expertise.astro

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ const expertise = [
1818
];
1919
---
2020

21-
<div class="w-full py-32 flex items-center justify-center flex-col gap-16" x-data="{i: 0}">
22-
<div class="border-1 border-#fff2 bg-#ffffff08 relative rounded-3xl p-2px grid grid-cols-3 max-w-6xl backdrop-blur-xl">
21+
<div class="w-full py-32 overflow-x-hidden overflow-y-visible px-8 flex items-center justify-center flex-col gap-16" x-data="{i: 0}">
22+
<div class="border-1 border-#fff2 bg-#ffffff08 relative rounded-3xl grid grid-cols-1 sm:grid-cols-3 max-w-6xl backdrop-blur-xl">
2323
{
2424
expertise.map((el, index) => (
25-
<div class="py-8 px-12" x-on:mouseenter={`i= ${index}`}>
25+
<div class="py-8 px-12 w-full" x-on:mouseenter={`i= ${index}`}>
2626
<div class="flex gap-6 w-full ">
2727
<div class="flex gap-4 items-center w-full">
2828
<span class={`h-12 w-12 bg-white ${el.icon}`} />
@@ -40,9 +40,10 @@ const expertise = [
4040
}
4141

4242
<div
43-
class="absolute top-0px left-0px w-[calc(33.3333%_-_4px)] h-[calc(100%_-_12px)] m-6px rounded-2xl border-1px backdrop-blur-3xl -z-1 border-#fff1 transition-all duration-500 ease-in-out box-border"
43+
class="hidden lg:block absolute top-0px left-0px w-[calc(33.3333%_-_4px)] h-[calc(100%_-_12px)] m-6px rounded-2xl border-1px backdrop-blur-3xl -z-1 border-#fff1 transition-all duration-500 ease-in-out box-border"
4444
:style="{ transform: `translateX(${i * 100}%)` }">
4545
</div>
46+
4647
<div class="absolute -top-10 -left-20 blur-3xl -z-50">
4748
<div class="w-20 h-20 bg-red" />
4849
<div class="w-30 h-5 bg-sky -my-5" />
@@ -55,9 +56,9 @@ const expertise = [
5556
<div class="w-30 h-20 bg-purple -my-5" />
5657
<div class="w-30 h-20 bg-purple-7 mx-20 -my-5" />
5758
</div>
58-
<div class="absolute bottom-10 right-1/3 flex blur-3xl gap-8 flex-col -z-50">
59-
<div class="w-30 h-5 bg-sky -my-5 mx-10" />
60-
<div class="w-30 h-20 bg-purple-7 mx-20 -my-5" />
59+
<div class="absolute hidden bottom-10 right-1/3 flex blur-3xl gap-8 flex-col -z-50">
60+
<div class="hidden lg:block w-30 h-5 bg-sky -my-5 mx-10" />
61+
<div class="hidden lg:block w-30 h-20 bg-purple-7 mx-20 -my-5" />
6162
</div>
6263
</div>
6364
</div>

‎src/components/home/GIT.astro

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@
22
33
---
44

5-
<div class="w-full flex flex-col items-center justify-center p-32 pb-46 gap-8 relative mt-8">
6-
<h1 class="text-6xl font-bold font-heading">Let's get in touch!</h1>
7-
<section class="grid gap-2 text-center">
8-
<p class="text-2xl font-300 w-full">Work with me, or just say hi! I'd love to hear from you.</p>
9-
<p class="font-300 w-full max-w-3xl opacity-50">
5+
<div class="w-full flex flex-col sm:(items-center justify-center) pt-32 px-8 xl:p-32 pb-46 gap-8 relative mt-8">
6+
<h1 class="text-5xl sm:(text-6xl text-center) font-bold font-heading">Let's get in touch!</h1>
7+
<section class="grid gap-2 ">
8+
<p class="text-xl sm:(text-2xl text-center) font-300 w-full">Work with me, or just say hi! I'd love to hear from you.</p>
9+
<p class="font-300 w-full sm:text-center max-w-3xl opacity-50">
1010
I'm currently available for freelance work. If you have a project that you want to get started, think you need my help with something or
1111
just fancy saying hey, then get in touch.
1212
</p>
1313
</section>
1414
<a href="mailto:andikacahargen2@gmail.com">
1515
<div class="p-2px bg-gradient-to-l from-#b56cfd to-#7558b8 rounded-full w-fit">
16-
<div class="px-12 py-4 bg-gradient-to-l from-#9d53d6 to-#6245b7 rounded-full text-xl">Email me</div>
16+
<div class="px-8 py-2 lg:(px-12 py-4 text-xl) bg-gradient-to-l from-#9d53d6 to-#6245b7 rounded-full">Email me</div>
1717
</div>
1818
</a>
1919
<div

‎src/components/home/Hero.astro

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
<div class="w-full relative min-h-screen flex items-center justify-center">
1+
<main class="w-full relative min-h-screen w-full flex items-center justify-center">
22
<div
33
class="w-90vw -z-10 h-80vw rounded-full absolute top-0 left-1/2 -translate-y-3/5 -translate-x-1/2 blur-300px scale-y-70%"
44
style="background-image: radial-gradient(circle,#442464 0%, #9d53d6 50%, #5ee3f0 80%);">
55
</div>
66

7-
<canvas width="1000" height="1000" id="herocanvas" class="absolute w-1000px h-1000px top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 -z-11">
8-
</canvas>
9-
10-
<div class="z-90 flex flex-col gap-12 text-center items-center justify-center text-white">
11-
<h1 class="text-8xl font-heading font-black text-white">Enthusiastic developer</h1>
12-
<p class="max-w-4xl font-300 font-sans opacity-70 text-xl tracking-wide leading-relaxed">
7+
<div class="z-90 flex p-8 lg:p-0 flex-col gap-8 sm:(gap-12 text-center items-center justify-center) text-white">
8+
<h1 class="text-4xl sm:text-6xl lg:text-7xl 2xl:text-8xl font-heading font-black text-white">Enthusiastic developer</h1>
9+
<p class="text-sm max-w-3xl sm:text-xl 2xl:max-w-4xl font-300 font-sans opacity-70 tracking-wide leading-relaxed">
1310
The main parts of what I do are building the internet, solving problems, exploring new technologies and learning new wonderfull things.
1411
</p>
1512
<a href="/about">
16-
<div class="p-2px bg-gradient-to-l from-#b56cfd to-#7558b8 rounded-full">
17-
<div class="px-12 py-4 bg-gradient-to-l from-#9d53d6 to-#6245b7 rounded-full text-xl">About me</div>
13+
<div class="p-2px bg-gradient-to-l from-#b56cfd to-#7558b8 rounded-full w-fit">
14+
<div class="px-4 py-2 text-sm sm:text-xl lg:(px-12 py-4) bg-gradient-to-l from-#9d53d6 to-#6245b7 rounded-full">About me</div>
1815
</div>
1916
</a>
2017
</div>
21-
</div>
18+
<div class="absolute w-full top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 -z-11 overflow-hidden flex items-center justify-center opacity-50 sm:opacity-100">
19+
<canvas width="1000" height="1000" id="herocanvas" class="w-1000px h-1000px" aria-hidden="true"> </canvas>
20+
</div>
21+
</main>
2222

2323
<script>
2424
window.onload = () => {

‎src/components/home/Repos.astro

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ function parseEmoji(text: string) {
2727
}
2828
---
2929

30-
<div class="py-32 px-16 max-w-screen-xl m-auto relative grid grid-cols-2 items-center gap-32">
31-
<div class="flex flex-col gap-8 relative">
30+
<div class="py-32 lg:overflow-x-visible max-w-screen-xl m-auto relative grid sm:grid-cols-2 items-center gap-8 lg:gap-32">
31+
<div class="flex flex-col gap-8 relative p-8">
3232
<div class="absolute grid grid-cols-2 grid-rows-2 -left-50% -top-1/3">
3333
<div
3434
style="
@@ -59,7 +59,7 @@ function parseEmoji(text: string) {
5959
</div>
6060
</div>
6161

62-
<div class="w-full">
62+
<div class="w-full px-8 overflow-hidden xl:overflow-visible">
6363
<div class="w-full bg-#ffffff08 border-1 border-#fff1 backdrop-blur-3xl rounded-3xl border-#fff1 p-6 flex flex-col gap-6 relative">
6464
<div class="absolute top-1/2 left-2/4 blur-2xl">
6565
<div class="w-8 h-12 bg-purple rounded-full"></div>
@@ -107,7 +107,7 @@ function parseEmoji(text: string) {
107107
</tbody>
108108
</table>
109109
</div>
110-
<div class="w-350px bg-#ffffff08 border-#fff1 border-1 backdrop-blur-sm z-10 p-6 rounded-3xl flex flex-col gap-4 -mt-20% translate-x-60%">
110+
<div class="w-350px bg-#ffffff08 border-#fff1 border-1 backdrop-blur-sm z-10 p-6 rounded-3xl flex flex-col gap-4 -mt-20% translate-x-20% xl:translate-x-60%">
111111
<div class="flex w-full items-center justify-between">
112112
<div class="flex items-center gap-4">
113113
<div

0 commit comments

Comments
 (0)