Made Hero bigger on larger screens

SamElfring · Oct 6, 2023 · 533c2e9 · 533c2e9
1 parent bd67c61
commit 533c2e9
Showing 1 changed file with 7 additions and 7 deletions.
diff --git a/src/components/Hero.vue b/src/components/Hero.vue
@@ -3,13 +3,13 @@
         <img
             src="/img/sam.png"
             alt="Person"
-            class="aspect-square object-cover rounded-full border-8 border-slate-500 w-1/2 mx-auto md:mx-0 md:w-60"
+            class="aspect-square object-cover rounded-full border-8 border-slate-500 w-1/2 mx-auto md:mx-0 md:w-80"
         />
 
-        <div class="mt-4 md:max-w-md md:m-0">
-            <p class="text-sm text-slate-500 font-thin">Software Developer</p>
-            <h1 class="text-3xl font-bold">Sam Elfring</h1>
-            <p class="text-slate-400 mt-2">
+        <div class="mt-4 md:max-w-xl md:m-0">
+            <p class="text-sm md:text-lg text-slate-500 font-thin">Software Developer</p>
+            <h1 class="text-3xl md:text-6xl font-bold">Sam Elfring</h1>
+            <p class="text-slate-400 mt-2 md:text-xl">
                 Ik ben Sam, een 20-jarige Software Developer met een passie voor het creëren van digitale oplossingen.
                 Ik studeer aan het Saxion in Enschede bij de opleiding Software Development. In mijn vrije tijd ben ik
                 toegewijd aan zowel fitness als voetbal, omdat ik geloof dat een gezonde geest en een gezond lichaam
@@ -20,13 +20,13 @@
                 <a
                     href="/files/cv_Sam Elfring.pdf"
                     download
-                    class="mr-4 border-blue-500 border px-4 py-2 rounded-full shadow-2xl hover:bg-blue-500 hover:text-white"
+                    class="mr-4 border-blue-500 border px-4 py-2 rounded-full shadow-2xl hover:bg-blue-500 hover:text-white hover:animate-pulse"
                 >
                     Download CV
                 </a>
                 <a
                     href="#contact"
-                    class="border border-white px-4 py-2 rounded-full cursor-pointer hover:bg-white hover:text-black"
+                    class="border border-white px-4 py-2 rounded-full cursor-pointer hover:bg-white hover:text-black hover:animate-pulse"
                 >
                     Contact
                 </a>