luccaromaniello.com
Second version of my personal website.
luccaromaniello.com/
css
personal-website
bun
tailwindcss
portflio
design
typescript
code
ux-ui
astro
javascript
feat(hero): adds responsiveness
+21
-10
+1
-1
src/components/ui/ButtonLink.astro
+1
-1
src/components/ui/ButtonLink.astro
···
28
28
};
29
29
30
30
const sharedClasses = [
31
-
"w-full md:w-auto inline-flex flex-row items-center gap-2 py-3 px-4 md:py-2 border-2 rounded-sm shadow-[3px_3px_0_0_#AE1E5F] text-sm text-center uppercase font-semibold cursor-pointer",
31
+
"w-full md:w-auto inline-flex flex-row items-center justify-center gap-2 py-3 px-4 md:py-2 border-2 rounded-sm shadow-[3px_3px_0_0_#AE1E5F] text-sm text-center uppercase font-semibold cursor-pointer",
32
32
themeClasses[theme],
33
33
];
34
34
---
+20
-9
src/modules/Hero.astro
+20
-9
src/modules/Hero.astro
···
8
8
---
9
9
10
10
<div
11
-
class={`${baseSpacing} text-white pt-24 pb-20 mb-48 bg-neutral-primary overflow-visible`}
11
+
class={`${baseSpacing} text-white pt-12 md:pt-24 pb-12 md:pb-20 mb-24 md:mb-48 bg-neutral-primary overflow-visible`}
12
12
>
13
13
<div
14
-
class="relative flex flex-row gap-8 w-full justify-start mx-auto max-w-[1440px]"
14
+
class="relative flex flex-col lg:flex-row gap-8 w-full justify-start mx-auto max-w-[1440px]"
15
15
>
16
-
<div class="flex flex-col gap-12 lg:gap-10 w-full pt-10 pl-24">
16
+
<div
17
+
class="flex flex-col gap-8 md:gap-12 lg:gap-10 w-full pt-4 md:pt-10 pl-0 lg:pl-24"
18
+
>
17
19
<h1
18
20
data-text="Lucca Romaniello"
19
-
class="relative z-10 anaglyph text-8xl font-satoshi leading-tight font-bold
21
+
class="relative z-10 anaglyph text-5xl sm:text-6xl lg:text-8xl font-satoshi leading-tight font-bold
20
22
text-white tracking-wider uppercase"
21
23
>
22
24
Lucca Romaniello
23
25
</h1>
24
-
<div class="flex flex-col gap-3 leading-relaxed text-2xl max-w-[640px]">
26
+
<div
27
+
class="flex flex-col gap-3 leading-relaxed text-lg md:text-2xl max-w-[640px]"
28
+
>
25
29
<p class="text-balance text-content-tertiary">
26
30
Full Stack Engineer with a product design background. 6+ years
27
31
blending engineering and design.
···
31
35
work.
32
36
</p>
33
37
</div>
34
-
<div class="flex flex-row gap-6 items-center pt-4">
38
+
<div
39
+
class="flex flex-row flex-wrap justify-center lg:justify-start gap-5 md:gap-6 items-center pt-4"
40
+
>
35
41
<ButtonLink
36
42
icon="github"
37
43
label="GitHub"
···
56
62
</div>
57
63
</div>
58
64
<div
59
-
class="absolute right-8 md:right-20 lg:right-16 xl:right-72 2xl:right-24 w-[480px] h-[560px]"
65
+
class="relative lg:absolute md:right-20 lg:right-16 xl:right-72 2xl:right-24 w-full lg:w-[480px] h-[560px]"
60
66
>
61
67
<div class="flex flex-col gap-4 justify-center text-center">
62
68
<div
···
84
90
This one's for you. Sugar?
85
91
</p>
86
92
</div>
87
-
<div class="text-neutral-primary/90">
93
+
<div class="text-white lg:text-neutral-primary/90">
88
94
<p class="font-caveat text-2xl">
89
95
On most days, you’ll find me with some
90
96
<TextLink
···
98
104
and a cup of coffee. No sugar.
99
105
</p>
100
106
<p
101
-
class="absolute font-caveat text-2xl bottom-56 -right-42 rotate-90 text-content-secondary"
107
+
class="hidden lg:block absolute font-caveat text-2xl bottom-56 -right-42 rotate-90 text-content-secondary"
102
108
>
103
109
Coffee's on me. Hover to grab yours.
104
110
</p>
105
111
</div>
106
112
</div>
107
113
</div>
114
+
<p
115
+
class="lg:hidden absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/6 rotate-90 origin-center whitespace-nowrap font-caveat text-2xl text-content-secondary"
116
+
>
117
+
Coffee's on me. Tap to grab yours.
118
+
</p>
108
119
</div>
109
120
</div>
110
121