Second version of my personal website. luccaromaniello.com/
css personal-website bun tailwindcss portflio design typescript code ux-ui astro javascript
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat(hero): adds responsiveness

+21 -10
+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
··· 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