made mobile layout for bio

assets/svg/howdy.svg

@@ -25,15 +25,15 @@
      inkscape:deskcolor="#505050"
      inkscape:document-units="px"
      showgrid="false"
-     inkscape:zoom="1.9557888"
+     inkscape:zoom="1.7794374"
-     inkscape:cx="148.78907"
+     inkscape:cx="77.83359"
-     inkscape:cy="221.13839"
+     inkscape:cy="405.46524"
      inkscape:window-width="1440"
      inkscape:window-height="847"
      inkscape:window-x="0"
      inkscape:window-y="25"
      inkscape:window-maximized="0"
-     inkscape:current-layer="g15740" /><defs
+     inkscape:current-layer="g4098" /><defs
      id="defs520"><linearGradient
        inkscape:collect="always"
        id="linearGradient35336"><stop
@@ -72,29 +72,29 @@
        y2="54.803684"
        spreadMethod="reflect" /><mask
        maskUnits="userSpaceOnUse"
-       id="mask35340"><rect
+       id="mask36981"><rect
-         style="opacity:1;fill:url(#linearGradient35344);fill-opacity:1;stroke:none;stroke-width:1.05833;stroke-linecap:round"
+         style="opacity:1;fill:url(#linearGradient36985);fill-opacity:1;stroke:none;stroke-width:1.05833;stroke-linecap:round"
-         id="rect35342"
+         id="rect36983"
          width="99.810249"
          height="100.76689"
          x="0.58485931"
          y="0.043161567" /></mask><linearGradient
        inkscape:collect="always"
        xlink:href="#linearGradient35336"
-       id="linearGradient35344"
+       id="linearGradient36985"
        gradientUnits="userSpaceOnUse"
        x1="57.549629"
-       y1="62.317051"
+       y1="77.886894"
        x2="57.549629"
-       y2="106.586"
+       y2="113.3978"
        gradientTransform="matrix(0.93642929,0,0,0.93642929,1.5415071,0.99980934)" /></defs><g
      inkscape:label="Слой 1"
      inkscape:groupmode="layer"
      id="layer1"><g
        id="g5890"
        transform="matrix(1.0678863,0,0,1.0678863,-1.6461543,-1.0676827)"
-       style="stroke-width:0.936429;opacity:0.33916849"
+       style="stroke-width:0.936429;opacity:0.33791209"
-       mask="url(#mask35340)"><rect
+       mask="url(#mask36981)"><rect
          style="fill:#28283f;fill-opacity:1;stroke:none;stroke-width:0.991054;stroke-linecap:round;opacity:0"
          id="rect35253"
          width="117.98656"
@@ -520,9 +520,39 @@
            style="fill:#242a7a;fill-opacity:1;stroke:none;stroke-width:0.991055;stroke-linecap:round"
            d="M 12.260576,25.059735 C 11.30123,22.199954 10.183681,20.052087 9.9217982,14.053724 l 11.5563108,0.137575 c -0.414782,3.805903 -0.378668,7.686954 -2.889078,11.143586 L 12.810876,25.19731 Z"
            id="path14375"
-           sodipodi:nodetypes="cccccc" /></g></g><g
+           sodipodi:nodetypes="cccccc" /></g><rect
+         style="opacity:1;fill:#626fff;fill-opacity:1;stroke-width:0.991053;stroke-linecap:round"
+         id="rect3909"
+         width="24.222219"
+         height="17.625992"
+         x="51.337631"
+         y="76.42392"
+         rx="0.92653304"
+         ry="0.65281451" /><g
+         id="g11561"
+         transform="matrix(1.1183198,0.04014659,0,1.0116245,4.4094498,0.37163392)"
+         style="stroke-width:0.880405"><path
+           style="opacity:1;fill:#626fff;fill-opacity:1;stroke-width:0.931761;stroke-linecap:round"
+           d="m 24.408522,76.901275 c 0,0 7.854196,7.520873 7.030741,11.828178 -0.823454,4.307303 -1.710252,5.890871 -2.470366,5.700844 -0.760111,-0.19003 -3.547191,-1.456882 -3.547191,-1.456882 v -0.570087 l 2.977107,1.266855 c 0,0 0.886798,-5.574157 0.380057,-6.524298 -0.506743,-0.950142 -4.433691,-7.140816 -4.433691,-7.140816 z"
+           id="path9773"
+           sodipodi:nodetypes="csscccscc" /><path
+           style="opacity:1;fill:#6470ff;fill-opacity:1;stroke-width:0.931762;stroke-linecap:round"
+           d="m 24.960773,79.427013 c 0,0 2.857797,6.52272 2.695748,8.941114 -0.162049,2.418394 -2.668739,4.508365 -2.668739,4.508365 l 1.242376,-3.045385 c 0,0 0.670134,-1.343554 0.238003,-1.940687 -0.432131,-0.597136 -1.372346,-6.045013 -1.372346,-6.045013 z"
+           id="path19848"
+           sodipodi:nodetypes="csccscc" /><path
+           style="opacity:1;fill:#838dff;fill-opacity:1;stroke-width:0.931761;stroke-linecap:round"
+           d="m 11.706189,94.644642 c 0,0 0.188649,-13.537916 4.730315,-16.025019 1.002105,-0.548772 2.174621,-1.182798 3.002855,-1.727303 0.881363,-0.579434 2.863884,5.824412 2.24579,6.586546 -0.309404,0.381507 -0.990282,-6.770022 -0.584855,-6.842807 2.022234,-0.363046 3.442315,-0.0811 3.690219,0.662607 0.432541,1.29762 1.297619,16.589031 0.43254,17.129706 -0.86508,0.540675 -11.462301,1.297619 -13.516864,0.21627 z"
+           id="path9771"
+           sodipodi:nodetypes="cssssssc" /><path
+           style="opacity:1;fill:#ffffff;fill-opacity:1;stroke-width:0.931762;stroke-linecap:round"
+           d="m 19.851886,76.969535 0.306239,-1.492359 0.532877,-0.02486 4.142172,7.887547 0.038,0.538499 -1.960675,4.174042 c 0,0 -1.612954,-8.873054 -3.085619,-10.814115 z"
+           id="path14296"
+           sodipodi:nodetypes="cccccccc" /><path
+           style="opacity:1;fill:#a0a2ff;fill-opacity:1;stroke-width:0.931762;stroke-linecap:round"
+           d="m 12.796459,85.778938 -1.400071,1.726319 c 0,0 -1.184673,6.131412 -0.484638,6.84575 0.700036,0.714341 6.62341,1.07151 6.62341,0.773868 0,-0.297643 0.161548,-5.476601 0.161548,-5.476601 0,0 -2.100107,-4.107451 -4.900249,-3.869336 z"
+           id="path26483" /></g></g><g
        id="g4098"
-       transform="matrix(0.81394182,0,0,0.81730231,19.379908,30.942881)"
+       transform="matrix(0.81394182,0,0,0.81730231,19.379908,34.117883)"
        style="stroke-width:1.22606"><rect
          style="fill:#e25563;fill-opacity:1;stroke:none;stroke-width:0.122606;stroke-linecap:round"
          id="rect515"
@@ -541,13 +571,7 @@
          y="-8.2171659"
          ry="2.8003209"
          rx="3.5633552"
-         transform="scale(-1,1)" /><ellipse
+         transform="scale(-1,1)" /><path
-         style="mix-blend-mode:normal;fill:#000000;fill-opacity:0.072093;stroke-width:3.24395;stroke-linecap:round"
-         id="path7853"
-         cx="43.254681"
-         cy="83.761459"
-         rx="19.67112"
-         ry="2.2014" /><path
          id="path3942"
          style="fill:#535d6c;fill-opacity:1;stroke-width:0.648791;stroke-linecap:round"
          d="m 34.584242,54.487389 c -0.999682,-0.168955 -2.019946,-0.136835 -3.030543,0.200069 -0.955164,0.373851 -0.905805,3.950599 -1.456208,4.880962 0.906961,6.919366 0.608865,9.152154 2.081092,15.948411 0.114087,0.805574 0.549947,4.01861 1.124349,4.392858 0.74039,0.482395 1.887032,-0.09799 2.695382,0.05506 1.74984,0.87253 1.221151,-3.873455 1.745975,-5.021535 0.703563,-2.56644 1.093672,-3.114172 1.204074,-5.763762 0.146096,-2.998024 1.184315,-6.197637 1.543586,-8.983797 0.145809,-1.13075 0.321775,-3.14054 0.337337,-4.357466 -1.406607,-0.922387 -4.578905,-1.069238 -6.245044,-1.350803 z"

components/bio/BioHeading.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="$style.grid">
-    <div>
+    <div :class="$style.image">
       <img src="~/assets/svg/howdy.svg" />
     </div>
 
@@ -16,6 +16,19 @@
         numerous other frameworks for the most of my time, but I'm also capable
         of doing <b>Typescript</b> and <b>Golang</b> backend.
       </p>
+
+      <div :class="$style.buttons">
+        <UiActionButton
+          href="https://github.com/muerwre"
+          target="_blank"
+          variant="outline"
+        >
+          Visit my Github
+          <template v-slot:suffix>
+            <IconsArrowRight width="22" height="22" fill="currentColor" />
+          </template>
+        </UiActionButton>
+      </div>
     </div>
   </div>
 </template>
@@ -23,10 +36,17 @@
 <script lang="ts" setup></script>
 
 <style lang="scss" module>
+@import "@/assets/css/mixins";
+
 .grid {
   display: grid;
   grid-template-columns: 1fr 2fr;
   grid-column-gap: 40px;
+
+  @include desktop {
+    display: flex;
+    flex-direction: column-reverse;
+  }
 }
 
 .text {
@@ -35,5 +55,35 @@
   b {
     color: var(--color-text);
   }
+
+  h1 {
+    margin-top: 0;
+  }
+
+  @include desktop {
+    text-align: center;
+    padding-bottom: 20px;
+  }
+}
+
+.image {
+  text-align: center;
+
+  img {
+    width: 100%;
+
+    @include desktop {
+      max-width: 75vh;
+      max-height: 50vh;
+    }
+  }
+}
+
+.buttons {
+  margin-top: 50px;
+
+  @include desktop {
+    margin-top: 20px;
+  }
 }
 </style>

components/home/HomeHeader.vue

@@ -12,12 +12,8 @@
         </p>
 
         <div :class="$style.buttons">
-          <UiActionButton
+          <UiActionButton href="/bio" variant="outline">
-            href="https://github.com/muerwre"
+            Read about me
-            target="_blank"
-            variant="outline"
-          >
-            Visit my Github
             <template v-slot:suffix>
               <IconsArrowRight width="22" height="22" fill="currentColor" />
             </template>
@@ -46,7 +42,6 @@
   border-bottom: 2px solid var(--color-line);
 
   @include desktop {
-    // grid-template-columns: 1fr 1fr;
     grid-template-columns: 1fr;
     grid-template-rows: auto auto;
     column-gap: 20px;
@@ -102,10 +97,18 @@
   }
 }
 .desk {
-  width: 100%;
+  max-width: 100%;
+
+  @include desktop {
+    max-height: 50vh;
+  }
 }
 
 .buttons {
-  margin-top: 50px;
+  margin-top: 40px;
+
+  @include desktop {
+    margin-top: 20px;
+  }
 }
 </style>

layouts/content.vue

@@ -18,6 +18,10 @@
   display: flex;
   flex-direction: column;
   padding-top: 40px;
+
+  @include desktop {
+    padding-top: 10px;
+  }
 }
 
 .content {
@@ -36,6 +40,7 @@
   right: 20px;
   stroke: currentColor;
   stroke-width: 0.5px;
+  z-index: 12;
 
   @include tablet {
     stroke-width: 1.5px;

layouts/default.vue

@@ -92,6 +92,7 @@ export default defineComponent({
   z-index: 1;
   display: flex;
   flex-direction: column;
+  height: 100%;
 
   @include container;
 }

layouts/landing.vue

@@ -12,18 +12,32 @@
   </div>
 </template>
 
-<script lang="ts" setup></script>
-
 <style lang="scss" module>
 @import "@/assets/css/mixins";
 
 .header_container {
   position: sticky;
   top: 0;
-  background: var(--color-background);
+  z-index: 10;
+  backdrop-filter: blur(5px);
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--color-background);
+    z-index: 0;
+    opacity: 0.95;
+
+    @supports (backdrop-filter: blur(5px)) {
+      opacity: 0.85;
+    }
+  }
 }
 
 .header_content {
   @include container;
+  position: relative;
+  z-index: 1;
 }
 </style>

pages/bio.vue

@@ -11,10 +11,6 @@
     <section :class="$style.section">
       <BioProjects />
     </section>
-
-    <section :class="$style.section">
-      <BioCareer />
-    </section>
   </article>
 </template>
 
@@ -36,4 +32,10 @@ definePageMeta({ layout: "landing" });
     padding-bottom: 0;
   }
 }
+
+.heading {
+  @include desktop {
+    padding-top: 0;
+  }
+}
 </style>

pages/index.vue

@@ -1,17 +1,15 @@
 <template>
-  <NuxtLayout name="content">
+  <main :class="$style.main">
-    <main :class="$style.main">
+    <HomeHeader />
-      <HomeHeader />
 
-      <div :class="$style.reference">
+    <div :class="$style.reference">
-        <h1>Cheatsheet</h1>
+      <h1>Cheatsheet</h1>
 
-        <div :class="$style.grid">
+      <div :class="$style.grid">
-          <HomeContentList />
+        <HomeContentList />
-        </div>
       </div>
-    </main>
+    </div>
-  </NuxtLayout>
+  </main>
 </template>
 
 <script>