From 8befb291be79e2a9aa58d7d9e46129a759525113 Mon Sep 17 00:00:00 2001
From: II-Paulus-II <paulus.coding@gmail.com>
Date: Wed, 6 Mar 2024 15:51:37 +0000
Subject: [PATCH] some better styling for front section

---
 src/components/Details.jsx | 22 ++++++++++++----------
 src/styles/details.css     | 15 ++++++++++++---
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/components/Details.jsx b/src/components/Details.jsx
index 9fbdedb..b6dafca 100644
--- a/src/components/Details.jsx
+++ b/src/components/Details.jsx
@@ -5,18 +5,20 @@ import "@/styles/details.css";
 function Details() {
   return (
     <article className="detailsContainer">
-      <div className="detailsSocialLinksContainer">
+      <section className="detailsSocialLinksContainer">
         <a href="https://github.com/II-Paulus-II" target="_blank" ><img className="detailsSocialLinksImg" src="/github.webp" alt="github" /></a>
+      </section>
+      <section className="detailsTextContainer">
+        <div className="detailsTextInnerContainer"><h2 className="detailsTitle">Paul Hughes</h2></div>
+        <div className="detailsTextInnerContainer"><p className="detailsComment">Full Stack Developer</p></div>
+        <div className="detailsInfoLinksContainer">
+          <a className="detailsInfoLinks" href="#tech">Tech</a>
+          <a className="detailsInfoLinks" href="#projects">Projects</a>
+        </div>
+      </section>
+      <section className="detailsSocialLinksContainer">
         <a href="https://www.linkedin.com/in/paul-andrew-hughes/" target="_blank" ><img className="detailsSocialLinksImg" src="/linkedin.webp" alt="linkedin" /></a>
-      </div>
-      <div className="detailsTextContainer">
-        <h2 className="detailsTitle">Paul Hughes</h2>
-        <p className="detailsComment">Full Stack Developer</p>
-      </div>
-      <div className="detailsInfoLinksContainer">
-        <a className="detailsInfoLinks" href="#tech">Tech</a>
-        <a className="detailsInfoLinks" href="#projects">Projects</a>
-      </div>
+      </section>
     </article>
   );
 };
diff --git a/src/styles/details.css b/src/styles/details.css
index fe93dcb..0bbab69 100644
--- a/src/styles/details.css
+++ b/src/styles/details.css
@@ -5,7 +5,7 @@
   color: white;
   display: flex;
   flex-direction: row;
-  gap: 1rem;
+  gap: 2rem;
 }
 
 .detailsTextContainer {
@@ -14,6 +14,13 @@
   gap: 1rem;
 }
 
+.detailsTextInnerContainer {
+  height: 5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center:
+}
+
 .detailsTitle {
   font-size: 4rem;
 }
@@ -24,7 +31,9 @@
 
 .detailsInfoLinksContainer {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: space-evenly;
 }
 
 .detailsInfoLinks {
@@ -34,7 +43,7 @@
 .detailsSocialLinksContainer {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  transform: translateY(-4rem);
 }
 
 .detailsSocialLinksImg {