cleanup

Author: taqh

README.md

@@ -137,6 +137,7 @@ const projectsCollection = defineCollection({
     status: z.enum(["live", "dev"]),
     description: z.string(),
     image: z.string(),
+    draft: z.boolean().optional(), 
     preview: z
       .object({
         src: z.string(),
@@ -166,13 +167,6 @@ const projects = await getCollection("projects", ({ data }) => {
 });
 ```
 
-## References
-
-- [Astro Documentation](https://docs.astro.build/)
-- [TailwindCSS Documentation](https://tailwindcss.com/docs)
-- [TailwindCSS Typography](https://github.com/tailwindlabs/tailwindcss-typography)
-- [Learn Markdown](https://www.markdownguide.org/)
-
 ## License
 
-See the [License](LICENSE) file.
+See the [License](LICENSE.md) file.

src/components/ContactForm.astro

@@ -10,7 +10,7 @@
       autocomplete='off'
       autocapitalize='off'
       placeholder='Your name'
-      class='flex h-11 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-emerald-500 focus-visible:outline-offset-2'
+      class='flex h-11 w-full rounded-md border bg-background px-3 py-2 lg:text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-emerald-500 focus-visible:outline-offset-2'
     />
   </div>
   <div>
@@ -22,7 +22,7 @@
       id='email'
       autocomplete='off'
       placeholder='Your email'
-      class='flex h-11 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-emerald-500 focus-visible:outline-offset-2'
+      class='flex h-11 w-full rounded-md border bg-background px-3 py-2 lg:text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-emerald-500 focus-visible:outline-offset-2'
     />
   </div>
   <div class='lg:col-span-2'>

src/components/Footer.astro

@@ -3,7 +3,7 @@ import Container from './Container.astro';
 ---
 
 <footer>
-  <Container class='py-10 lg:py-16 border-t border-dashed'>
+  <Container class='py-14 lg:py-16 border-t border-dashed'>
     <div
       class='h-full flex justify-between items-center my-auto'
     >
@@ -15,10 +15,10 @@ import Container from './Container.astro';
       <div class='flex space-x-8'>
         <a
           target='_blank'
-          href='https://github.com/taqh/'
-          class='text-sm text-foreground hover:underline focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-emerald-500'
+          href='https://github.com/taqh/website'
+          class='text-sm text-foreground hover:underline underline-offset-2 decoration-dashed focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-emerald-500'
         >
-          Github
+          Source code
         </a>
       </div>
     </div>

src/components/Header.astro

@@ -8,13 +8,13 @@ import ThemeToggle from './ThemeToggle.astro';
     <nav
       class='sm:bg-background flex items-center justify-between h-full sm:px-6 py-6 md:py-8 lg:py-10 sm:-mb-10 md:-mb-14 lg:-mb-20'
     >
-      <a href="/" class="focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-emerald-500 rounded-full">
+      <a href="/" class="focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-emerald-500 hover:underline underline-offset-2">
         <span
           id='logo'
           aria-hidden='true'
-          class='font-bold font-mono text-lg select-none bg-background uppercase size-10 grid place-content-center'
+          class='font-bold font-mono text-lg select-none bg-background uppercase grid place-content-center'
         >
-          tq.
+          taqib.
         </span>
       </a>
       <div>

src/components/ProjectCard.astro

@@ -14,12 +14,12 @@ const { title, preview, links, description, status } = entry.data
 ---
 
 <li
-  class={`flex flex-col gap-4 border border-dashed rounded-lg backdrop-blur-md card z-10 bg-card`}
+  class={`flex flex-col gap-4 border border-dashed rounded-lg backdrop-blur-md card z-10 bg-card max-w-md`}
 >
   {
     preview && (
       <div class='relative group overflow-hidden z-10 rounded-t-lg'>
-        <Image src={preview.src} alt={preview.alt} width={500} height={240} />
+        <Image src={preview.src} alt={preview.alt} width={448} height={240} />
       </div>
     )
   }

src/pages/index.astro

@@ -28,59 +28,28 @@ const projects = await getCollection('projects', ({ data }) => {
 
 <Layout title={SITE.TITLE} description={SITE.DESCRIPTION}>
   <div class='divide-y divide-dashed'>
-    <!-- hero section -->
+    <!-- about section -->
     <Container class='border-t border-dashed'>
       <section
-        class='overflow-x-hidden sm:border-x sm:border-dashed sm:bg-background py-16 lg:py-24 flex items-center flex-col justify-center'
+        class='overflow-x-hidden sm:border-x sm:border-dashed sm:px-4 md:px-0 sm:bg-background py-14 md:py-16 lg:py-28 md:items-center flex flex-col justify-center'
       >
-        <div
-          class='inline-flex items-center rounded-lg border px-3 py-1 text-sm md:text-base font-medium mb-4 bg-background'
-        >
-          <span>Hi there, I&apos;m Taqib</span>
-        </div>
-        <h1 class='max-w-4xl text-4xl font-semibold md:text-5xl lg:text-6xl text-center'>
-          A
-          <span
-            class='inline-block underline underline-offset-2 decoration-dashed decoration-emerald-500'
-          >
-            Frontend
-          </span>
-          web developer crafting modern web applications.
+        <h1 class='text-3xl font-semibold md:text-4xl md:text-center mb-6'>
+          Hi there, I&apos;m Taqib
         </h1>
-        
-      </section>
-    </Container>
-
-    <!-- about section -->
-    <Container>
-      <section
-        id='about'
-        class='sm:border-x sm:border-dashed px-4 md:px-6 sm:bg-background space-y-12 py-8 md:py-12 lg:py-24'
-      >
-        <div class='mx-auto flex flex-col space-y-4'>
-          <h2
-            class='font-medium text-2xl leading-[1.1] sm:text-3xl md:text-4xl text-center mb-6'
+        <div class='space-y-4 md:text-center max-w-prose'>
+          <p
+            class='max-w-prose leading-normal text-muted-foreground sm:leading-7'
           >
-            About me
-          </h2>
-          <!--  -->
-          <div class='flex items-center justify-center'>
-            <div class='space-y-4 text-center max-w-prose'>
-              <p
-                class='max-w-prose leading-normal text-muted-foreground sm:text-lg sm:leading-7'
-              >
-                I'm a self-taught developer based in Abuja, Nigeria. I have a
-                passion for web development and love to create web applications
-                that are accessible, fast, and user-friendly.
-              </p>
-              <p
-                class='max-w-prose leading-normal text-muted-foreground sm:text-lg sm:leading-7'
-              >
-                Currently, learning about design systems and UI/UX fundamentals,
-                aiming to improve my web development skills and create visually appealing web experiences. 
-              </p>
-            </div>
-          </div>
+            I'm a self-taught developer based in Abuja, Nigeria. I have a
+            passion for web development and love to create web applications
+            that are accessible, fast, and user-friendly.
+          </p>
+          <p
+            class='max-w-prose leading-normal text-muted-foreground sm:leading-7'
+          >
+            Currently, learning about design systems and UI/UX fundamentals,
+            aiming to improve my web development skills and create visually appealing web experiences. 
+          </p>
         </div>
       </section>
     </Container>
@@ -91,16 +60,16 @@ const projects = await getCollection('projects', ({ data }) => {
         id='projects'
         class='sm:bg-background space-y-12 py-8 md:py-12 lg:py-24 sm:border-x sm:border-dashed sm:px-6 md:px-10 lg:px-16'
       >
-        <div class='mx-auto flex flex-col space-y-4 justify-center text-center'>
+        <div class='mx-auto flex flex-col space-y-4 justify-center md:text-center'>
           <h2
             class='font-semibold text-2xl leading-[1.1] sm:text-3xl md:text-4xl'
           >
             Projects
           </h2>
           <p
-            class='max-w-prose mx-auto leading-normal text-muted-foreground sm:text-lg sm:leading-7'
+            class='max-w-prose mx-auto leading-normal text-muted-foreground sm:leading-7'
           >
-            I Love learning and staying engaged through exciting new projects. Here
+            I love staying engaged through exciting new projects, here
             are a few I've spent my time on.
           </p>
         </div>
@@ -122,18 +91,18 @@ const projects = await getCollection('projects', ({ data }) => {
     <Container>
       <section
         id='skills'
-        class='sm:border-x sm:border-dashed sm:px-14 py-8 md:py-12 lg:py-28 space-y-14 lg:space-y-20'
+        class='sm:border-x sm:border-dashed sm:px-14 py-14 md:py-16 lg:py-28 space-y-14 lg:space-y-20'
       >
         <div
-          class='mx-auto flex max-w-[58rem] flex-col items-center justify-center gap-4 text-center'
+          class='mx-auto flex max-w-prose flex-col items-center justify-center gap-4 text-center'
         >
           <h2
-            class='font-medium text-3xl leading-[1.1] sm:text-3xl md:text-5xl'
+            class='font-medium text-3xl leading-[1.1] md:text-4xl'
           >
             Stack
           </h2>
           <p
-            class='max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7'
+            class='leading-normal text-muted-foreground sm:leading-7'
           >
             The technologies I work with most frequently
           </p>
@@ -208,18 +177,18 @@ const projects = await getCollection('projects', ({ data }) => {
         class='sm:border-x sm:border-dashed py-8 md:py-12 lg:py-24 space-y-10'
       >
         <div
-          class='mx-auto flex max-w-[58rem] flex-col items-center justify-center gap-4 text-center'
+          class='mx-auto flex max-w-[58rem] flex-col md:items-center justify-center gap-4 text-center'
         >
           <h2
-            class='font-medium text-3xl leading-[1.1] sm:text-3xl md:text-5xl'
+            class='font-medium text-3xl leading-[1.1] md:text-4xl'
           >
             Get in touch
           </h2>
           <p
-            class='max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7'
+            class='max-w-prose leading-normal text-muted-foreground sm:leading-7'
           >
             I'm actively seeking new opportunities to apply my skills and create
-            value. Whether you have a project in mind, a job opportunity, or
+            value. Whether you have a project in mind or
             just want to connect, I'd love to hear from you.
           </p>
         </div>
@@ -232,7 +201,7 @@ const projects = await getCollection('projects', ({ data }) => {
           >
             <div>
               <h3 class='font-semibold text-lg'>
-                You can contact me via email at
+                You can email me at
               </h3>
               <p
                 class='w-fit relative after:absolute after:bg-foreground after:h-px after:w-1/2 after:top-auto after:bottom-0 after:left-0 after:scale-x-0 after:origin-right hover:after:scale-x-100 lg:hover:after:origin-left transition after:transition after:duration-300'

src/pages/projects/[...slug].astro

@@ -37,11 +37,11 @@ const { Content } = await entry.render();
         </div>
         <div class='grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4'>
           {entry.data.links.repo && <Link href={entry.data.links.repo} external> View repository </Link>}
-          {entry.data.links.live && <Link href={entry.data.links.live} external> Visit the site </Link>}
+          {entry.data.links.live && <Link href={entry.data.links.live} external> Visit website </Link>}
         </div>
       </section>
       <article
-        class='prose xl:prose-lg prose-taqib max-w-3xl prose-headings:font-mono mx-auto'
+        class='prose prose-taqib max-w-3xl prose-headings:font-mono mx-auto'
       >
         <Content />
       </article>

src/pages/projects/index.astro

@@ -27,7 +27,7 @@ const projects = await getCollection('projects', ({ data }) => data.draft !== tr
                 variant='card'
               >
                 <h2 class='font-semibold tracking-wide text-lg italic'>{project.data.title}</h2>
-                <p class='text-muted-foreground'>{project.data.description}</p>
+                <p class='text-muted-foreground font-mono text-sm'>{project.data.description}</p>
               </Link>
             </li>
           ))