From 03a7f0a3541d2f26785bf0e83a65202279b25330 Mon Sep 17 00:00:00 2001
From: Ash Svitan <selfsigned-ash@proton.me>
Date: Thu, 15 Jan 2026 14:03:43 +0100
Subject: [PATCH] :bug: Fixes html table

---
 app/pages/index.vue | 448 +++++++++++++++++++++++---------------------
 1 file changed, 230 insertions(+), 218 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index f941d47..7cb907f 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -119,71 +119,79 @@
 
             <h2 class="text-lg">{{ $t("main.experience.title") }}</h2>
             <table class="w-full">
-                <tr>
-                    <th class="max-w-48">
-                        <p class="px-1">
-                            {{ $t("main.experience.header.when") }}
-                        </p>
-                    </th>
-                    <th>
-                        <p class="px-1">
-                            {{ $t("main.experience.header.occupation") }}
-                        </p>
-                    </th>
-                </tr>
+                <thead>
+                    <tr>
+                        <th class="max-w-48">
+                            <p class="px-1">
+                                {{ $t("main.experience.header.when") }}
+                            </p>
+                        </th>
+                        <th>
+                            <p class="px-1">
+                                {{ $t("main.experience.header.occupation") }}
+                            </p>
+                        </th>
+                    </tr>
+                </thead>
 
-                <tr>
-                    <td>{{ $t("main.experience.0.when") }}</td>
-                    <td>
-                        {{ $t("main.experience.0.occupation") }}<br />
-                        {{ $t("main.experience.0.occupation.details") }}
+                <tbody>
+                    <tr>
+                        <td>{{ $t("main.experience.0.when") }}</td>
+                        <td>
+                            {{ $t("main.experience.0.occupation") }}<br />
+                            {{ $t("main.experience.0.occupation.details") }}
 
-                        <ul class="list-disc mt-2">
-                            <li>{{ $t("main.experience.0.details.0") }}</li>
-                            <li>{{ $t("main.experience.0.details.1") }}</li>
-                            <li>{{ $t("main.experience.0.details.2") }}</li>
-                            <li>{{ $t("main.experience.0.details.3") }}</li>
-                        </ul>
-                        <p class="mt-2 flex items-center gap-x-1">
-                            {{ $t("main.experience.publications") }}
-                            <ArrowLink
-                                link="https://ieeexplore.ieee.org/document/10844607"
-                            />
-                        </p>
-                    </td>
-                </tr>
+                            <ul class="list-disc mt-2">
+                                <li>{{ $t("main.experience.0.details.0") }}</li>
+                                <li>{{ $t("main.experience.0.details.1") }}</li>
+                                <li>{{ $t("main.experience.0.details.2") }}</li>
+                                <li>{{ $t("main.experience.0.details.3") }}</li>
+                            </ul>
+                            <p class="mt-2 flex items-center gap-x-1">
+                                {{ $t("main.experience.publications") }}
+                                <ArrowLink
+                                    link="https://ieeexplore.ieee.org/document/10844607"
+                                />
+                            </p>
+                        </td>
+                    </tr>
+                </tbody>
             </table>
             <div class="h-6" />
 
             <h2 class="text-lg">{{ $t("main.education.title") }}</h2>
             <table class="w-full">
-                <tr>
-                    <th class="max-w-48">
-                        <p class="px-1">
-                            {{ $t("main.education.header.when") }}
-                        </p>
-                    </th>
-                    <th>
-                        <p class="px-1">
-                            {{ $t("main.education.header.where") }}
-                        </p>
-                    </th>
-                </tr>
+                <thead>
+                    <tr>
+                        <th class="max-w-48">
+                            <p class="px-1">
+                                {{ $t("main.education.header.when") }}
+                            </p>
+                        </th>
+                        <th>
+                            <p class="px-1">
+                                {{ $t("main.education.header.where") }}
+                            </p>
+                        </th>
+                    </tr>
+                </thead>
 
-                <tr>
-                    <td>{{ $t("main.education.0.when") }}</td>
-                    <td>{{ $t("main.education.0.where") }}</td>
-                </tr>
+                <tbody>
+                    <tr>
+                        <td>{{ $t("main.education.0.when") }}</td>
+                        <td>{{ $t("main.education.0.where") }}</td>
+                    </tr>
 
-                <tr>
-                    <td>{{ $t("main.education.1.when") }}</td>
-                    <td>{{ $t("main.education.1.where") }}</td>
-                </tr>
+                    <tr>
+                        <td>{{ $t("main.education.1.when") }}</td>
+                        <td>{{ $t("main.education.1.where") }}</td>
+                    </tr>
 
-                <tr>
-                    <td>{{ $t("main.education.2.when") }}</td>
-                    <td>{{ $t("main.education.2.where") }}</td>
-                </tr>
+                    <tr>
+                        <td>{{ $t("main.education.2.when") }}</td>
+                        <td>{{ $t("main.education.2.where") }}</td>
+                    </tr>
+                </tbody>
             </table>
             <div class="h-6" />
 
@@ -208,177 +216,181 @@
 
             <h2 class="text-lg">{{ $t("main.projects.title") }}</h2>
             <table class="w-full">
-                <tr>
-                    <th class="max-w-60">
-                        <p class="px-1">
-                            {{ $t("main.projects.header.name") }}
-                        </p>
-                    </th>
-                    <th class="max-w-28">
-                        <p class="px-1">
-                            {{ $t("main.projects.header.reference") }}
-                        </p>
-                    </th>
-                    <th>
-                        <p class="px-1">
-                            {{ $t("main.projects.header.description") }}
-                        </p>
-                    </th>
-                    <th class="max-w-32">
-                        <p class="px-1">
-                            {{ $t("main.projects.header.tags") }}
-                        </p>
-                    </th>
-                </tr>
+                <thead>
+                    <tr>
+                        <th class="max-w-60">
+                            <p class="px-1">
+                                {{ $t("main.projects.header.name") }}
+                            </p>
+                        </th>
+                        <th class="max-w-28">
+                            <p class="px-1">
+                                {{ $t("main.projects.header.reference") }}
+                            </p>
+                        </th>
+                        <th>
+                            <p class="px-1">
+                                {{ $t("main.projects.header.description") }}
+                            </p>
+                        </th>
+                        <th class="max-w-32">
+                            <p class="px-1">
+                                {{ $t("main.projects.header.tags") }}
+                            </p>
+                        </th>
+                    </tr>
+                </thead>
 
-                <tr>
-                    <td>{{ $t("main.projects.0.name") }}</td>
-                    <td class="flex gap-x-2">
-                        <ArrowLink
-                            link="https://gitea.svitan.dev/Streamer272/soc-2024"
-                        />
-                        <ArrowLink
-                            link="https://github.com/Streamer272/soc-2024"
-                        />
-                    </td>
-                    <td>{{ $t("main.projects.0.description") }}</td>
-                    <td class="flex gap-1 flex-wrap text-sm">
-                        <span class="hashtag">
-                            {{ $t("main.projects.0.tags.0") }}
-                        </span>
-                        <span class="hashtag">
-                            {{ $t("main.projects.0.tags.1") }}
-                        </span>
-                    </td>
-                </tr>
+                <tbody>
+                    <tr>
+                        <td>{{ $t("main.projects.0.name") }}</td>
+                        <td class="flex gap-x-2">
+                            <ArrowLink
+                                link="https://gitea.svitan.dev/Streamer272/soc-2024"
+                            />
+                            <ArrowLink
+                                link="https://github.com/Streamer272/soc-2024"
+                            />
+                        </td>
+                        <td>{{ $t("main.projects.0.description") }}</td>
+                        <td class="flex gap-1 flex-wrap text-sm">
+                            <span class="hashtag">
+                                {{ $t("main.projects.0.tags.0") }}
+                            </span>
+                            <span class="hashtag">
+                                {{ $t("main.projects.0.tags.1") }}
+                            </span>
+                        </td>
+                    </tr>
 
-                <tr>
-                    <td>{{ $t("main.projects.1.name") }}</td>
-                    <td class="flex gap-x-2">
-                        <ArrowLink
-                            link="https://gitea.svitan.dev/Streamer272/state-soc-cross"
-                        />
-                    </td>
-                    <td>{{ $t("main.projects.1.description") }}</td>
-                    <td class="flex gap-1 flex-wrap text-sm">
-                        <span class="hashtag">
-                            {{ $t("main.projects.1.tags.0") }}
-                        </span>
-                    </td>
-                </tr>
+                    <tr>
+                        <td>{{ $t("main.projects.1.name") }}</td>
+                        <td class="flex gap-x-2">
+                            <ArrowLink
+                                link="https://gitea.svitan.dev/Streamer272/state-soc-cross"
+                            />
+                        </td>
+                        <td>{{ $t("main.projects.1.description") }}</td>
+                        <td class="flex gap-1 flex-wrap text-sm">
+                            <span class="hashtag">
+                                {{ $t("main.projects.1.tags.0") }}
+                            </span>
+                        </td>
+                    </tr>
 
-                <tr>
-                    <td>{{ $t("main.projects.2.name") }}</td>
-                    <td class="flex gap-x-2">
-                        <ArrowLink
-                            link="https://gitea.svitan.dev/Streamer272/door-alarm"
-                        />
-                    </td>
-                    <td>{{ $t("main.projects.2.description") }}</td>
-                    <td class="flex gap-1 flex-wrap text-sm">
-                        <span class="hashtag">
-                            {{ $t("main.projects.2.tags.0") }}
-                        </span>
-                        <span class="hashtag">
-                            {{ $t("main.projects.2.tags.1") }}
-                        </span>
-                    </td>
-                </tr>
+                    <tr>
+                        <td>{{ $t("main.projects.2.name") }}</td>
+                        <td class="flex gap-x-2">
+                            <ArrowLink
+                                link="https://gitea.svitan.dev/Streamer272/door-alarm"
+                            />
+                        </td>
+                        <td>{{ $t("main.projects.2.description") }}</td>
+                        <td class="flex gap-1 flex-wrap text-sm">
+                            <span class="hashtag">
+                                {{ $t("main.projects.2.tags.0") }}
+                            </span>
+                            <span class="hashtag">
+                                {{ $t("main.projects.2.tags.1") }}
+                            </span>
+                        </td>
+                    </tr>
 
-                <tr>
-                    <td>{{ $t("main.projects.3.name") }}</td>
-                    <td class="flex gap-x-2">
-                        <ArrowLink
-                            link="https://github.com/Streamer272/green-school"
-                        />
-                        <ArrowLink link="https://zelena.svr.sk/" />
-                    </td>
-                    <td>{{ $t("main.projects.3.description") }}</td>
-                    <td class="flex gap-1 flex-wrap text-sm">
-                        <span class="hashtag">
-                            {{ $t("main.projects.3.tags.0") }}
-                        </span>
-                        <span class="hashtag">
-                            {{ $t("main.projects.3.tags.1") }}
-                        </span>
-                        <span class="hashtag">
-                            {{ $t("main.projects.3.tags.2") }}
-                        </span>
-                    </td>
-                </tr>
+                    <tr>
+                        <td>{{ $t("main.projects.3.name") }}</td>
+                        <td class="flex gap-x-2">
+                            <ArrowLink
+                                link="https://github.com/Streamer272/green-school"
+                            />
+                            <ArrowLink link="https://zelena.svr.sk/" />
+                        </td>
+                        <td>{{ $t("main.projects.3.description") }}</td>
+                        <td class="flex gap-1 flex-wrap text-sm">
+                            <span class="hashtag">
+                                {{ $t("main.projects.3.tags.0") }}
+                            </span>
+                            <span class="hashtag">
+                                {{ $t("main.projects.3.tags.1") }}
+                            </span>
+                            <span class="hashtag">
+                                {{ $t("main.projects.3.tags.2") }}
+                            </span>
+                        </td>
+                    </tr>
 
-                <tr>
-                    <td>{{ $t("main.projects.4.name") }}</td>
-                    <td class="flex gap-x-2">
-                        <ArrowLink
-                            link="https://github.com/Streamer272/automod"
-                        />
-                    </td>
-                    <td>{{ $t("main.projects.4.description") }}</td>
-                    <td class="flex gap-1 flex-wrap text-sm">
-                        <span class="hashtag">
-                            {{ $t("main.projects.4.tags.0") }}
-                        </span>
-                        <span class="hashtag">
-                            {{ $t("main.projects.4.tags.1") }}
-                        </span>
-                    </td>
-                </tr>
+                    <tr>
+                        <td>{{ $t("main.projects.4.name") }}</td>
+                        <td class="flex gap-x-2">
+                            <ArrowLink
+                                link="https://github.com/Streamer272/automod"
+                            />
+                        </td>
+                        <td>{{ $t("main.projects.4.description") }}</td>
+                        <td class="flex gap-1 flex-wrap text-sm">
+                            <span class="hashtag">
+                                {{ $t("main.projects.4.tags.0") }}
+                            </span>
+                            <span class="hashtag">
+                                {{ $t("main.projects.4.tags.1") }}
+                            </span>
+                        </td>
+                    </tr>
 
-                <tr>
-                    <td>{{ $t("main.projects.5.name") }}</td>
-                    <td class="flex gap-x-2">
-                        <ArrowLink
-                            link="https://gitea.svitan.dev/Streamer272/pwetty"
-                        />
-                    </td>
-                    <td>{{ $t("main.projects.5.description") }}</td>
-                    <td class="flex gap-1 flex-wrap text-sm">
-                        <span class="hashtag">
-                            {{ $t("main.projects.5.tags.0") }}
-                        </span>
-                        <span class="hashtag">
-                            {{ $t("main.projects.5.tags.1") }}
-                        </span>
-                    </td>
-                </tr>
+                    <tr>
+                        <td>{{ $t("main.projects.5.name") }}</td>
+                        <td class="flex gap-x-2">
+                            <ArrowLink
+                                link="https://gitea.svitan.dev/Streamer272/pwetty"
+                            />
+                        </td>
+                        <td>{{ $t("main.projects.5.description") }}</td>
+                        <td class="flex gap-1 flex-wrap text-sm">
+                            <span class="hashtag">
+                                {{ $t("main.projects.5.tags.0") }}
+                            </span>
+                            <span class="hashtag">
+                                {{ $t("main.projects.5.tags.1") }}
+                            </span>
+                        </td>
+                    </tr>
 
-                <tr>
-                    <td>{{ $t("main.projects.6.name") }}</td>
-                    <td class="flex gap-x-2">
-                        <ArrowLink
-                            link="https://gitea.svitan.dev/Streamer272/keys"
-                        />
-                    </td>
-                    <td>{{ $t("main.projects.6.description") }}</td>
-                    <td class="flex gap-1 flex-wrap text-sm">
-                        <span class="hashtag">
-                            {{ $t("main.projects.6.tags.0") }}
-                        </span>
-                        <span class="hashtag">
-                            {{ $t("main.projects.6.tags.1") }}
-                        </span>
-                    </td>
-                </tr>
+                    <tr>
+                        <td>{{ $t("main.projects.6.name") }}</td>
+                        <td class="flex gap-x-2">
+                            <ArrowLink
+                                link="https://gitea.svitan.dev/Streamer272/keys"
+                            />
+                        </td>
+                        <td>{{ $t("main.projects.6.description") }}</td>
+                        <td class="flex gap-1 flex-wrap text-sm">
+                            <span class="hashtag">
+                                {{ $t("main.projects.6.tags.0") }}
+                            </span>
+                            <span class="hashtag">
+                                {{ $t("main.projects.6.tags.1") }}
+                            </span>
+                        </td>
+                    </tr>
 
-                <tr>
-                    <td>{{ $t("main.projects.7.name") }}</td>
-                    <td class="flex gap-x-2">
-                        <ArrowLink
-                            link="https://github.com/7274-dev/AdventnaVyzva-React"
-                        />
-                        <ArrowLink link="https://github.com/7274-dev" />
-                    </td>
-                    <td>{{ $t("main.projects.7.description") }}</td>
-                    <td class="flex gap-1 flex-wrap text-sm">
-                        <span class="hashtag">
-                            {{ $t("main.projects.7.tags.0") }}
-                        </span>
-                        <span class="hashtag">
-                            {{ $t("main.projects.7.tags.1") }}
-                        </span>
-                    </td>
-                </tr>
+                    <tr>
+                        <td>{{ $t("main.projects.7.name") }}</td>
+                        <td class="flex gap-x-2">
+                            <ArrowLink
+                                link="https://github.com/7274-dev/AdventnaVyzva-React"
+                            />
+                            <ArrowLink link="https://github.com/7274-dev" />
+                        </td>
+                        <td>{{ $t("main.projects.7.description") }}</td>
+                        <td class="flex gap-1 flex-wrap text-sm">
+                            <span class="hashtag">
+                                {{ $t("main.projects.7.tags.0") }}
+                            </span>
+                            <span class="hashtag">
+                                {{ $t("main.projects.7.tags.1") }}
+                            </span>
+                        </td>
+                    </tr>
+                </tbody>
             </table>
 
             <p class="mt-1">{{ $t("main.projects.footer") }}</p>