[Fix] #7 HTML semantic of AboutSection.vue

components/AboutSection.vue

@@ -5,36 +5,23 @@ export default defineComponent({
 </script>
 <template>
   <section class="about">
-    <article>
-      <div class="content">
-        <h2>Welcome !</h2>
+    <div class="col left half">
+
+      <div class="content drawer">
+        <h2 class="title">Welcome ! 👨‍💻</h2>
         <p>
-          Welcome to my website !
+          Welcome on my website !
           I’m a french 15 years old junior developer and growing sysadmin passionated of Linux, servers infrastructures
           and open source.
         </p>
       </div>
-      <div class="media">
-        <i>👨‍💻</i>
+
+      <div class="media drawer">
+        <img src="../assets/images/illustrations/gradient1.png" alt="Gradient"/>
       </div>
-    </article>
-    <article>
-      <div class="media purple">
-        <i>🗒️</i>
-      </div>
-      <div class="content">
-        <h2>My objectives</h2>
-        <p>
-          I wanna use and administrate servers but also code in my future job. I really enjoy making these on my free
-          time and absolutely want to make them my job.<br>
-          Actually in tenth grade, I want to make an informatics BUT after the high school. I’m also hyped to study at
-          school 42. I think the devops job is a good option to balance between servers and code.
-        </p>
-      </div>
-    </article>
-    <article>
-      <div class="content">
-        <h2>My engagements</h2>
+
+      <div class="content drawer">
+        <h2 class="title">My engagements 👊</h2>
         <p>
           I'm always trying to use open source and privacy respectives tools. That’s why I host alternatives to GAFAM's
           services on my server.
@@ -44,70 +31,95 @@ export default defineComponent({
           projects !
         </p>
       </div>
-      <div class="media pink">
-        <i>👊</i>
-      </div>
-    </article>
-    <article>
-      <div class="media purple">
-        <i>💾</i>
+
+      <div class="media drawer">
+        <img src="../assets/images/illustrations/gradient3.png" alt="Gradient"/>
       </div>
-      <div class="content">
-        <h2>Skills</h2>
+
+      <div class="content drawer">
+        <h2 class="title">Experiences 🔮</h2>
         <p>
-          Since I’ve started coding, I made a lot of web applications and PWA, with dynamic javascript and a Python
-          backend in Flask.
-          As database, I mostly use Mongodb and I can't separate it. By working on Linux, I know this OS and the use of
-          the shell.
-          With my server I learnt how to properly deploy and maintain applications and their load management.
-          I'm currently learning Ruby and Rust.
-          You can check
-          <NuxtLink to="/work">
-            my projects
-          </NuxtLink>
-          to see me in action.
+          + 20 projects<br>
+          + 1.3 millions lines of code<br>
+          + 2000 github commits<br>
+          + 200 issues resolved<br>
+          + 50 PR merged<br><br>
+          + 10 self-hosted services online<br>
+          + 15 web-applications online<br><br>
+          + 3 years developing applications<br>
+          + 2 years managing my own infrastructure<br>
         </p>
       </div>
-    </article>
-    <article>
-      <div class="content">
-        <h2>Experiences</h2>
+
+    </div>
+
+    <div class="col right half">
+
+      <div class="media drawer">
+        <img src="../assets/images/illustrations/gradient.png" alt="Gradient"/>
+      </div>
+
+      <div class="content drawer">
+        <h2 class="title">My objectives 🗒️</h2>
         <p>
-          Last year I made a portfolio for Ondine CAMPONOVO. It was my first experience with a client.
-          I did a training period at a hardware maintenance company where I learnt a lot of things on hardware and
-          clients relations.
-          It was my first experience in company. For 3 years now, I manage self-hosted services on my home server.
+          I wanna use and administrate servers but also code in my future job. I really enjoy making these on my free
+          time and absolutely want to make them my job.<br>
+          Actually in tenth grade, I want to make an informatics BUT after the high school. I’m also hyped to study at
+          school 42. I think the devops job is a good option to balance between servers and code.
         </p>
       </div>
-      <div class="media blue">
-        <i>🔮</i>
+
+      <div class="media drawer">
+        <img src="../assets/images/illustrations/gradient2.png" alt="Gradient"/>
       </div>
-    </article>
-    <article>
-      <div class="media pink">
-        <i>👥</i>
-      </div>
-      <div class="content">
-        <h2>Contact me</h2>
+
+      <div class="content drawer">
+        <h2 class="title">Skills 💾</h2>
         <p>
-          I'm not a professional but I can make you websites, webapps ect... for 8€ per hour.
-          I can also sell hosting services (variable price). I'm also available if you want to collaborate with me.
-          So don't hesitate to contact me at <a href="mailto:[email protected]">[email protected]</a>
+          <b>Languages</b><br>
+          <span class="tags">
+            <span>Typescript</span>
+            <span>Python</span>
+            <span>Ruby</span>
+          </span><br>
+          <b>Frameworks</b><br>
+          <span class="tags">
+            <span>Vue</span>
+            <span>Ionic</span>
+            <span>Flask</span>
+            <span>FastApi</span>
+          </span><br>
+          <b>Databases</b><br>
+          <span class="tags">
+            <span>MongoDB</span>
+            <span>CouchDB</span>
+            <span>Sqlite</span>
+          </span><br>
+          <b>OS</b><br>
+          <span class="tags">
+            <span>Proxmox</span>
+            <span>Linux</span>
+          </span><br>
+          You can check <NuxtLink to="/work">my projects</NuxtLink> to see me in action.
         </p>
       </div>
-    </article>
-    <article>
-      <div class="content">
-        <h2>
-          Discover my
-          <NuxtLink to="/work">
-            work
-          </NuxtLink>
-        </h2>
+
+      <div class="media drawer">
+        <img src="../assets/images/illustrations/gradient4.png" alt="Gradient"/>
+      </div>
+
+    </div>
+
+  </section>
+  <section class="about">
+    <div class="drawer" style="width: 100%; margin-top: 1em;">
+      <h2 class="title">Contact me 👥</h2>
+      <p>
+        You can reach me at <a href="mailto:[email protected]">[email protected]</a> to contact me. Please prefer use <a href="mailto:[email protected]">[email protected]</a> to contact me about software I develop.
+      </p>
+      <div class="socials">
+
       </div>
-      <button id="to-top">
-        <i class="fas fa-arrow-up fa-2x" />
-      </button>
-    </article>
+    </div>
   </section>
 </template>