Merge pull request #15 from marcode24/image

✏️ Fix image source path in Hero component
marcode24 · Feb 6, 2024 · 04d935a · 04d935a
2 parents 18e2b04 + b6bb185
commit 04d935a
Show file tree

Hide file tree

Showing 16 changed files with 182 additions and 79 deletions.
diff --git a/src/components/About.astro b/src/components/About.astro
@@ -1,4 +1,5 @@
 ---
+import UserIcon from '@components/icons/user-icon.astro';
 import { getI18n } from '@i18n/index';
 
 const { currentLocale } = Astro;
@@ -7,15 +8,18 @@ const i18n = getI18n({ currentLocale });
 ---
 
 <section id="about">
-  <span class="title">{i18n.ABOUT_SECTION.TITLE} 👨</span>
+  <span class="title">
+    <UserIcon />
+    {i18n.ABOUT_SECTION.TITLE}
+  </span>
   <div class="wrap">
     <div class="description">
       <p set:html={i18n.ABOUT_SECTION.DESCRIPTION_1}></p>
       <p set:html={i18n.ABOUT_SECTION.DESCRIPTION_2}></p>
       <p set:html={i18n.ABOUT_SECTION.DESCRIPTION_3}></p>
     </div>
     <div class="image">
-      <img src="programming.webp" alt={i18n.ABOUT_SECTION.IMAGE.ALT}>
+      <img src="/programming.webp" alt={i18n.ABOUT_SECTION.IMAGE.ALT}>
     </div>
   </div>
 </section>

diff --git a/src/components/App.astro b/src/components/App.astro
@@ -23,9 +23,9 @@ const i18n = getI18n({ currentLocale });
       <div class="blur bottom"></div>
       <div class="blur top"></div>
       <Hero />
-      <About />
-      <Skills />
       <Portfolio />
+      <Skills />
+      <About />
       <Contact />
     </div>
   </div>

diff --git a/src/components/Contact.astro b/src/components/Contact.astro
@@ -1,5 +1,6 @@
 ---
 import CopyIcon from '@components/icons/copy-icon.astro';
+import EnvelopeIcon from '@components/icons/envelope-icon.astro';
 import GithubIcon from '@components/icons/github-icon.astro';
 import InstagramIcon from '@components/icons/instagram-icon.astro';
 import LinkedinIcon from '@components/icons/linkedin-icon.astro';
@@ -20,7 +21,10 @@ const i18n = getI18n({ currentLocale });
 ---
 
 <section id="contact">
-  <span class="title">{i18n.CONTACT_SECTION.TITLE} ✉️</span>
+  <span class="title">
+    <EnvelopeIcon />
+    {i18n.CONTACT_SECTION.TITLE}
+  </span>
   <div class="container">
     <p class="description">
       {i18n.CONTACT_SECTION.DESCRIPTION}
@@ -87,7 +91,7 @@ const i18n = getI18n({ currentLocale });
     justify-content: center;
     flex-direction: column;
     gap: 2rem;
-    max-width: 50%;
+    max-width: 60%;
     margin: 6rem auto;
   }
 

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -40,7 +40,7 @@ const i18n = getI18n({ currentLocale });
     </div>
   </div>
 
-  <img src="me.webp" alt={i18n.HERO_SECTION.IMAGE.ALT} class="profile">
+  <img src="/me.webp" alt={i18n.HERO_SECTION.IMAGE.ALT} class="profile">
 </section>
 
 <style>

diff --git a/src/components/Navigation.svelte b/src/components/Navigation.svelte
@@ -75,10 +75,10 @@
         <span class="title"> {home} </span>
       </a>
     </li>
-    <li class="about">
-      <a href="#about" aria-label="About section">
-        <UserIcon />
-        <span class="title">{about}</span>
+    <li class="portfolio">
+      <a href="#portfolio" aria-label="Portfolio section">
+        <BriefcaseIcon />
+        <span class="title">{portfolio}</span>
       </a>
     </li>
     <li class="skills">
@@ -87,10 +87,10 @@
         <span class="title">{skills}</span>
       </a>
     </li>
-    <li class="portfolio">
-      <a href="#portfolio" aria-label="Portfolio section">
-        <BriefcaseIcon />
-        <span class="title">{portfolio}</span>
+    <li class="about">
+      <a href="#about" aria-label="About section">
+        <UserIcon />
+        <span class="title">{about}</span>
       </a>
     </li>
     <li class="contact">

diff --git a/src/components/Portfolio.astro b/src/components/Portfolio.astro
@@ -1,4 +1,5 @@
 ---
+import CodeIcon from '@components/icons/code-icon.astro';
 import ExternalIcon from '@components/icons/external-icon.astro';
 import GithubIcon from '@components/icons/github-icon.astro';
 import { getI18n } from '@i18n/index';
@@ -10,15 +11,18 @@ const projects = i18n.PORTFOLIO_SECTION.PROJECTS;
 ---
 
 <section id="portfolio">
-  <span class="title">{i18n.PORTFOLIO_SECTION.TITLE} 💼</span>
+  <span class="title">
+    <CodeIcon />
+    {i18n.PORTFOLIO_SECTION.TITLE}
+  </span>
 
   <div class="projects">
     {
       projects.map((project) => (
         <div class="project">
           <a href={project.urlProduction} target="_blank" aria-label="project-preview">
-            <picture>
-              <img src={project.image} alt="project-preview" loading="lazy">
+            <picture class="project-preview">
+              <img src={`/${project.image}`} alt="project-preview" loading="lazy">
             </picture>
           </a>
           <div class="description">
@@ -27,10 +31,12 @@ const projects = i18n.PORTFOLIO_SECTION.PROJECTS;
             <div class="technologies">
               {
                 project.technologies.map((technology) => (
-                  <img
-                    src={`images/${technology.image}`}
-                    alt={`${technology.name} tool used in the project`}
-                    loading="lazy">
+                  <picture class="technology">
+                    <img
+                      src={`/images/${technology.image}`}
+                      alt={`${technology.name} tool used in the project`}
+                      loading="lazy">
+                  </picture>
                 ))
               }
             </div>
@@ -72,11 +78,6 @@ const projects = i18n.PORTFOLIO_SECTION.PROJECTS;
 </section>
 
 <style>
-  section#portfolio {
-    position: relative;
-    width: 100%;
-  }
-
   .more {
     display: flex;
     align-items: center;
@@ -99,12 +100,18 @@ const projects = i18n.PORTFOLIO_SECTION.PROJECTS;
     gap: 2rem;
   }
 
-  .project picture {
+  .description .technologies img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .project picture.project-preview {
     border-radius: 1rem;
     overflow: hidden;
   }
 
-  .project picture img {
+  .project picture.project-preview img {
     min-height: inherit;
     width: 100%;
     height: 100%;
@@ -113,10 +120,10 @@ const projects = i18n.PORTFOLIO_SECTION.PROJECTS;
     transition: 0.3s ease;
   }
 
-  .description .technologies img {
-    width: 100%;
+  .description .technologies .technology {
     height: 2.1rem;
-    object-fit: cover;
+    border-radius: 0.5rem;
+    overflow: hidden;
   }
 
   .project picture img:hover {
@@ -187,14 +194,18 @@ const projects = i18n.PORTFOLIO_SECTION.PROJECTS;
       gap: 1.8rem;
     }
 
-    .project picture {
+    .description .technologies img {
+      height: 1.5rem;
+    }
+
+    .project picture.project-preview {
       width: 100%;
       height: 100%;
       margin-bottom: 1rem;
       border-radius: 0.8rem;
     }
 
-    .project picture img {
+    .project picture.project-preview img {
       transform: translate(0, 0);
     }
 
@@ -217,10 +228,6 @@ const projects = i18n.PORTFOLIO_SECTION.PROJECTS;
       gap: 0.5rem;
     }
 
-    .description .technologies img {
-      height: 1.5rem;
-    }
-
     .description .links {
       flex-direction: row;
       flex-wrap: wrap;

diff --git a/src/components/Skills.astro b/src/components/Skills.astro
@@ -1,5 +1,6 @@
 ---
 import CardSkill from '@components/cards/CardSkill.astro';
+import WrenchIcon from '@components/icons/wrench-icon.astro';
 import {
   cardsDataBackend,
   cardsDataFrontend,
@@ -15,7 +16,10 @@ const i18n = getI18n({ currentLocale });
 ---
 
 <section id="skills">
-  <span class="title">{i18n.SKILLS_SECTION.TITLE} 🛠️</span>
+  <span class="title">
+    <WrenchIcon />
+    {i18n.SKILLS_SECTION.TITLE}
+  </span>
   <div class="skills">
     <div class="skill">
       <span class="subtitle">{i18n.SKILLS_SECTION.TITLES.FRONTEND}</span>
@@ -84,8 +88,8 @@ const i18n = getI18n({ currentLocale });
 
   .subtitle {
     font-size: 28px;
-    font-weight: bold;
-    color: var(--font-color);
+    font-weight: 600;
+    color: var(--primary-color);
   }
 
   .cards {

diff --git a/src/components/icons/code-icon.astro b/src/components/icons/code-icon.astro
@@ -0,0 +1,19 @@
+---
+interface Props {
+  height?: number;
+  width?: number;
+}
+
+const { height = 40, width = 40 }: Props = Astro.props;
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-code"
+  width={width} height={height}
+  viewBox="0 0 24 24" stroke-width="2"
+  stroke="currentColor" fill="none"
+  stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M7 8l-4 4l4 4" />
+  <path d="M17 8l4 4l-4 4" />
+  <path d="M14 4l-4 16" />
+</svg>
diff --git a/src/components/icons/envelope-icon.astro b/src/components/icons/envelope-icon.astro
@@ -0,0 +1,21 @@
+---
+interface Props {
+  height?: number;
+  width?: number;
+}
+
+const { height = 40, width = 40 }: Props = Astro.props;
+---
+
+<svg xmlns="http://www.w3.org/2000/svg"
+  class="icon icon-tabler icon-tabler-mail-forward"
+  width={width} height={height}
+  viewBox="0 0 24 24" stroke-width="2"
+  stroke="currentColor" fill="none"
+  stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M12 18h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5" />
+  <path d="M3 6l9 6l9 -6" />
+  <path d="M15 18h6" />
+  <path d="M18 15l3 3l-3 3" />
+</svg>
diff --git a/src/components/icons/user-icon.astro b/src/components/icons/user-icon.astro
@@ -0,0 +1,20 @@
+---
+interface Props {
+  height?: number;
+  width?: number;
+}
+
+const { height = 40, width = 40 }: Props = Astro.props;
+---
+
+<svg xmlns="http://www.w3.org/2000/svg"
+  class="icon icon-tabler icon-tabler-user-check"
+  width={width} height={height}
+  viewBox="0 0 24 24" stroke-width="2"
+  stroke="currentColor" fill="none" stroke-linecap="round"
+  stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z"fill="none"/>
+  <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
+  <path d="M6 21v-2a4 4 0 0 1 4 -4h4" />
+  <path d="M15 19l2 2l4 -4" />
+</svg>
diff --git a/src/components/icons/wrench-icon.astro b/src/components/icons/wrench-icon.astro
@@ -0,0 +1,19 @@
+---
+interface Props {
+  height?: number;
+  width?: number;
+}
+
+const { height = 40, width = 40 }: Props = Astro.props;
+---
+
+<svg xmlns="http://www.w3.org/2000/svg"
+  class="icon icon-tabler icon-tabler-tool"
+  width={width} height={height}
+  viewBox="0 0 24 24" stroke-width="2"
+  stroke="currentColor"
+  fill="none" stroke-linecap="round"
+  stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5" />
+</svg>