feat: add progres bar and new posts

components/Section.tsx

@@ -40,7 +40,7 @@ const Section = ({ head, desc, pic, value }: sectionProps) => {
                       {limitTo120Characters(desc) + "... .."}
                     </p>
                     <div className="p-4 flex justify-evenly">
-                      <Link href={`/read/${slugify(head, { lower: true, remove: /[*+~.()'"?!:@]/g })}`}>
+                      <Link href={`/read/${slugify(head, { lower: true, remove: /[*+~.(),'"?!:@]/g })}`}>
                         <button className="bg-black text-white px-4 py-3 font-semibold rounded underline decoration-neutral-400">
                           Open
                         </button>

components/quote/Quote.tsx

@@ -91,7 +91,7 @@ export default function Quote() {
     <Draggable onDrag={handleDrag} bounds="parent" defaultPosition={position}>
       <div
         className={cn(
-          "text-center z-10 absolute max-w-[500px] p-10 hover:border-1 hover:rounded-lg hover:cursor-move",
+          "text-center z-10 absolute max-w-[500px] p-5 hover:border-1 hover:rounded-lg hover:cursor-move",
           {
             "--local-pixel1": style === "pixel",
             "--local-tektur": style === "bold",
@@ -102,7 +102,7 @@ export default function Quote() {
       >
         {quote && (
           <div
-            className="text-xs md:text-2xl text-white text-opacity-95"
+            className="text-xs w-20 md:w-full text-left md:text-center md:text-2xl text-white text-opacity-95"
             style={{
               textShadow: neonGlowEnabled
                 ? getNeonGlowStyle(selectedNeonGlowStyle)
@@ -114,11 +114,11 @@ export default function Quote() {
             {progress && (
               <div className="text-white flex flex-col">
                 {" "}
-                <span className="text-2xl md:text-5xl">
+                <span className="text-2xl md:text-2xl">
                   {currDate.getFullYear()}
                   <span className="text-xs">is</span>
                 </span>
-              <span className="mt-2 md:mt-10">
+              <span className="mt-2 md:mt-5">
                 <ProgressBar
                   completed={yearProgress}
                   bgColor="#ffff"
@@ -129,7 +129,7 @@ export default function Quote() {
                   transitionDuration=""
                   maxCompleted={100}
                 /></span>
-                <span className="text-xs md:text-4xl">
+                <span className="text-xs md:text-2xl">
                   {yearProgress}
                   {yearProgress.toString().length == 8 ? "0" : ""}%
                 </span>

content/blog/ancient-temple.mdx

@@ -0,0 +1,16 @@
+---
+title: "ancient temple"
+publishedAt: "2024-01-24"
+summary: "// --// // --//  //"
+tags: ["Interstellar", "industrial", "Spaceship", "Mars"]
+---
+
+<Alert type="warning">
+  Sorry, this post is still under construction.<br/>
+  <br/>
+  **Wanna contribute?? hit me up at <u>[@kungfukon](https://twitter.com/kungfukon)</u>**
+</Alert>
+
+## Post not written yet
+Wanna see your story here?
+<Tweet id="1750366514962935908" theme="light" />

content/blog/aws-east-mars.mdx

@@ -0,0 +1,16 @@
+---
+title: "aws-east-mars"
+publishedAt: "2024-01-24"
+summary: "// --// // --//  //"
+tags: ["Interstellar", "industrial", "Spaceship", "Mars"]
+---
+
+<Alert type="warning">
+  Sorry, this post is still under construction.<br/>
+  <br/>
+  **Wanna contribute?? hit me up at <u>[@kungfukon](https://twitter.com/kungfukon)</u>**
+</Alert>
+
+## Post not written yet
+Wanna see your story here?
+<Tweet id="1750366514962935908" theme="light" />

content/blog/build-more-build-fast.mdx

@@ -0,0 +1,16 @@
+---
+title: "Build more, build fast!"
+publishedAt: "2024-01-24"
+summary: "The only way out is forward.... .."
+tags: ["Interstellar", "industrial", "Spaceship", "Mars"]
+---
+
+<Alert type="warning">
+  Sorry, this post is still under construction.<br/>
+  <br/>
+  **Wanna contribute?? hit me up at <u>[@kungfukon](https://twitter.com/kungfukon)</u>**
+</Alert>
+
+## Post not written yet
+Wanna see your story here?
+<Tweet id="1750366514962935908" theme="light" />

content/blog/fly-through.mdx

@@ -0,0 +1,16 @@
+---
+title: "fly-through"
+publishedAt: "2024-01-24"
+summary: "// --// // --//  //"
+tags: ["Interstellar", "industrial", "Spaceship", "Mars"]
+---
+
+<Alert type="warning">
+  Sorry, this post is still under construction.<br/>
+  <br/>
+  **Wanna contribute?? hit me up at <u>[@kungfukon](https://twitter.com/kungfukon)</u>**
+</Alert>
+
+## Post not written yet
+Wanna see your story here?
+<Tweet id="1750366514962935908" theme="light" />

content/blog/industrial-revolution-x.mdx

@@ -0,0 +1,16 @@
+---
+title: "industrial-revolution"
+publishedAt: "2024-01-24"
+summary: "// --// // --//  //"
+tags: ["Interstellar", "industrial", "Spaceship", "Mars"]
+---
+
+<Alert type="warning">
+  Sorry, this post is still under construction.<br/>
+  <br/>
+  **Wanna contribute?? hit me up at <u>[@kungfukon](https://twitter.com/kungfukon)</u>**
+</Alert>
+
+## Post not written yet
+Wanna see your story here?
+<Tweet id="1750366514962935908" theme="light" />

content/blog/night-shift.mdx

@@ -0,0 +1,16 @@
+---
+title: "Nnightshift"
+publishedAt: "2024-01-24"
+summary: "// --// // --//  //"
+tags: ["Interstellar", "industrial", "Spaceship", "Mars"]
+---
+
+<Alert type="warning">
+  Sorry, this post is still under construction.<br/>
+  <br/>
+  **Wanna contribute?? hit me up at <u>[@kungfukon](https://twitter.com/kungfukon)</u>**
+</Alert>
+
+## Post not written yet
+Wanna see your story here?
+<Tweet id="1750366514962935908" theme="light" />

content/blog/portal.mdx

@@ -0,0 +1,16 @@
+---
+title: "Portal"
+publishedAt: "2024-01-24"
+summary: "// --// // --//  //"
+tags: ["Interstellar", "industrial", "Spaceship", "Mars"]
+---
+
+<Alert type="warning">
+  Sorry, this post is still under construction.<br/>
+  <br/>
+  **Wanna contribute?? hit me up at <u>[@kungfukon](https://twitter.com/kungfukon)</u>**
+</Alert>
+
+## Post not written yet
+Wanna see your story here?
+<Tweet id="1750366514962935908" theme="light" />

content/blog/quick-fix.mdx

@@ -0,0 +1,16 @@
+---
+title: "Quick Fix"
+publishedAt: "2024-01-24"
+summary: "still under construction"
+tags: ["Interstellar", "industrial", "Spaceship", "Mars"]
+---
+
+<Alert type="warning">
+  Sorry, this post is still under construction.<br/>
+  <br/>
+  **Wanna contribute?? hit me up at <u>[@kungfukon](https://twitter.com/kungfukon)</u>**
+</Alert>
+
+## Post not written yet
+Wanna see your story here?
+<Tweet id="1750366514962935908" theme="light" />

content/blog/sky-temples.mdx

@@ -0,0 +1,16 @@
+---
+title: "sky-temples"
+publishedAt: "2024-01-24"
+summary: "// --// // --//  //"
+tags: ["Interstellar", "industrial", "Spaceship", "Mars"]
+---
+
+<Alert type="warning">
+  Sorry, this post is still under construction.<br/>
+  <br/>
+  **Wanna contribute?? hit me up at <u>[@kungfukon](https://twitter.com/kungfukon)</u>**
+</Alert>
+
+## Post not written yet
+Wanna see your story here?
+<Tweet id="1750366514962935908" theme="light" />

types/types.ts

@@ -11,7 +11,7 @@ export type ImageOption = {
 
 // the slug and the head should be identical in lowercase!
 const generateSlug = (head: string): string => {
-  return `/${slugify(head, { lower: true, remove: /[*+~.()'"!:?@]/g })}`;
+  return `/${slugify(head, { lower: true, remove: /[*+~.(),'"!:?@]/g })}`;
 };
 
 export const ImgData: ImageOption[] = [
@@ -59,11 +59,67 @@ export const ImgData: ImageOption[] = [
   },
   {
     head: "Portal",
-    desc: "We messed up big time!",
+    desc: "We messed up big time! This was probably due to the quaternion in the",
     src: "/pics/portal.jpg",
     value: "portal.jpg",
     label: "portal.jpg",
   },
+  {
+    head: "Build more, build fast!",
+    desc: "The only way out is forward.",
+    src: "/pics/construction.jpg",
+    value: "construction.jpg",
+    label: "construction.jpg",
+  },
+  {
+    head: "Night shift",
+    desc: "Sorry, this post is still under construction. Wanna contribute?? hit me up at",
+    src: "/pics/nightshift.jpg",
+    value: "nightshift.jpg",
+    label: "nightshift.jpg",
+  },
+  {
+    head: "Sky temples",
+    desc: "Sorry, this post is still under construction. Wanna contribute?? hit me up at",
+    src: "/pics/temples.jpg",
+    value: "temples.jpg",
+    label: "temples.jpg",
+  },
+  {
+    head: "Fly-through",
+    desc: "Sorry, this post is still under construction. Wanna contribute?? hit me up at",
+    src: "/pics/fly-through.jpg",
+    value: "fly-through.jpg",
+    label: "fly-through.jpg",
+  },
+  {
+    head: "Industrial revolution X",
+    desc: "Sorry, this post is still under construction. Wanna contribute?? hit me up at",
+    src: "/pics/industrial-revolution.jpg",
+    value: "industrial-revolution.jpg",
+    label: "industrial-revolution.jpg",
+  },
+  {
+    head: "Ancient Temple",
+    desc: "Sorry, this post is still under construction. Wanna contribute?? hit me up at",
+    src: "/pics/ancient-temple.jpg",
+    value: "ancient-temple.jpg",
+    label: "ancient-temple.jpg",
+  },
+  {
+    head: "Quick-fix",
+    desc: "Sorry, this post is still under construction. Wanna contribute?? hit me up at",
+    src: "/pics/quick-fix.jpg",
+    value: "quick-fix.jpg",
+    label: "quick-fix.jpg",
+  },
+  {
+    head: "aws-east-mars",
+    desc: "Sorry, this post is still under construction. Wanna contribute?? hit me up at",
+    src: "/pics/data-centres.jpg",
+    value: "data-centres.jpg",
+    label: "data-centres.jpg",
+  },
 ];
 
 export const draggableStyles: string[] = [