Merge pull request #24 from aaronczichon/feature/about-page

Feature: About page
aaronczichon · Jun 16, 2024 · 455bc0d · 455bc0d
2 parents c67b4c0 + 1e51b94
commit 455bc0d
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 78 deletions.
diff --git a/README.md b/README.md
@@ -2,5 +2,4 @@
 
 This repository contains 3 major parts.
 - `design` which is for Canada website and personal website
-- `canada` which is the Canada website, Astro project
-- `personal` which is my personal website at aaronczichon.de, Astro project
+- `site` which is my personal website at aaronczichon.de, Astro project
diff --git a/design/src/index.html b/design/src/index.html
@@ -16,34 +16,32 @@
 	<div class="eu-banner">
 		<img src="https://directus.aaronczichon.de/assets/72ca3a5f-f150-4eaa-b839-28f61446aa42.png" />
 	</div>
-	<div class="container-center">
-		<div class="topnav" id="myTopnav">
-			<a href="index.html" class="active">
-				<img src="./assets/images/profile.jpg" alt="Aaron Czichon" class="img-profile" />
-			</a>
-			<a href="#contact">Canada</a>
-			<a href="blog.html">Blog</a>
-			<a href="map.html">Map</a>
-			<a href="images.html">Images</a>
-			<a href="cv.html">CV</a>
-			<a href="#about">About</a>
-			<a href="javascript:void(0);" class="icon" onclick="toggleNav()">
-				<?xml version="1.0" encoding="utf-8"?>
-				<div class="icon-menu">
-					<svg width="25px" height="25px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-						<path
-							d="M1 12C1 11.4477 1.44772 11 2 11H22C22.5523 11 23 11.4477 23 12C23 12.5523 22.5523 13 22 13H2C1.44772 13 1 12.5523 1 12Z"
-							fill="#0F0F0F" />
-						<path
-							d="M1 4C1 3.44772 1.44772 3 2 3H22C22.5523 3 23 3.44772 23 4C23 4.55228 22.5523 5 22 5H2C1.44772 5 1 4.55228 1 4Z"
-							fill="#0F0F0F" />
-						<path
-							d="M1 20C1 19.4477 1.44772 19 2 19H22C22.5523 19 23 19.4477 23 20C23 20.5523 22.5523 21 22 21H2C1.44772 21 1 20.5523 1 20Z"
-							fill="#0F0F0F" />
-					</svg>
-				</div>
-			</a>
-		</div>
+	<div class="topnav" id="myTopnav">
+		<a href="index.html" class="active">
+			<img src="./assets/images/profile.jpg" alt="Aaron Czichon" class="img-profile" />
+		</a>
+		<a href="javascript:void(0);" class="icon" onclick="toggleNav()">
+			<?xml version="1.0" encoding="utf-8"?>
+			<div class="icon-menu">
+				<svg width="25px" height="25px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<path
+						d="M1 12C1 11.4477 1.44772 11 2 11H22C22.5523 11 23 11.4477 23 12C23 12.5523 22.5523 13 22 13H2C1.44772 13 1 12.5523 1 12Z"
+						fill="#0F0F0F" />
+					<path
+						d="M1 4C1 3.44772 1.44772 3 2 3H22C22.5523 3 23 3.44772 23 4C23 4.55228 22.5523 5 22 5H2C1.44772 5 1 4.55228 1 4Z"
+						fill="#0F0F0F" />
+					<path
+						d="M1 20C1 19.4477 1.44772 19 2 19H22C22.5523 19 23 19.4477 23 20C23 20.5523 22.5523 21 22 21H2C1.44772 21 1 20.5523 1 20Z"
+						fill="#0F0F0F" />
+				</svg>
+			</div>
+		</a>
+		<a href="#contact">Canada</a>
+		<a href="blog.html">Blog</a>
+		<a href="map.html">Map</a>
+		<a href="images.html">Images</a>
+		<a href="cv.html">CV</a>
+		<a href="#about">About</a>
 	</div>
 	<div class="hero">
 		<img src="./assets/images/example.jpeg" />

diff --git a/design/src/styles/layout/nav.css b/design/src/styles/layout/nav.css
@@ -63,23 +63,34 @@
 		display: none;
 	}
 	.topnav a.icon {
-		float: right;
 		display: block;
+		position: absolute;
+    right: 30px;
+    top: 133px;
 	}
 }
 
 /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
 @media screen and (max-width: 48em) {
+	.topnav {
+		display: flex;
+    flex-direction: column;
+	}
+
 	.topnav.responsive {
 		position: relative;
 	}
 	.topnav.responsive a.icon {
 		position: absolute;
-		right: 0;
-		top: 0;
+    right: 8px;
+    top: 16px;
 	}
 	.topnav.responsive a {
 		float: none;
 		display: block;
+		text-align: left;
+	}
+	.topnav.responsive a:first-of-type {
+		float: left;
 	}
 }
diff --git a/site/src/components/Nav.astro b/site/src/components/Nav.astro
@@ -18,34 +18,6 @@ import { Image } from "astro:assets";
         sizes={`30px`}
       />
     </a>
-    <!-- <a href="#contact">Canada</a> -->
-    <a href="/blog/" class={currentPath.indexOf("blog") > -1 ? "active" : ""}
-      >Blog</a
-    >
-    <!-- <a href="/map" class={currentPath.indexOf("map") > -1 ? "active" : ""}
-      >Map</a
-    > -->
-    <!-- <a
-      href="https://directus.aaronczichon.de/assets/073083ac-df38-4a56-b268-c1f045e9cef2"
-      target="_blank"
-      class={currentPath.indexOf("cv") > -1 ? "active" : ""}>CV</a
-    > -->
-    <a href="/cv/" class={currentPath.indexOf("cv") > -1 ? "active" : ""}>CV</a>
-    <a
-      href="/visited-countries/"
-      class={currentPath.indexOf("visited-countries") > -1 ? "active" : ""}
-      >Visited Countries</a
-    >
-    <!-- <a
-      href="/pengiun"
-      class={currentPath.indexOf("pengiun") > -1 ? "active" : ""}
-      >Find Pengiuns</a
-    > -->
-    <!-- <a href="images.html">Images</a> -->
-    <!-- <a href="/about/" class={currentPath.indexOf("about") > -1 ? "active" : ""}
-      >Über uns</a
-    > -->
-    <a href="/imprint">Imprint</a>
     <a
       href="javascript:void(0);"
       rel="nofollow"
@@ -54,6 +26,14 @@ import { Image } from "astro:assets";
     >
       <MenuIcon />
     </a>
+    <a href="/blog/" class={currentPath.indexOf("blog") > -1 ? "active" : ""}
+      >Blog</a
+    >
+    <a href="/cv/" class={currentPath.indexOf("cv") > -1 ? "active" : ""}>CV</a>
+    <a href="/about/" class={currentPath.indexOf("about") > -1 ? "active" : ""}
+      >About me</a
+    >
+    <a href="/imprint">Imprint</a>
   </nav>
 </div>
 <script is:inline>

diff --git a/site/src/layouts/AboutPage.astro b/site/src/layouts/AboutPage.astro
@@ -0,0 +1,20 @@
+---
+import Layout from "./Layout.astro";
+import Hero from "../components/Hero.astro";
+
+import HeroImage from "../resources/hero.jpeg";
+
+const { frontmatter } = Astro.props;
+---
+
+<Layout title={"Aaron Czichon - " + frontmatter.title}>
+  <Hero
+    image={HeroImage}
+    alt="Showing Aaron in the forebround on the right side in a dark green hoodie with a sunny landscape in the background"
+  />
+  <main class="container">
+    <article>
+      <slot />
+    </article>
+  </main>
+</Layout>
diff --git a/site/src/layouts/StartPage.astro b/site/src/layouts/StartPage.astro
@@ -12,10 +12,6 @@ const { frontmatter } = Astro.props;
 ---
 
 <Layout title={"Aaron Czichon - " + frontmatter.title}>
-  <Hero
-    image={HeroImage}
-    alt="Showing Aaron in the forebround on the right side in a dark green hoodie with a sunny landscape in the background"
-  />
   <main class="container">
     <article>
       <slot />

diff --git a/site/src/pages/about.md b/site/src/pages/about.md
@@ -0,0 +1,27 @@
+---
+layout: "../layouts/AboutPage.astro"
+title: "About Me"
+---
+
+# Hi, I'm Aaron!
+
+Currently I'm working remotely from Canada and calling Newfoundland my home away from home.
+As a seasoned Senior Javascript Engineer from Germany, I've been weaving my web tech magic since 2020 over at PlanB. GmbH.
+Previously I worked at a small startup as Head of Software Development where developed a digital asset and twin platform for the industry based on NodeJS, Angular and VueJS.
+
+Over the past few years of software development I wrote several apps, articles and talked at conferences. Since August 2022 I’m listed as an official [Ionic Developer Expert (IDE)](https://ionic.io/developer-experts).
+As a freelance trainer I provide workshops for NodeJS, Ionic, Angular and Javascript in general.
+
+On my more than 11 years experience in the software development industry I worked with small and large teams in various roles.
+
+In my free time I love to play volleyball or go out for running and sometimes athletics. I'm a huge fan of Formula 1 (yes Mercedes is still my favourite team) and on good, sunny days I like to drive my motorcycle.
+Over the past years I also had different roles for volunteering in my hometown community and the local sports club from being responsible for the financial parts of the Volleyball branch, being a chairman of the whole club from 2020 until 2024 and now in the responsible for IT and official communications. I always got my hands in something worthwhile.
+
+If you want to get more details, feel free to visit my [Github profile](https://github.com/aaronczichon) or contact me on [Mastodon](https://mastodon.social/@czichon) and let's chat about code, development or share a Formula 1 story!
+
+---
+
+## Things to explore on this website
+
+**Country Map**  
+I love getting in touch with people all over the world. If you're interested, take a look at the [map with my visited countries in the world](/visited-countries/).
diff --git a/site/src/pages/index.md b/site/src/pages/index.md
@@ -3,18 +3,9 @@ layout: "../layouts/StartPage.astro"
 title: "Home"
 ---
 
-# Hi, I'm Aaron!
+# Developer & Engineer
 
-Currently I'm working remotely from Canada and calling Newfoundland my home away from home.
-As a seasoned Senior Javascript Engineer from Germany, I've been weaving my web tech magic since 2020 over at PlanB. GmbH.
-Previously I worked at a small startup as Head of Software Development where developed a digital asset and twin platform for the industry based on NodeJS, Angular and VueJS.
+Aaron is a software developer and engineer with passion, working with and on everything related to web technologies (Javascript, HTML and CSS).  
+Enjoying the life while hiking, playing volleyball and exploring the world as a remote-first worker.
 
-Over the past few years of software development I wrote several apps, articles and talked at conferences. Since August 2022 I’m listed as an official [Ionic Developer Expert (IDE)](https://ionic.io/developer-experts).
-As a freelance trainer I provide workshops for NodeJS, Ionic, Angular and Javascript in general.
-
-On my more than 11 years experience in the software development industry I worked with small and large teams in various roles.
-
-In my free time I love to play volleyball or go out for running and sometimes athletics. I'm a huge fan of Formula 1 (yes Mercedes is still my favourite team) and on good, sunny days I like to drive my motorcycle.
-Over the past years I also had different roles for volunteering in my hometown community and the local sports club from being responsible for the financial parts of the Volleyball branch, being a chairman of the whole club from 2020 until 2024 and now in the responsible for IT and official communications. I always got my hands in something worthwhile.
-
-If you want to get more details, feel free to visit my [Github profile](https://github.com/aaronczichon) or contact me on [Mastodon](https://mastodon.social/@czichon) and let's chat about code, development or share a Formula 1 story!
+Be kind to everyone ❤️