feat: Apply some elevation to landing components

src/assets/style/global.css

@@ -15,6 +15,14 @@ body {
   padding: 15px 0;
 }
 
+section:not(.clean) {
+  /* outline: 1px solid var(--prj-accent-bg); */
+  padding: var(--prj-spacing-3);
+  background-color: var(--prj-surface-1);
+  box-shadow: 10px 10px 5px 0px var(--prj-shadow);
+  border-radius: var(--prj-border-radious);
+}
+
 section:not(:first-child) {
   margin-top: var(--prj-spacing-4);
 }
@@ -54,6 +62,10 @@ p {
   margin-bottom: var(--prj-spacing-2);
 }
 
+p:last-child {
+  margin-bottom: 0;
+}
+
 /* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
 
 @media screen and (min-width: 640px) {
@@ -141,3 +153,13 @@ li:not(:last-child) {
 .d-none {
   display: none;
 }
+
+.bg-image {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
+    var(--bg-image);
+  background-position: center;
+  background-size: cover;
+  color: var(--prj-bg);
+
+  padding: var(--prj-spacing-3);
+}

src/assets/style/themes.css

@@ -6,11 +6,12 @@
   /* Using catppuccin for now, make a theme switcher later */
   /* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */
   --prj-bg: var(--ctp-macchiato-mantle);
+  --prj-shadow: var(--ctp-macchiato-crust);
   --prj-text: var(--ctp-macchiato-text);
 
   --prj-surface-1: var(--ctp-macchiato-base);
-  --prj-surface-2: var(--ctp-macchiato-surface0);
+  --prj-surface-2: var(--ctp-mocha-surface0);
-  --prj-surface-3: var(--ctp-macchiato-surface1);
+  --prj-surface-3: var(--ctp-mocha-surface1);
   --prj-surface-text: var(--ctp-macchiato-text);
 
   --prj-link-text: var(--ctp-macchiato-teal);

src/assets/style/utils.css

@@ -4,6 +4,8 @@
   --prj-spacing-3: 1rem;
   --prj-spacing-4: 2rem;
   --prj-spacing-5: 3rem;
+
+  --prj-border-radious: 0.5rem;
 }
 
 .d-flex {
@@ -293,8 +295,8 @@
   margin-right: auto !important;
 }
 .my-0 {
-  margin-top: var(--prj-spacing-1) !important;
+  margin-top: 0 !important;
-  margin-bottom: var(--prj-spacing-1) !important;
+  margin-bottom: 0 !important;
 }
 .my-1 {
   margin-top: var(--prj-spacing-1) !important;
@@ -550,3 +552,11 @@
   padding-right: var(--prj-spacing-5) !important;
 }
 /* End paddings */
+
+.shadow-0 {
+  box-shadow: none;
+}
+
+.border-radius {
+  border-radius: var(--prj-border-radious);
+}

src/components/Card.astro

@@ -20,10 +20,11 @@ export interface Props {
 
 <style>
   .card {
-    background-color: var(--prj-surface-1);
+    background-color: var(--prj-surface-2);
     color: var(--prj-surface-text);
-    border: 1px solid var(--prj-accent-bg);
+    border: 1px solid var(--prj-surface-2);
-    border-radius: 8px;
+    border-radius: var(--prj-border-radious);
+    box-shadow: 5px 5px 5px 5px var(--prj-shadow);
 
     padding: var(--prj-spacing-2) var(--prj-spacing-3);
   }

src/pages/index.astro

@@ -3,7 +3,6 @@ import { getCollection } from 'astro:content';
 import Layout from '../layouts/Layout.astro';
 import Card from '../components/Card.astro';
 import Button from '../components/Button/Button.astro';
-import BackgroundImageDiv from '../components/BackgroundImageDiv.astro';
 import { Image } from 'astro:assets';
 
 import portrait from '../assets/images/portrait.jpg';
@@ -18,7 +17,11 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
 ---
 
 <Layout title="aleidk">
-  <section>
+  <section
+    id="hero"
+    class="bg-image flex-center"
+    style="--bg-image: url(https://placehold.co/600x400)"
+  >
     <div class="hstack gap-5">
       <!-- <Image -->
       <!--   id="portrait" -->
@@ -44,7 +47,11 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
 
     <div class="grid grid-cols-3 gap-4">
       <Card>
-        <img src="https://placehold.co/600x400" alt="project img" />
+        <img
+          src="https://placehold.co/600x400"
+          alt="project img"
+          class="border-radius"
+        />
         <h3 class="fs-4 text-center my-1">Project N°1</h3>
         <p class="text-justify">
           Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
@@ -57,7 +64,11 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
       </Card>
 
       <Card>
-        <img src="https://placehold.co/600x400" alt="project img" />
+        <img
+          src="https://placehold.co/600x400"
+          alt="project img"
+          class="border-radius"
+        />
         <h3 class="fs-4 text-center my-1">Project N°1</h3>
         <p class="text-justify">
           Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
@@ -70,7 +81,11 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
       </Card>
 
       <Card>
-        <img src="https://placehold.co/600x400" alt="project img" />
+        <img
+          src="https://placehold.co/600x400"
+          alt="project img"
+          class="border-radius"
+        />
         <h3 class="fs-4 text-center my-1">Project N°1</h3>
         <p class="text-justify">
           Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
@@ -168,26 +183,23 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
     </div>
   </section>
 
-  <section>
+  <section
-    <BackgroundImageDiv
+    class="bg-image"
-      src="https://placehold.co/600x400"
+    style="--bg-image: url(https://placehold.co/600x400)"
-      width={600}
-      height={400}
   >
     <h2 class="text-center">Who am I?</h2>
 
     <p class="w-70 mx-auto text-justify">
-        Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
+      Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
-        enim labore culpa sint ad nisi Lorem pariatur mollit ex esse
+      labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.
-        exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit
+      Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum
-        nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor
+      Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident.
-        minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure
+      Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex
-        elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor
+      occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat
-        Lorem duis laboris cupidatat officia voluptate. Culpa proident
+      officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in
-        adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod.
+      Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non
-        Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim.
+      excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco
-        Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa
+      ut ea consectetur et est culpa et culpa duis.
-        et culpa duis.
     </p>
 
     <div class="text-center fs-4 mb-0">
@@ -195,7 +207,6 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
         <Button>View full curriculum</Button>
       </a>
     </div>
-    </BackgroundImageDiv>
   </section>
 
   <section>
@@ -205,7 +216,7 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
       <div>
         <div class="text-center">
           <img
-            class="respect-width"
+            class="respect-width border-radius"
             src="https://placehold.co/500x300"
             alt="project img"
           />
@@ -247,9 +258,8 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
       border-radius: 50%;
       border: 5px solid var(--prj-text);
     }
-
+    #hero {
-    section {
+      min-height: 50vh;
-      /* outline: 1px solid var(--prj-accent-bg); */
     }
   </style>
 </Layout>