how you can reach me

Author: sofiavldd2005

src/app.rs

@@ -1,7 +1,7 @@
 use crate::home::Home;
 use crate::resume::Resume;
 use leptos::prelude::*;
-use leptos_router::components::{A, Route, Router, Routes};
+use leptos_router::components::{Route, Router, Routes};
 use leptos_router::path;
 
 #[component]

src/home.rs

@@ -5,9 +5,30 @@ pub fn Home() -> impl IntoView {
     view! {
         <style>
             "
-            .about { border: 2px solid var(--mauve); }
-            .about h2 { color: var(--mauve); margin: 0 0 1.5rem 0; text-align: center; font-size: 1.8rem; }
+            .about { border: 2px solid var(--mauve);text-align: center}
+            .about h2 { color: var(--mauve); margin: 0 0 1.5rem 0; text-align: center; font-size: 1.8rem; text-align: center }
             .about-text { font-size: 1.15rem; line-height: 1.7; max-width: 750px; margin: 0 auto; text-align: center; }
+            /* Social Buttons Styling */
+            .socials-container {
+                display: flex;
+                justify-content: center;
+                gap: 1rem;
+                margin-top: 2rem;
+                flex-wrap: wrap;
+            }
+            /* New lead-in text styling */
+            .reach-me {
+                text-align: center;
+                margin-top: 2.5rem;
+                margin-bottom: 1rem;
+                color: var(--subtext);
+                font-size: 1.1rem;
+                font-weight: bold;
+            }
+            /* Custom hover colors for each platform */
+            .social-btn.email:hover { border-color: var(--red); color: var(--red); }
+            .social-btn.github:hover { border-color: var(--mauve); color: var(--mauve); }
+            .social-btn.linkedin:hover { border-color: var(--green); color: var(--green); }
             "
         </style>
         <section class="card about">
@@ -16,6 +37,25 @@ pub fn Home() -> impl IntoView {
                 <p>"Hi! I like to build backend systems, write memory-safe code for embedded devices, and develop flight software for rockets!"</p>
                 <p>"Currently architecting hybrid rocket avionics and pushing for Rust adoption in aerospace environments. 🎀"</p>
             </div>
+            <div class="reach-me">
+                    <h3>"Here is how you can reach me :) "</h3>
+                </div>
+            <div class="socials-container">
+
+                    <a href="mailto:sofia.vazquez.duarte@tecnico.ulisboa.pt" class="social-btn email">
+                        "Email"
+                    </a>
+                    <a href="https://github.com/sofiavldd2005" target="_blank" rel="noopener noreferrer" class="social-btn github">
+                        "GitHub"
+                    </a>
+                    <a href="https://www.linkedin.com/in/sofia-duarte-2528682a1" target="_blank" rel="noopener noreferrer" class="social-btn linkedin">
+                        "LinkedIn"
+                    </a>
+                </div>
         </section>
+        <div class="built-with">
+                "Built with 💖 and "
+                <a href="https://leptos.dev/" target="_blank" rel="noopener noreferrer">"Leptos"</a>
+            </div>
     }
 }

src/resume.rs

@@ -6,10 +6,10 @@ pub fn Resume() -> impl IntoView {
         <style>
             "
             .resume { border: 2px solid var(--green); }
-            .resume h2 { color: var(--green); margin: 0 0 1.5rem 0; text-align: center; font-size: 1.8rem; }
+            .resume h2 { color: var(--green); margin: 0 0 1.5rem 0; text-align: center; font-size: 1.8rem;text-align: center }
             .resume-grid { display: grid; gap: 3rem; }
             @media (min-width: 768px) { .resume-grid { grid-template-columns: 1fr 1fr; } }
-            .section-heading { border-bottom: 1px solid var(--surface-border); padding-bottom: 0.5rem; margin-bottom: 1.5rem; font-size: 1.2rem; margin-top: 0; }
+            .section-heading { border-bottom: 1px solid var(--surface-border); padding-bottom: 0.5rem; margin-bottom: 1.5rem; font-size: 1.2rem; margin-top: 0; text-align: center}
             .col-left .section-heading { color: var(--yellow); }
             .col-right .section-heading { color: var(--red); }
             .experience-list { list-style-type: none; padding: 0; margin: 0; }