feat: add techstack

src/collections/experiences.json

@@ -17,14 +17,14 @@
 		"dates": "October 2018 · May 2021",
 		"role": "Data-Engineer",
 		"company": "TQS Integration Lt.",
-		"description": "Development and Maintenance of Data Networks",
+		"description": "Data Network Development",
 		"logo": "/assets/images/experiences/tqsintegration.ico"
 	},
 	{
 		"dates": "February 2018 · October 2018",
 		"role": "Embedded Systems Engineer",
 		"company": "Robert Bosch GmbH",
-		"description": "Development if Control and Evaluation Software for electrical and pneumatic Testing Benches",
+		"description": "Development of Control and Evaluation Software",
 		"logo": "/assets/images/experiences/bosch.ico"
 	}
 ]

src/collections/menu.json

@@ -8,7 +8,7 @@
 		"url": "/projects"
 	},
 	{
-		"name": "About",
-		"url": "/about"
+		"name": "About Me",
+		"url": "/aboutme"
 	}
 ]

src/collections/technologies.json

@@ -0,0 +1,42 @@
+[
+	{
+		"name": "Html 5",
+		"icon": "/assets/images/techicons/html.png"
+	},
+	{
+		"name": "Tailwind",
+		"icon": "/assets/images/techicons/tailwind.png"
+	},
+	{
+		"name": "Javascript",
+		"icon": "/assets/images/techicons/javascript.png"
+	},
+	{
+		"name": "Typescript",
+		"icon": "/assets/images/techicons/typescript.png"
+	},
+	{
+		"name": "Node.js",
+		"icon": "/assets/images/techicons/nodejs.png"
+	},
+	{
+		"name": "Nuxt.js",
+		"icon": "/assets/images/techicons/nuxtjs.png"
+	},
+	{
+		"name": "Vue.js",
+		"icon": "/assets/images/techicons/vuejs.png"
+	},
+	{
+		"name": "Docker",
+		"icon": "/assets/images/techicons/docker.png"
+	},
+	{
+		"name": "Python",
+		"icon": "/assets/images/techicons/python.png"
+	},
+	{
+		"name": "Kubernetes",
+		"icon": "/assets/images/techicons/kubernetes.png"
+	}
+]

src/components/footer.astro

@@ -16,6 +16,7 @@
         href="https://github.com/MarcelWeeske"
         target="_blank"
         class="text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white"
+        title="GitHub"
       >
         <span class="sr-only">GitHub</span>
         <svg
@@ -31,11 +32,13 @@
       </a>
       <a href="https://www.linkedin.com/in/marcel-weeske-7a8353161/"
       target="_blank" class="text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white"
+      title="LinkedIn"
       >
         <span class="sr-only">LinkedIn</span>
         <img class="h-6 w-6  opacity-75 hover:opacity-100 transition-opacity"src="/assets/images/linkedin.png" alt="LinkedIn">
       </a>
-      <a href="https://www.goodreads.com/user/show/180899407-marcel" class="text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white">
+      <a href="https://www.goodreads.com/user/show/180899407-marcel" class="text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white"
+      title="GoodReads">
       <span class="sr-only">LinkedIn</span>
       <img class="h-6 w-6  opacity-75 hover:opacity-100 transition-opacity"src="/assets/images/goodreads.png" alt="GoodReads">
       </a> 

src/components/reference.astro

@@ -3,12 +3,26 @@ const { name, role, company, text, image } = Astro.props;
 ---
 
 <div class="relative h-full border border-dashed rounded-2xl border-neutral-300 dark:border-neutral-600 p-6">
-  <div class="float-right ml-4 mb-4">
-    <div class="rounded-full w-32 h-32 overflow-hidden bg-gray-200 dark:bg-gray-700">
-      <img src={image} alt={name} class="w-full h-full object-cover"/>
+  <div>
+    <div class="float-right ml-4 mb-2">
+      <div class="rounded-full w-32 h-32 overflow-hidden bg-gray-200 dark:bg-gray-700">
+        <img src={image} alt={name} class="w-full h-full object-cover"/>
+      </div>
+    </div>
+    <div class="text-sm text-neutral-600 dark:text-neutral-400 textright">
+      <div>
+        <div>
+          <img src="/assets/images/quotation_marks.png" class="w-10 h-10 inline-block">
+        </div>
+        <div class="text-justify">
+          {text}
+        </div>
+        <div class="text-right">
+          <img src="/assets/images/quotation_marks.png" class="w-10 h-10 inline-block">
+        </div>
+      </div>
     </div>
   </div>
-  <div class="text-sm text-neutral-600 dark:text-neutral-400">{text}</div>
   <div class="mt-4 clear-both">
     <p class="font-semibold tracking-tight text-neutral-900 dark:text-neutral-100">{name}</p>
     <p class="text-sm text-gray-600 dark:text-gray-400">{role}, {company}</p>

src/components/references.astro

@@ -0,0 +1,31 @@
+---
+import PageHeading from "./page-heading.astro"
+import Reference from "./reference.astro"
+import references from "../collections/references.json"
+---
+
+<section class="relative z-20 my-12 px-7 lg:px-0">
+  <div class="max-w-2xl mx-auto">
+    <h2 class="mb-2 text-2xl font-bold dark:text-neutral-200 text-center">References</h2>
+    <p class="text-center dark:text-neutral-200">Hear from the people that worked with me</p>
+  </div>
+  <div class="mt-16">
+    <div
+      class="z-50 grid items-stretch w-full max-w-4xl mx-auto grid-cols-1 my-8 gap-7 sm:gap-5 sm:grid-cols-2"
+    >
+    {
+      references.map((reference) => {
+        return (
+          <Reference
+            name={reference.name}
+            text={reference.text}
+            image={reference.image}
+            role={reference.role}
+            company={reference.company}
+          />
+        )
+      })
+    }
+    </div>
+  </div>
+</section>

src/components/technology.astro

@@ -0,0 +1,8 @@
+---
+const { icon,name } = Astro.props;
+---
+
+<div class="flex flex-col items-center">
+  <img class="w-10 h-10" src={icon} alt={name} />
+  <p class="text-sm text-neutral-600 dark:text-neutral-400 textright">{name}</p>
+</div>

src/components/techstack.astro

@@ -0,0 +1,33 @@
+---
+import PageHeading from "./page-heading.astro";
+import technologies from "../collections/technologies.json"
+import Technology from "./technology.astro";
+---
+
+<section class="relative z-20 my-12 px-7 lg:px-0">
+  <div class="max-w-2xl mx-auto">
+    <h2 class="mb-2 text-2xl font-bold dark:text-neutral-200 text-center">TechStack</h2>
+    <p class="text-center dark:text-neutral-200">Always evolving, always learning. Here you find a selection of the technologies I am working with</p>
+  </div>
+  <div class="grid items-stretch w-full sm:grid-cols-2 md:grid-cols-5 gap-7 mt-16">
+    {
+      technologies.map((technology) => {
+        return (
+          <Technology
+            name={technology.name}
+            icon={technology.icon}
+          />
+        )
+      })
+    }
+  </div>
+</section>
+
+
+
+
+
+
+
+
+

src/pages/aboutme.astro

@@ -0,0 +1,83 @@
+---
+import experiences from "../collections/experiences.json";
+import AboutExperience from "../components/about-experience.astro";
+import PageHeading from "../components/page-heading.astro";
+import Separator from "../components/separator.astro";
+import Layout from "../layouts/main.astro";
+---
+
+<Layout title="About Me">
+  <section class="relative z-20 max-w-2xl mx-auto my-12 px-7 lg:px-0">
+    <PageHeading
+      title="About Me"
+      description="Hello 👋 I'm a fullstack and data engineer from Essen, Germany. I'm passionate about building new products and learning new technology."
+    />
+
+    <img src="/assets/images/about.jpg" class="relative z-30 w-full my-10 rounded-xl" />
+
+    <h2 class="mb-2 text-2xl font-bold dark:text-neutral-200">Bio</h2>
+    <p
+      class="text-sm leading-6 text-gray-600 dark:text-neutral-400 sm:leading-7 lg:leading-8 sm:text-base lg:text-lg"
+    >
+    Full Stack and Data Engineering expert with extensive experience in a wide range of technologies and programming languages. Passionate about solving complex problems – with a bit of effort, anything is possible!
+
+    Do you have an exciting project? Feel free to contact me!
+
+    I speak fluent German, English, and Spanish, and I can also converse in French.
+    </p>
+    <Separator text="Take a look at my roles" />
+    <h2
+        class="mt-5 mb-2 text-2xl font-bold lg:mt-10 sm:mt-6 dark:text-neutral-200 text-center"
+      >
+        Professional Experience
+      </h2>
+    <div class="flex justify-center mt-12">
+      <div class="px-5 py-10">
+        {
+          experiences.map((experience, loop) => {
+            return (
+              <>
+                {loop == 0 || loop == 1 ||loop==2 ? (
+                  <div class="pb-10 border-l border-gray-200 dark:border-neutral-700">
+                    <AboutExperience
+                      dates={experience.dates}
+                      role={experience.role}
+                      company={experience.company}
+                      description={experience.description}
+                      logo={experience.logo}
+                    />
+                  </div>
+                ) : (
+                  <AboutExperience
+                    dates={experience.dates}
+                    role={experience.role}
+                    company={experience.company}
+                    description={experience.description}
+                    logo={experience.logo}
+                  />
+                )}
+              </>
+            )
+          })
+        }
+      </div>
+    </div>
+  </section>
+  <Separator text="Contact Me" />
+  <section class="relative z-20 max-w-2xl mx-auto my-12 px-7 lg:px-0">
+    <h2 class="mt-5 mb-2 text-2xl font-bold lg:mt-10 sm:mt-6 dark:text-neutral-200 text-center">Let's Connect</h2>
+    <p class="text-sm leading-6 text-gray-600 dark:text-neutral-400 sm:leading-7 lg:leading-8 sm:text-base lg:text-lg text-center">
+      Send me an email and I'll be sure to get back to you.
+    </p>
+    <div class="flex justify-center mt-6">
+      <div class="bg-white border rounded-full dark:bg-neutral-950 w-14 h-14 border-neutral-300 dark:border-neutral-700 flex items-center justify-center">
+        <a href="mailto:marcelweeske@gmail.com" aria-label="Send email">
+          <svg width="40px" height="40px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="hover:opacity-60 transition-opacity text-black dark:text-white">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 5.25L3 6V18L3.75 18.75H20.25L21 18V6L20.25 5.25H3.75ZM4.5 7.6955V17.25H19.5V7.69525L11.9999 14.5136L4.5 7.6955ZM18.3099 6.75H5.68986L11.9999 12.4864L18.3099 6.75Z" fill="currentColor"/>
+          </svg>
+        </a>
+      </div>
+    </div>
+
+  </section>
+</Layout>