new landing page design

src/components/ProjectComponent.svelte

@@ -10,6 +10,9 @@
 
 <div class="top">
     <img class="image" src="/project-banners{project.backgroud}" alt=" " />
+    {#if project.kanban}
+        <a href={project.kanban} class="project-kanban"><img class="project-kanban-image" src="/kanban.png" alt="Kanban Icon" /></a>
+    {/if}
 </div>
 <div class="project-languages">
     <ProjectLanguageIndicator {project} />
@@ -129,6 +132,19 @@
         align-items: center;
     }
 
+    .project-kanban {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        cursor: pointer;
+    }
+
+    .project-kanban-image {
+        width: 40px;
+        height: 40px;
+        filter: invert(1);
+    }
+
     @media only screen and (max-width: 620px) {
         .project-topline {
             flex-direction: column;

src/routes/+page.css

@@ -12,7 +12,8 @@
 
 :root {
   --background-color: #202324;
-  --font-color: rgb(0, 255, 0);
+  /*--font-color: rgb(0, 255, 0);*/
+  --font-color: lightgray;
   --font-hover-color: green;
   --header-background-color: rgba(0, 0, 0, 0.4);
   --header-background-color-hover: #202324;
@@ -114,9 +115,77 @@ a:hover {
 
 .image-wrapper {
   position: relative;
-  width: 400px;
-  height: 400px;
+  width: 75%;
   perspective: 800px;
+  /* elements inside should be next to each other */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 2rem auto;
+}
+
+.image-wrapper h1 {
+  padding-left: 20px;
+  font-size: 6rem;
+  color: var(--header-font-color);
+}
+
+.hr-sub-header-line {
+  width: 50rem;
+  height: 1px;
+  margin: 2rem 0;
+  margin-top: -3.5rem;
+}
+
+.hr-line {
+  width: 30rem;
+  height: 1px;
+  margin: 2rem 0;
+}
+
+.quick-links a i {
+  color: var(--font-color);
+  text-decoration: none;
+  font-size: 5rem;
+  margin: 0 1rem;
+  transition: color 0.2s ease-in-out;
+}
+
+.quick-links a:hover i {
+  color: var(--font-hover-color);
+}
+
+.quick-links {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-top: 1rem;
+}
+
+.quick-links a {
+  text-decoration: none;
+  color: var(--font-color);
+  text-align: center;
+  margin: 0 1rem;
+  position: relative;
+  padding-top: 4rem;
+}
+
+.quick-links a:hover {
+  padding-top: 0;
+}
+
+.quick-links a p {
+  opacity: 0;
+  font-size: 1.2rem;
+  color: var(--font-color);
+  margin-top: 0.5rem;
+  transition: all 0.5s ease;
+}
+
+.quick-links a:hover p {
+  opacity: 1;
 }
 
 .card-front,

src/routes/+page.svelte

@@ -10,12 +10,24 @@
   <title>Jonas_Jones</title>
   <Padding />
   <div class="image-wrapper">
-      <!-- svelte-ignore a11y-img-redundant-alt -->
     <img
       src="/icon_800x800_transparent.webp"
-      alt="My Picture"
+      alt="Jonas_Jones Icon"
       class="picture"
+      style="width: 100%; height: auto; max-width: 200px; max-height: 200px;"
     />
+    <h1 class="name">Jonas_Jones</h1>
+  </div>
+  <div class="hr-sub-header-line">
+    <hr />
+  </div>
+  <div class="quick-links">
+    <div class="row">
+      <a href="https://github.com/JonasunderscoreJones" target="_blank" aria-label="github-link"><i class="fab fa-github"></i><p>GitHub</p></a>
+      <a href="https://docs.jonasjones.dev" target="_blank" aria-label="docs-link"><i class="fas fa-book"></i><p>Docs</p></a>
+      <a href="https://blog.jonasjones.dev" target="_blank" aria-label="blog-link"><i class="fas fa-square-rss"></i><p>Blog</p></a>
+      <a href="mailto:me@jonasjones.dev" aria-label="mail-link"><i class="fas fa-envelope"></i><p>Email</p></a>
+    </div>
   </div>
   <div class="line">
     <hr />
@@ -23,13 +35,13 @@
   <div class="line-content">
     <p>Idk how this dot got here but im leaving it.</p>
   </div>
-  <div class="social-media">
+  <!--<div class="social-media">
     <div class="row">
       <a href="https://github.com/JonasunderscoreJones" aria-label="github-link"><i class="fab fa-github"></i></a>
       <a href="https://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg" aria-label="youtube-link"><i class="fab fa-youtube"></i></a>
       <a href="https://discord.gg/V2EsuUVmWh" aria-label="discord-link"><i class="fab fa-discord"></i></a>
       <a href="mailto:me@jonasjones.dev" aria-label="email-link"><i class="fas fa-envelope"></i></a>
     </div>
-  </div>
+  </div>-->
 </ParallaxBg>
 <Footer />