💄 Prettifies tables and adds socials

src/components/Link.astro

@@ -0,0 +1,15 @@
+---
+interface Props {
+    link: string;
+    icon?: string;
+}
+
+const {link, icon} = Astro.props
+---
+
+<a href={link} target="_blank">
+    <img src={icon ?? "/arrow-up-right-from-square.svg"}
+         alt="Arrow going to the top right from the center of a square, representing a link"
+         class="w-4 h-4"
+    />
+</a>

src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import Layout from "../layouts/Layout.astro";
+import Link from "../components/Link.astro"
 
 const now = new Date();
 let years = now.getFullYear() - 2006 - 1
@@ -8,6 +9,33 @@ if (now.getMonth() > 7 || (now.getMonth() === 7 && now.getDate() >= 23)) {
 }
 ---
 
+<style>
+    td {
+        vertical-align: top;
+    }
+
+    td {
+        a {
+            margin-top: 0.25rem;
+        }
+    }
+
+    th {
+        text-align: left;
+        font-weight: normal;
+        font-style: italic;
+        font-size: 1.05rem;
+    }
+
+    tr {
+        border-bottom: 1px solid black;
+    }
+
+    tr:last-of-type {
+        border-bottom: none;
+    }
+</style>
+
 <Layout>
     <div class="w-screen h-screen flex items-start justify-center my-10">
         <div class="w-[40vw] border-solid border-black border-1 p-1">
@@ -15,11 +43,16 @@ if (now.getMonth() > 7 || (now.getMonth() === 7 && now.getDate() >= 23)) {
 
             <div class="h-4"/>
 
-            <p class="text-xl">Hi, I'm <span class="font-bold">Daniel Svitaň</span>, an {years} year-old aspiring engineer</p>
+            <p class="text-xl">Hi, I'm <span class="font-bold">Daniel Svitaň</span>, an {years} year-old aspiring
+                engineer</p>
             <p>I currently reside in Bratislava, Slovakia</p>
             <p>Contacts:
-                <a href="mailto:selfsigned-ash@proton.me" class="underline">selfsigned-ash@proton.me</a>
+                <a href="mailto:selfsigned-ash@proton.me" target="_blank" class="underline">selfsigned-ash@proton.me</a>
-                <a href="tel:+421948309804" class="underline">+421 948 309 804</a>
+                <a href="tel:+421948309804" target="_blank" class="underline">+421 948 309 804</a>
+            </p>
+            <p>Socials:
+                <a href="https://github.com/Streamer272" target="_blank" class="underline">GitHub</a>
+                <a href="https://gitea.svitan.dev/Streamer272" target="_blank" class="underline">Gitea</a>
             </p>
 
             <div class="h-6"/>
@@ -27,10 +60,11 @@ if (now.getMonth() > 7 || (now.getMonth() === 7 && now.getDate() >= 23)) {
             <p class="text-lg">Experience:</p>
             <table>
                 <tr>
-                    <th class="w-44 text-left font-normal italic">When</th>
+                    <th class="w-44">When</th>
-                    <th class="w-44 text-left font-normal italic">What</th>
+                    <th class="w-44">What</th>
-                    <th class="text-left font-normal italic">Where</th>
+                    <th>Where</th>
                 </tr>
+
                 <tr>
                     <td>July, 2024 - present</td>
                     <td>Data Scientist</td>
@@ -43,21 +77,38 @@ if (now.getMonth() > 7 || (now.getMonth() === 7 && now.getDate() >= 23)) {
             <p class="text-lg">Some of my projects:</p>
             <table>
                 <tr>
-                    <th class="w-60 text-left font-normal italic">Name</th>
+                    <th class="w-60">Name</th>
-                    <th class="w-32 text-left font-normal italic">Reference</th>
+                    <th class="w-32">Reference</th>
-                    <th class="w-44 text-left font-normal italic">Description</th>
+                    <th>Description</th>
                 </tr>
+
                 <tr>
                     <td>SOČ 2024/2025 Paper</td>
                     <td class="flex gap-x-2">
-                        <a href="https://gitea.svitan.dev/Streamer272/soc-2024">
+                        <Link link="https://gitea.svitan.dev/Streamer272/soc-2024"/>
-                            <img src="/arrow-up-right-from-square.svg" class="w-4 h-4" />
+                        <Link link="https://github.com/Streamer272/soc-2024"/>
-                        </a>
-                        <a href="https://github.com/Streamer272/soc-2024">
-                            <img src="/arrow-up-right-from-square.svg" class="w-4 h-4" />
-                        </a>
                     </td>
-                    <td></td>
+                    <td>Research paper entitled "Faktory ovplyvňujúce študijné výsledky a identifikácia rizikových
+                        skupín"
+                    </td>
+                </tr>
+
+                <tr>
+                    <td>Adventná Výzva</td>
+                    <td class="flex gap-x-2">
+                        <Link link="https://github.com/7274-dev/AdventnaVyzva-React"/>
+                        <Link link="https://github.com/7274-dev"/>
+                    </td>
+                    <td>An interactive game-like app for kids with an advent theme</td>
+                </tr>
+
+                <tr>
+                    <td>Green School / Zelená Škola</td>
+                    <td class="flex gap-x-2">
+                        <Link link="https://github.com/Streamer272/green-school"/>
+                        <Link link="https://zelena.svr.sk/"/>
+                    </td>
+                    <td>A website for a school club of environmentalists</td>
                 </tr>
             </table>
         </div>