💄 Changes UI structure

Signed-off-by: Ash Svitan <selfsigned-ash@proton.me>

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>

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,26 +19,22 @@
                 </button>
             </div>
 
-            <!-- <NuxtImg
-                src="/images/selfie.png"
-                alt="Selfie"
-                class="lg:float-right w-80 mb-4 lg:mb-0"
-                /> -->
-
-            <h1 class="text-xl mr-12">
+            <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") }}
+                    >, {{ $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>
 
-            <div
-                class="flex items-center justify-center flex-wrap gap-x-4 my-4"
-            >
+            <section>
+                <BashPrompt>ls .</BashPrompt>
+                <div class="flex items-center flex-wrap gap-x-4">
                     <ul>
                         <li>
                             <a href="#experience" class="underline">
@@ -76,12 +72,21 @@
                         </li>
                     </ul>
                 </div>
-            <div class="h-4" />
+            </section>
+
+            <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,8 +485,9 @@
                     </li>
                 </ul>
             </section>
-            <div class="h-8" />
 
+            <footer>
+                <BashPrompt>cat footer</BashPrompt>
                 <p>
                     {{ $t("main.note.source.0") }}
                     <a
@@ -504,6 +499,7 @@
                     </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>