From c311f776d8a08906b1dbfd0ca0e916120045e2b3 Mon Sep 17 00:00:00 2001
From: Ash Svitan <selfsigned-ash@proton.me>
Date: Fri, 24 Apr 2026 13:01:15 +0200
Subject: [PATCH] :lipstick: Changes UI structure

Signed-off-by: Ash Svitan <selfsigned-ash@proton.me>
---
 app/components/BashPrompt.vue |   8 ++
 app/pages/index.vue           | 178 ++++++++++++++++------------------
 2 files changed, 93 insertions(+), 93 deletions(-)
 create mode 100644 app/components/BashPrompt.vue

diff --git a/app/components/BashPrompt.vue b/app/components/BashPrompt.vue
new file mode 100644
index 0000000..6ed0d4b
--- /dev/null
+++ b/app/components/BashPrompt.vue
@@ -0,0 +1,8 @@
+<template>
+    <p class="mb-4">
+        [<span class="text-green-500">ash@ash-arch</span>&nbsp;<span
+            class="text-blue-500"
+            >~</span
+        >]$ <slot />
+    </p>
+</template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 4b5ff75..cd1f981 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -5,7 +5,7 @@
         <div class="w-1 h-10 shrink-10" />
 
         <div
-            class="w-[90vw] sm:w-[80vw] m:w-[70vw] lg:w-[60vw] xl:w-[50vw] border-solid border-ctp-text border p-3 shrink-0 overflow-auto relative"
+            class="w-[90vw] sm:w-[80vw] m:w-[70vw] lg:w-[60vw] xl:w-[50vw] border-solid border-ctp-text border p-6 shrink-0 overflow-auto relative"
         >
             <div class="absolute top-2 right-2 flex gap-x-2">
                 <button
@@ -19,69 +19,74 @@
                 </button>
             </div>
 
-            <!-- <NuxtImg
-                src="/images/selfie.png"
-                alt="Selfie"
-                class="lg:float-right w-80 mb-4 lg:mb-0"
-                /> -->
+            <section>
+                <BashPrompt>cat README.md</BashPrompt>
+                <h1 class="text-xl mr-12 mt-4">
+                    {{ $t("main.intro.0") }}
+                    <span class="font-bold">{{ $t("main.intro.1") }}</span
+                    >, {{ $t("main.intro.2") }}{{ years
+                    }}{{ $t("main.intro.3") }}
+                </h1>
+                <a href="/cv1.pdf" target="_blank" class="underline">
+                    {{ $t("main.cv") }}
+                </a>
+            </section>
 
-            <h1 class="text-xl mr-12">
-                {{ $t("main.intro.0") }}
-                <span class="font-bold">{{ $t("main.intro.1") }}</span
-                >, {{ $t("main.intro.2") }}{{ years }}{{ $t("main.intro.3") }}
-            </h1>
-            <a href="/cv1.pdf" target="_blank" class="underline">
-                {{ $t("main.cv") }}
-            </a>
-            <br />
-            <div class="h-4" />
+            <section>
+                <BashPrompt>ls .</BashPrompt>
+                <div class="flex items-center flex-wrap gap-x-4">
+                    <ul>
+                        <li>
+                            <a href="#experience" class="underline">
+                                {{ $t("main.experience.title") }}
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#education" class="underline">
+                                {{ $t("main.education.title") }}
+                            </a>
+                        </li>
+                    </ul>
+                    <ul>
+                        <li>
+                            <a href="#skills" class="underline">
+                                {{ $t("main.skills.title") }}
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#projects" class="underline">
+                                {{ $t("main.projects.title") }}
+                            </a>
+                        </li>
+                    </ul>
+                    <ul>
+                        <li>
+                            <a href="#about-me" class="underline">
+                                {{ $t("main.about.title") }}
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#contacts" class="underline">
+                                {{ $t("main.contacts.title") }}
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </section>
 
-            <div
-                class="flex items-center justify-center flex-wrap gap-x-4 my-4"
-            >
-                <ul>
-                    <li>
-                        <a href="#experience" class="underline">
-                            {{ $t("main.experience.title") }}
-                        </a>
-                    </li>
-                    <li>
-                        <a href="#education" class="underline">
-                            {{ $t("main.education.title") }}
-                        </a>
-                    </li>
-                </ul>
-                <ul>
-                    <li>
-                        <a href="#skills" class="underline">
-                            {{ $t("main.skills.title") }}
-                        </a>
-                    </li>
-                    <li>
-                        <a href="#projects" class="underline">
-                            {{ $t("main.projects.title") }}
-                        </a>
-                    </li>
-                </ul>
-                <ul>
-                    <li>
-                        <a href="#about-me" class="underline">
-                            {{ $t("main.about.title") }}
-                        </a>
-                    </li>
-                    <li>
-                        <a href="#contacts" class="underline">
-                            {{ $t("main.contacts.title") }}
-                        </a>
-                    </li>
-                </ul>
-            </div>
-            <div class="h-4" />
+            <section>
+                <BashPrompt>feh images/selfie.png</BashPrompt>
+                <div class="flex justify-center w-full">
+                    <NuxtImg
+                        src="/images/selfie.png"
+                        alt="Selfie"
+                        class="w-80"
+                    />
+                </div>
+            </section>
 
             <section id="experience">
-                <h2 class="text-lg">
-                    {{ $t("main.experience.title") }}
-                </h2>
+                <BashPrompt>cat {{ $t("main.experience.title") }}</BashPrompt>
                 <table class="w-full">
                     <thead>
                         <tr>
@@ -132,12 +137,9 @@
                     </tbody>
                 </table>
             </section>
-            <div class="h-8" />
 
             <section id="education">
-                <h2 class="text-lg">
-                    {{ $t("main.education.title") }}
-                </h2>
+                <BashPrompt>cat {{ $t("main.education.title") }}</BashPrompt>
                 <table class="w-full">
                     <thead>
                         <tr>
@@ -172,10 +174,9 @@
                     </tbody>
                 </table>
             </section>
-            <div class="h-8" />
 
             <section id="skills">
-                <h2 class="text-lg">{{ $t("main.skills.title") }}</h2>
+                <BashPrompt>cat {{ $t("main.skills.title") }}</BashPrompt>
                 <ul>
                     <li>{{ $t("main.skills.languages") }}</li>
                     <li>{{ $t("main.skills.data-science") }}</li>
@@ -193,12 +194,9 @@
                 <p>{{ $t("main.skills.3") }}</p>
                 <p>{{ $t("main.skills.4") }}</p>
             </section>
-            <div class="h-8" />
 
             <section id="projects">
-                <h2 class="text-lg">
-                    {{ $t("main.projects.title") }}
-                </h2>
+                <BashPrompt>cat {{ $t("main.projects.title") }}</BashPrompt>
                 <table class="w-full">
                     <thead>
                         <tr>
@@ -376,12 +374,9 @@
 
                 <p class="mt-1">{{ $t("main.projects.footer") }}</p>
             </section>
-            <div class="h-8" />
 
             <section id="about-me">
-                <h2 class="text-lg">
-                    {{ $t("main.about.title") }}
-                </h2>
+                <BashPrompt>cat {{ $t("main.about.title") }}</BashPrompt>
                 <p>{{ $t("main.about.residence") }}</p>
                 <p>{{ $t("main.about.citizenship") }}</p>
                 <p>{{ $t("main.about.0") }}</p>
@@ -389,10 +384,9 @@
                 <p>{{ $t("main.about.2") }}</p>
                 <p>{{ $t("main.about.3") }}</p>
             </section>
-            <div class="h-8" />
 
             <section id="contacts">
-                <h2 class="text-lg">{{ $t("main.contacts.title") }}</h2>
+                <BashPrompt>cat {{ $t("main.contacts.title") }}</BashPrompt>
                 <ul class="list-none">
                     <li>
                         <a
@@ -491,19 +485,21 @@
                     </li>
                 </ul>
             </section>
-            <div class="h-8" />
 
-            <p>
-                {{ $t("main.note.source.0") }}
-                <a
-                    href="https://gitea.svitan.dev/Streamer272/svitan.dev"
-                    target="_blank"
-                    class="underline"
-                >
-                    {{ $t("main.note.source.1") }}
-                </a>
-                {{ $t("main.note.source.2") }}
-            </p>
+            <footer>
+                <BashPrompt>cat footer</BashPrompt>
+                <p>
+                    {{ $t("main.note.source.0") }}
+                    <a
+                        href="https://gitea.svitan.dev/Streamer272/svitan.dev"
+                        target="_blank"
+                        class="underline"
+                    >
+                        {{ $t("main.note.source.1") }}
+                    </a>
+                    {{ $t("main.note.source.2") }}
+                </p>
+            </footer>
         </div>
 
         <div class="w-1 h-10 shrink-0" />
@@ -542,11 +538,7 @@ tr:last-of-type {
 }
 
 section {
-    margin-left: 1rem;
-}
-
-section h2 {
-    margin-left: -1rem;
+    margin-bottom: 2rem;
 }
 </style>