From eb36b6a48984fe010fc3bd436c7025268350ac90 Mon Sep 17 00:00:00 2001
From: cdans <ch.dansard@gmail.com>
Date: Thu, 22 Feb 2024 15:00:02 +0100
Subject: [PATCH] Refactor UI layout and navigation

---
 src/App.css            |   8 +++
 src/pages/MainPage.tsx | 112 ++++++++++++++++++++++-------------------
 2 files changed, 67 insertions(+), 53 deletions(-)

diff --git a/src/App.css b/src/App.css
index 33b2e61..7686dd9 100644
--- a/src/App.css
+++ b/src/App.css
@@ -77,9 +77,17 @@ body {
   margin: 0 12px;
 }
 
+.container {
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .profile-box {
   background-color: #de5e24;
   color: #e0dab8;
+  width: 100%;
   padding: 20px;
   border-radius: 2px;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index 3650898..9b2ca2e 100644
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -1,49 +1,59 @@
+const LINKS = [
+  { title: "Education", id: "education" },
+  { title: "Experience", id: "experience" },
+  { title: "Skills", id: "skills" },
+];
+
 const NavigationBar = () => {
   return (
     <div className="navbar">
-      <a href="#education">Education</a>
-      <a href="#experience">Experience</a>
-      <a href="#skills">Skills</a>
+      {LINKS.map(({ id, title }) => (
+        <a id={id} href={`#${id}`}>
+          {title}
+        </a>
+      ))}
     </div>
   );
 };
 
 const Summary = () => {
   return (
-    <div id="summary">
-      <div className="header">
-        <h1 className="header-title">
-          CHRISTOPH DANSARD<span className="tm">TM</span>
-        </h1>
-      </div>
-      <p>
-        I am a passionate and driven student at the Technical University Munich
-        with a strong interest in software engineering and product development.
-        I have a proven track record of working in high-performing teams and
-        delivering high-quality software products. I am seeking opportunities to
-        further develop my technical skills and contribute to innovative
-        projects.
-      </p>
-      <div id="links">
-        <a
-          className="button"
-          href="https://www.linkedin.com/in/christoph-dansard-212293161/"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          LinkedIn
-        </a>
-        <a className="button" href="mailto:ch.dansard@gmail.com">
-          Email
-        </a>
-        <a
-          className="button"
-          href="https://github.com/cdans"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          GitHub
-        </a>
+    <div className="container">
+      <div id="summary">
+        <div className="header">
+          <h1 className="header-title">
+            CHRISTOPH DANSARD<span className="tm">TM</span>
+          </h1>
+        </div>
+        <p>
+          I am a passionate and driven student at the Technical University
+          Munich with a strong interest in software engineering and product
+          development. I have a proven track record of working in
+          high-performing teams and delivering high-quality software products. I
+          am seeking opportunities to further develop my technical skills and
+          contribute to innovative projects.
+        </p>
+        <div id="links">
+          <a
+            className="button"
+            href="https://www.linkedin.com/in/christoph-dansard-212293161/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            LinkedIn
+          </a>
+          <a className="button" href="mailto:ch.dansard@gmail.com">
+            Email
+          </a>
+          <a
+            className="button"
+            href="https://github.com/cdans"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            GitHub
+          </a>
+        </div>
       </div>
     </div>
   );
@@ -57,16 +67,18 @@ type ProfileBoxProps = {
 
 const ProfileBox = ({ id, title, content }: ProfileBoxProps) => {
   return (
-    <div className="profile-box" id={id}>
-      <h1>{title}</h1>
-      {content.map((item, indexItem) => (
-        <>
-          {item.split("\n").map((line, indexLine) => (
-            <p key={indexLine}>{line}</p>
-          ))}
-          {indexItem != content.length - 1 && <hr />}
-        </>
-      ))}
+    <div className="container">
+      <div className="profile-box" id={id}>
+        <h1>{title}</h1>
+        {content.map((item, indexItem) => (
+          <>
+            {item.split("\n").map((line, indexLine) => (
+              <p key={indexLine}>{line}</p>
+            ))}
+            {indexItem != content.length - 1 && <hr />}
+          </>
+        ))}
+      </div>
     </div>
   );
 };
@@ -108,12 +120,6 @@ const Profile = () => {
         ]}
       />
 
-      <ProfileBox
-        id="engagement"
-        title="Extracurricular Engagement"
-        content={["Project Mentor at TechLabs Berlin\n(April 2022 - present)"]}
-      />
-
       <ProfileBox
         id="hobbies"
         title="Hobbies"