fix: commit to save

Author: camarm-dev

assets/css/base.css

@@ -142,6 +142,7 @@ figcaption {
   gap: 1em;
   width: 100%;
   flex: none;
+  margin-bottom: 10em;
 }
 
 .col.half {
@@ -382,8 +383,8 @@ body.light .socials a.gh {
   position: fixed;
   right: 2em;
   bottom: 2em;
-  height: 3.5em;
-  width: 3.5em;
+  height: 4em;
+  width: 4em;
   border: .55px solid var(--black-dark-alt);
   background-color: var(--black-alt);
   border-radius: 50%;

assets/css/landing.css

@@ -1,5 +1,5 @@
 .landing {
-  padding-top: 10vh;
+  padding-top: 0;
   text-align: left;
   display: flex;
   flex-direction: column;

assets/css/navbar.css

@@ -5,142 +5,12 @@
   max-height: 6em;
   display: flex;
   flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 0 2em .5em .8em;
-  position: fixed;
-  background-color: var(--black-50);
-  z-index: 900;
-  backdrop-filter: saturate(140%) blur(5px);
-}
-
-.nav-screen {
-  display: none;
-}
-
-.nav .nav-content {
-  max-width: 1000px;
-  width: 100%;
-  max-height: 6em;
-  display: flex;
-  flex-direction: row;
   justify-content: space-between;
   align-items: center;
+  padding: .5em 3em;
+  background-color: transparent;
 }
 
-.nav.active {
-  height: 5em;
-  max-height: 5em;
-  border-bottom: 1px solid var(--white);
-}
-
-.nav a {
-  color: var(--white);
-  font-weight: bold;
-  text-decoration: none;
-}
-
-.nav .item.logo, .nav .item.logo a {
-  display: flex;
-  align-items: center;
-}
-
-.nav .item.logo {
-  padding-left: .5em;
-  width: 20%;
-  margin: .2em 0;
-  padding-top: .5em;
-  padding-bottom: .5em;
-}
-
-.nav .item.logo img {
-  height: 2em;
-}
-
-.nav .items-stacked {
-  margin-left: auto;
-  display: flex;
-  flex-direction: row;
-  justify-content: right;
-  width: max-content;
-  align-items: center;
-}
-
-.nav .item {
-  width: max-content;
-  font-size: 1.3em;
-  margin: 0 .8em;
-  transition: .2s ease-in-out;
-}
-
-.nav .item:not(.logo) a:before {
-  width: 0;
-  display: block;
-  content: "";
-  height: .15em;
-  position: relative;
-  transform: translate(0, 1.4em);
-  background: linear-gradient(45deg, var(--blue), var(--purple), var(--pink));
-  transition: .3s ease-in-out;
-}
-
-.nav .item:not(.logo):hover a:before {
-  width: 100%;
-}
-
-
-.nav .burger {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 5em;
-  width: 2em;
-  cursor: pointer;
-  transition: .5s ease-in-out;
-}
-
-.nav .burger span {
-  height: .2em;
-  width: 2em;
-  margin-top: .2em;
-  margin-bottom: .2em;
-  background-color: var(--white);
-  transition: .5s ease-in-out;
-}
-
-.nav .burger span:nth-child(2) {
-  margin-left: .5em;
-  margin-top: .1em;
-}
-
-@media (max-width: 1500px) {
-  .nav .burger {
-    display: flex;
-  }
-
-  .nav.expanded .items-stacked {
-    opacity: 1;
-    display: flex;
-    position: absolute;
-    background: var(--black-dark-alt);
-    width: 100vw;
-    height: 6em;
-    border-bottom-left-radius: 20px;
-    border-bottom-right-radius: 20px;
-  }
-
-  .nav.expanded .burger span:nth-child(1) {
-    rotate: 45deg;
-  }
-
-  .nav.expanded .burger span:nth-child(2) {
-    display: none;
-  }
-
-  .nav.expanded .burger span:nth-child(3) {
-    rotate: -45deg;
-    position: absolute;
-    width: 2em;
-  }
+.nav .logo img {
+  max-height: 3.5em;
 }

assets/images/icon_outline.png

@@ -235,43 +235,6 @@ import LinuxIcon from '@/assets/icons/linux.png'
       </div>
     </div>
   </section>
-  <section>
-
-      <div class="content drawer">
-        <h2 class="title">
-          Skills 💾
-        </h2>
-        <p>
-          <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>
-  </section>
   <section class="about">
     <div class="drawer" style="width: 100%; margin-top: 1em; margin-bottom: 1em;">
       <h2 class="title">

components/AboutSection.vue

@@ -6,32 +6,15 @@ import OutlinedLogo from '@/assets/images/icon_outline.png'
     ref="navbar"
     class="nav"
   >
+    <div class="nav-start"></div>
     <div class="nav-content">
-      <div class="item logo">
+      <div class="logo">
         <a href="/">
           <img :src="OutlinedLogo" alt="icon">
         </a>
       </div>
-      <div class="items-stacked">
-        <div
-          class="burger"
-          @click="expandNavbar()"
-        >
-          <span />
-          <span />
-          <span />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="nav-screen">
-    Where the links should go
-    <div class="item">
-      <a href="https://cv.camarm.fr" target="_blank">
-        Resume <ExternalLink style="height: 20px; color: var(--grey); margin-bottom: -3px;" />
-      </a>
     </div>
-    // TODO: project, about, contact
+    <div class="nav-end"></div>
   </div>
 </template>
 

components/NavBar.vue

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import AcknowledgementsSection from '@/components/AcknowledgementsSection.vue'
+import AcknowledgementsSection from '~/components/FooterSection.vue'
 
 describe('AcknowledgementsSection section', () => {
   const page = mount(AcknowledgementsSection)