Feat: Create ContactMe Section

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "test": "echo \"Error no test specified\" && exit 1",
     "lint": "yarn eslint --ext .js,.astro src",
-    "format": "yarn prettier . --write",
+    "format": "yarn prettier --write . --plugin=prettier-plugin-astro",
     "style": "yarn run format . && yarn run lint .",
     "dev": "astro dev",
     "start": "astro dev",

src/components/AboutMeSection.astro

@@ -1,16 +1,12 @@
 ---
 import Section from "@components/Section.astro";
+import ProfileComponent from "./ProfileComponent.astro";
 import { Icon } from "astro-icon";
 ---
 
 <Section title="About me">
   <div class="main-container">
-    <div class="profile-container">
-      <div class="img-container">
-        <img src="/images/IMG_PROFILE.JPG" />
-      </div>
-      <h2>Santiago Torres Aragon</h2>
-    </div>
+    <ProfileComponent />
     <div class="focus-container">
       <a href="https://www.linkedin.com/in/santiago-torres-621632216/">
         <Icon name="mdi:linkedin" />
@@ -47,10 +43,6 @@ import { Icon } from "astro-icon";
     margin-top: 1rem;
   }
 
-  .focus-container {
-    justify-self: center;
-  }
-
   .profile-container {
     justify-self: center;
   }
@@ -71,10 +63,6 @@ import { Icon } from "astro-icon";
     border: 1px solid var(--strong);
   }
 
-  .focus-container {
-    display: flex;
-  }
-
   .description-container {
     justify-self: center;
     max-width: clamp(55ch, 60vw, 80ch);
@@ -84,4 +72,9 @@ import { Icon } from "astro-icon";
     font-size: var(--fs-400);
     text-align: justify;
   }
+
+  .focus-container {
+    justify-self: center;
+    display: flex;
+  }
 </style>

src/components/ContactMeSection.astro

@@ -0,0 +1,19 @@
+---
+import Section from "@components/Section.astro";
+---
+
+<Section title="Contact me">
+</Section>
+
+<style>
+  .main-container {
+    display: grid;
+    width: 100%;
+    gap: 1rem;
+    grid-template-columns: 1fr;
+    margin-top: 1rem;
+    align-items: center;
+  }
+</style>
+
+<script></script>

src/components/ProfileComponent.astro

@@ -0,0 +1,32 @@
+---
+import type { Props } from "astro";
+---
+
+<div class="profile-container">
+  <div class="img-container">
+    <img src="/images/IMG_PROFILE.JPG" />
+  </div>
+  <h2>Santiago Torres</h2>
+</div>
+
+<style>
+  .profile-container {
+    justify-self: center;
+  }
+
+  .profile-container h2 {
+    font-size: var(--fs-500);
+  }
+
+  .img-container {
+    max-width: 13rem;
+    margin: auto;
+  }
+
+  .img-container img {
+    width: 100%;
+    border-radius: 50%;
+    object-fit: contain;
+    border: 1px solid var(--strong);
+  }
+</style>

src/components/SocialMediaButtonComponent.astro

@@ -0,0 +1,28 @@
+---
+type Props = {
+  socialMediaLink: string;
+  socialMediaIcon: string;
+  message: string;
+};
+
+const { socialMediaLink, socialMediaIcon, message } = Astro.props;
+---
+
+<a href={socialMediaLink}>
+  <div class="content"></div>
+</a>
+
+<style>
+  [astro-icon] {
+    color: var(--strong);
+    width: 3rem;
+    height: 3rem;
+  }
+  a {
+    text-decoration: none;
+  }
+
+  .content {
+    display: flex;
+  }
+</style>

src/pages/index.astro

@@ -1,10 +1,18 @@
 ---
 import MainLayout from "@layout/MainLayout.astro";
 import AboutMeSection from "@components/AboutMeSection.astro";
+import ContactMeSection from "@components/ContactMeSection.astro";
 ---
 
 <MainLayout title="index">
-  <AboutMeSection />
+  <div class="content">
+    <AboutMeSection />
+    <ContactMeSection />
+  </div>
 </MainLayout>
 
-<style></style>
+<style>
+  .content {
+    display: grid;
+  }
+</style>