feat(landing): update images

src/assets/style/_variables.scss

@@ -34,6 +34,7 @@ $border-radius: 0.5rem;
 
   /* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */
   --prj-bg: #{getColor('mantle')};
+  --prj-bg-transparent: #{color.scale(getColor('mantle'), $alpha: -10%)};
   --prj-shadow: #{getColor('crust')};
   --prj-text: #{getColor('text')};
 

src/assets/style/style.scss

@@ -150,13 +150,20 @@ li:not(:last-child) {
 }
 
 .bg-image {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
+  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
     var(--bg-image);
   background-position: center;
   background-size: cover;
-  color: var(--prj-bg);
+  color: var(--prj-text);
 
   padding: var(--prj-spacing-3);
+
+  .text {
+    padding: var(--prj-spacing-2);
+    background-color: var(--prj-bg-transparent);
+
+    border-radius: var(--prj-border-radius);
+  }
 }
 
 a {

src/pages/index.astro

@@ -5,11 +5,12 @@ import Layout from '../layouts/Layout.astro';
 import Card from '../components/Card.astro';
 import LocalizedMarkdown from '@components/LocalizedMarkdown.astro';
 import Button from '../components/Button/Button.astro';
-import { Image } from 'astro:assets';
+import { Image, getImage } from 'astro:assets';
 import portrait from '../assets/images/portrait.jpg';
 import iconEmail from '../assets/icons/email.svg';
 import iconLinkedin from '../assets/icons/linkedin.svg';
 import iconGithub from '../assets/icons/github.svg';
+import Background1 from '@assets/images/section-bg-1.png';
 
 changeLanguage('en');
 
@@ -21,13 +22,18 @@ const portafolio = [
   await getEntry('portafolio', 'destino-temuco'),
   await getEntry('portafolio', 'sercotec'),
 ];
+
+const optimizedBackground = await getImage({
+  src: Background1,
+  format: 'webp',
+});
 ---
 
 <Layout title="aleidk">
   <section
     id="hero"
     class="bg-image flex-center"
-    style="--bg-image: url(https://placehold.co/600x400)"
+    style={`--bg-image: url(${optimizedBackground.src})`}
   >
     <div class="vstack gap-0 align-items-center">
       <Image
@@ -37,7 +43,7 @@ const portafolio = [
         loading="eager"
         width={200}
       />
-      <div>
+      <div class="text">
         <h1 class="text-center my-0">Alexander Navarro</h1>
         <div class="text-center" class="">
           <LocalizedMarkdown path="brief.md" />
@@ -161,10 +167,10 @@ const portafolio = [
 
   <section
     class="bg-image"
-    style="--bg-image: url(https://placehold.co/600x400)"
+    style={`--bg-image: url(${optimizedBackground.src})`}
   >
     <h2 class="text-center">{t('titles.whoAmI')}</h2>
-    <p class="w-95 w-lg-70 mx-auto text-justify">
+    <p class="w-95 w-lg-70 mx-auto text-justify text">
       <LocalizedMarkdown path="about-me.md" />
     </p>