rework homepage

public/assets/icons/bsky.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="600" height="530" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <path d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z" fill="#fff"/>
+</svg>

public/assets/icons/x.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="300" height="300.251" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" fill="#fff"/>
+</svg>

src/components/ActivityWidget.astro

@@ -57,7 +57,6 @@ import tinyYHT from '../assets/img/tiny_yht.png';
     --ground-color: #8B4513;
     --grass-color: #4CAF50;
     transition: background-color 1s linear;
-    border-radius: 0.5rem;
 
     &.night {
       --sky-color: #000000;
@@ -73,7 +72,6 @@ import tinyYHT from '../assets/img/tiny_yht.png';
       width: 100%;
       background-color: var(--ground-color);
       transition: background-color 1s linear;
-      border-radius: 0.5rem;
 
       &::before {
         content: '';

src/components/SocialsWidget.astro

@@ -1,5 +1,4 @@
 <section>
-  <h2>Socials</h2>
   <div class="grid">
     <a href="https://github.com/YouHaveTrouble" class="social-link" target="_blank" rel="external">
       <img src="/assets/icons/github.svg" alt="" aria-hidden="true" draggable="false" loading="eager">
@@ -34,7 +33,16 @@
       <img src="/assets/icons/linkedin.svg" alt="" aria-hidden="true" draggable="false" loading="eager">
       <span>LinkedIn</span>
     </a>
-    <a href="mailto://contact@youhavetrouble.me" class="social-link" target="_blank" rel="external">
+    <a href="https://x.com/YouHaveTrouble" class="social-link" target="_blank" rel="external">
+      <img src="/assets/icons/x.svg" alt="" aria-hidden="true" draggable="false" loading="eager">
+      <span>X</span>
+    <a href="https://bsky.app/profile/youhavetrouble.bsky.social" class="social-link" target="_blank"
+       rel="external">
+      <img src="/assets/icons/bsky.svg" alt="" aria-hidden="true" draggable="false" loading="eager">
+      <span>BlueSky</span>
+    </a>
+    <a href="mailto://contact@youhavetrouble.me" class="social-link" target="_blank"
+       rel="external">
       <img src="/assets/icons/email.svg" alt="" aria-hidden="true" draggable="false" loading="eager">
       <span>Email</span>
     </a>

src/pages/index.astro

@@ -12,35 +12,104 @@ const permalink = Astro?.site?.href ?? '/';
 
 <BaseLayout title={title} description={description} permalink={permalink}>
   <div class="home-container">
-    <div class="home-copy">
+    <div class="window home-copy" data-title="Welcome">
       <div>
         <h1>Welcome to my little corner of the interwebs</h1>
         <p>Feel free to check out what I got in store!</p>
       </div>
     </div>
-    <div style="width: 100%;">
+    <div class="window-row">
-      <ActivityWidget />
+      <div class="window visitor-counter" data-title="Visitors counter" aria-label="Visitors counter">
-      <ViewCounter/>
+        <ViewCounter />
       </div>
+      <div class="window" data-title="Activity" aria-label="Activity" style="flex: 1; min-width: min(100%, 16rem); ">
+        <ActivityWidget />
+      </div>
+    </div>
+    <div class="window-row">
+      <div class="window socials" data-title="Socials" aria-label="Socials">
         <SocialsWidget />
+      </div>
+      <div class="window blog" aria-label="Blog" data-title="Blog">
+        <a href="/blog">I have a blog btw!</a>
+        <a href="/rss.xml" target="_blank">It also has an RSS feed!</a>
+      </div>
+    </div>
+
     <ProjectsFeature />
   </div>
 </BaseLayout>
 
 <style lang="scss">
+
+  .window {
+    border: 2px solid #d0d0d0;
+    border-radius: 0.5rem;
+    flex-direction: column;
+    position: relative;
+    overflow-y: hidden;
+    padding-top: 1.5rem;
+    min-width: 10rem;
+    &::before {
+      content: attr(data-title);
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 1.5rem;
+      width: 100%;
+      border-bottom: #d0d0d0 solid 2px;
+      display: flex;
+      flex-direction: row;
+      padding-inline: 0.5rem;
+    }
+  }
+
+  .visitor-counter {
+    padding: 1.5rem 1rem 0 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .socials {
+    padding: 2rem 1rem 0 1rem;
+    flex: 1;
+    min-width: min(25rem, 100%);
+  }
+
+  .blog {
+    padding: 2rem 1rem 0 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-width: min(25rem, 100%);
+    width: 100%;
+    max-width: min(25rem, 100%);
+  }
+
+  .window-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    width: 100%;
+    justify-content: center;
+  }
+
   .home-container {
     align-items: center;
     display: flex;
     flex-direction: column;
     justify-content: center;
     margin: 2em 0;
-    gap: 2rem;
+    gap: 1.5rem;
 
     .home-copy {
       flex: 1;
       display: flex;
-      flex-direction: row;
+      width: 100%;
-      padding: 0 1em;
+      padding-top: 3rem;
 
       h1 {
         font-weight: 700;

src/styles/global.css

@@ -218,16 +218,6 @@ td {
   margin: 1em 0;
 }
 
-input[name='theme-toggle'] {
-  position: absolute;
-  opacity: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: -1;
-}
-
 .tags {
   display: flex;
   flex-wrap: wrap;