Complete website redesign

morr0ne · Jul 14, 2024 · 413309f · 413309f
1 parent c1c4868
commit 413309f
Show file tree

Hide file tree

Showing 11 changed files with 79 additions and 76 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
diff --git a/src/components/FormattedDate.astro b/src/components/FormattedDate.astro
@@ -6,6 +6,6 @@ interface Props {
 const { date } = Astro.props;
 ---
 
-<time datetime={date.toISOString()}>
+<time class="text-sm text-gray-500" datetime={date.toISOString()}>
   {date.toISOString().split('T')[0]}
 </time>
diff --git a/src/components/Header.astro b/src/components/Header.astro
diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro
diff --git a/src/components/Link.astro b/src/components/Link.astro
@@ -0,0 +1,10 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+type Props = HTMLAttributes<'a'>;
+
+const { href, ...attrs } = Astro.props;
+---
+
+<a href={href} {...attrs} class="text-white hover:underline">
+  <slot />
+</a>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
@@ -1,7 +1,4 @@
 ---
-import Footer from '@components/Footer.astro';
-import Header from '@components/Header.astro';
-
 interface Props {
   title: string;
   description: string;
@@ -13,7 +10,12 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 const { title, description } = Astro.props;
 ---
 
-<!doctype html>
+<style>
+  body {
+    background: linear-gradient(135deg, #0e0e0e, #2e2e2e);
+  }
+</style>
+
 <html lang="en">
   <head>
     <!-- Global Metadata -->
@@ -44,13 +46,9 @@ const { title, description } = Astro.props;
     <meta property="twitter:description" content={description} />
     <!-- <meta property="twitter:image" content={new URL(image, Astro.url)} /> -->
   </head>
-  <body class="bg-neutral-900 text-white font-mono">
-    <div class="max-w-5xl m-auto h-screen flex flex-col justify-between">
-      <Header />
-      <main class="flex-1">
-        <slot />
-      </main>
-      <Footer />
-    </div>
+  <body class="bg-neutral-900 font-mono text-white">
+    <main class="m-auto flex h-screen max-w-5xl flex-col justify-between">
+      <slot />
+    </main>
   </body>
 </html>
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -5,27 +5,26 @@ import Base from './Base.astro';
 
 type Props = CollectionEntry<'blog'>['data'];
 
-const { title, description, pubDate, updatedDate } = Astro.props;
+const { title, description, pubDate, updatedDate: _ } = Astro.props;
 ---
 
 <Base title={title} description={description}>
-  <article>
-    <div class="prose">
-      <div class="title">
-        <div class="date">
-          <FormattedDate date={pubDate} />
-          {
+  <article class="mt-10">
+    <h1 class="text-4xl font-bold">{title}</h1>
+    <div class="py-4">
+      <div class="mb-2 flex items-center">
+        <FormattedDate date={pubDate} />
+        <!-- {
             updatedDate && (
               <div class="last-updated-on">
                 Last updated on <FormattedDate date={updatedDate} />
               </div>
             )
-          }
-        </div>
-        <h1>{title}</h1>
-        <hr />
+          } -->
+      </div>
+      <div class="text-gray-400">
+        <slot />
       </div>
-      <slot />
     </div>
   </article>
 </Base>
diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -3,4 +3,10 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '@consts';
 import Base from '@layouts/Base.astro';
 ---
 
-<Base title={SITE_TITLE} description={SITE_DESCRIPTION}> 404</Base>
+<Base title={SITE_TITLE} description={SITE_DESCRIPTION}>
+  <div
+    class="flex h-screen flex-col items-center justify-center text-center font-sans text-5xl font-bold leading-normal tracking-normal"
+  >
+    404
+  </div>
+</Base>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,13 +1,36 @@
 ---
 import { SITE_TITLE, SITE_DESCRIPTION } from '@consts';
 import Base from '@layouts/Base.astro';
+import Link from '@components/Link.astro';
 ---
 
+<style>
+  .glow {
+    text-shadow: 0 0 10px #09e4e4;
+  }
+</style>
+
 <Base title={SITE_TITLE} description={SITE_DESCRIPTION}>
   <div
-    class="flex flex-col min-h-full text-6xl md:text-8xl justify-center max-w-fit"
+    class="flex h-screen flex-col items-center justify-center text-center font-sans leading-normal tracking-normal"
   >
-    (づ｡◕‿‿◕｡)づ
-    <span class="text-xl text-right">Soon™</span>
+    <h1 class="glow my-3 text-4xl font-bold md:text-7xl">
+      Federico Maria Morrone
+    </h1>
+    <p class="text-1xl my-3 text-gray-300 md:text-3xl">
+      Rust Developer & Wayland Enthusiast
+    </p>
+    <p class="my-3 max-w-2xl text-gray-400">
+      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam itaque
+      asperiores quibusdam corporis, sint dolorum velit, voluptate tenetur sunt
+      architecto eos labore animi maxime ipsum et? Quis maxime quisquam
+      recusandae.
+    </p>
+    <div class="my-3 flex space-x-4 text-xl">
+      <Link href="/posts">Blog</Link>
+      <Link href="/projects">Projects</Link>
+      <Link href="https://github.com/morr0ne" target="_blank">Github</Link>
+      <Link href="mailto:[email protected]">Contact Me</Link>
+    </div>
   </div>
 </Base>
diff --git a/src/pages/posts/index.astro b/src/pages/posts/index.astro
@@ -10,18 +10,24 @@ const posts = (await getCollection('blog')).sort(
 ---
 
 <Base title={SITE_TITLE} description={SITE_DESCRIPTION}>
-  <section>
-    <h1>Posts</h1>
-    <ul>
+  <section class="mt-10">
+    <h1 class="text-4xl font-bold">Posts</h1>
+    <ul class="divide-y divide-gray-800">
       {
         posts.map((post) => (
-          <li>
-            <div class="grid grid-flow-col auto-cols-max gap-4">
+          <li class="py-4">
+            <div class="mb-2 flex items-center">
               <FormattedDate date={post.data.pubDate} />
-              <a href={`/posts/${post.slug}/`}>
-                <h1 class="title">{post.data.title}</h1>
+              <a href={`/posts/${post.slug}/`} class="ml-2 font-bold">
+                {post.data.title}
               </a>
             </div>
+            <p class="text-gray-400">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos,
+              quidem? Similique repellendus nam, praesentium quas quasi quo
+              enim, tempora excepturi debitis facere corporis? Quo obcaecati
+              quisquam saepe veniam harum soluta.
+            </p>
           </li>
         ))
       }

diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
@@ -13,7 +13,7 @@ const posts = await getCollection('projects');
       {
         posts.map((post) => (
           <li>
-            <div class="grid grid-flow-col auto-cols-max gap-4">
+            <div class="grid auto-cols-max grid-flow-col gap-4">
               <a href={`/projects/${post.slug}/`}>
                 <h1 class="title">{post.data.title}</h1>
               </a>