feat: update about page

jesulim · Oct 11, 2023 · a3c6f9d · a3c6f9d
1 parent 201194b
commit a3c6f9d
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 50 deletions.
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -1,60 +1,76 @@
 ---
-import MainLayout from '@/layouts/main-layout.astro';
+import MainLayout from "@/layouts/main-layout.astro";
 ---
 
 <MainLayout
-	title="About Me"
-	description="Lorem ipsum dolor sit amet"
+  title="About Me"
+  description="Lorem ipsum dolor sit amet"
+  mainClass="container py-10"
 >
-	<p>
-		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-		labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo
-		viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam
-		adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus
-		et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus
-		vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque
-		sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
-	</p>
+  <section class="space-y-5">
+    <h1 class="cont">About page</h1>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo
+      integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu
+      turpis egestas pretium. Euismod elementum nisi quis eleifend quam
+      adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus
+      sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna
+      fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet
+      mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer
+      quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit
+      amet.
+    </p>
 
-	<p>
-		Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non
-		tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non
-		blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna
-		porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis
-		massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc.
-		Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis
-		bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra
-		massa massa ultricies mi.
-	</p>
+    <p>
+      Morbi tristique senectus et netus. Id semper risus in hendrerit gravida
+      rutrum quisque non tellus. Habitasse platea dictumst quisque sagittis
+      purus sit amet. Tellus molestie nunc non blandit massa. Cursus vitae
+      congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna
+      porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt
+      lobortis. In cursus turpis massa tincidunt dui ut ornare lectus. Integer
+      feugiat scelerisque varius morbi enim nunc. Bibendum neque egestas congue
+      quisque egestas diam. Cras ornare arcu dui vivamus arcu felis bibendum.
+      Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et
+      pharetra pharetra massa massa ultricies mi.
+    </p>
 
-	<p>
-		Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl
-		suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet
-		nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae
-		turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem
-		dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat
-		semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus
-		vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum
-		facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam
-		vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla
-		urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim.
-	</p>
+    <p>
+      Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque.
+      Diam sit amet nisl suscipit. Lacus viverra vitae congue eu consequat ac
+      felis donec. Egestas integer eget aliquet nibh praesent tristique magna
+      sit amet. Eget magna fermentum iaculis eu non diam. In vitae turpis massa
+      sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget
+      lorem dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed
+      viverra. Posuere ac ut consequat semper viverra nam. Laoreet suspendisse
+      interdum consectetur libero id faucibus. Diam phasellus vestibulum lorem
+      sed risus ultricies tristique. Rhoncus dolor purus non enim praesent
+      elementum facilisis. Ultrices tincidunt arcu non sodales neque. Tempus
+      egestas sed sed risus pretium quam vulputate. Viverra suspendisse potenti
+      nullam ac tortor vitae purus faucibus ornare. Fringilla urna porttitor
+      rhoncus dolor purus non. Amet dictum sit amet justo donec enim.
+    </p>
 
-	<p>
-		Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper
-		viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc
-		scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur
-		gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus
-		pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim
-		blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id
-		cursus metus aliquam eleifend mi.
-	</p>
+    <p>
+      Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere
+      ac ut consequat semper viverra. Tellus mauris a diam maecenas sed enim ut
+      sem viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris
+      in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur
+      gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas
+      tellus rutrum tellus pellentesque eu. Fusce ut placerat orci nulla
+      pellentesque dignissim enim sit amet. Ut enim blandit volutpat maecenas
+      volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id
+      cursus metus aliquam eleifend mi.
+    </p>
 
-	<p>
-		Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta
-		nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam
-		tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci
-		ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar
-		proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.
-	</p>
+    <p>
+      Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus
+      imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu
+      cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum.
+      Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit
+      libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed
+      pulvinar proin gravida. Egestas integer eget aliquet nibh praesent
+      tristique magna.
+    </p>
+  </section>
 </MainLayout>
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -85,6 +85,30 @@
     @apply border-border;
   }
 
+  /* If you want a custom scrollbar - By @diomed */
+  /* * {
+    @apply border-border;
+    --sb-track-color: #ffffff;
+    --sb-thumb-color: #e2e3f1;
+    --sb-size: 10px;
+
+    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
+  }
+
+  ::-webkit-scrollbar {
+    width: var(--sb-size)
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--sb-track-color);
+    border-radius: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--sb-thumb-color);
+    border-radius: 10px;
+  } */
+
   html {
     /* scroll-padding-top: 4rem; */
     @apply scroll-pt-16 lg:scroll-pt-0;