feat: Update design

diegolinhares · Sep 20, 2024 · a4811d6 · a4811d6
1 parent 12ef931
commit a4811d6
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 57 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -6,56 +6,30 @@
   <title>{{ page.title }} - {{ site.title }}</title>
   <link rel="canonical" href="{{ site.url }}{{ page.url }}" />
   <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap">
 </head>
-<body class="bg-black text-white font-sans flex items-center justify-center min-h-screen">
-  <nav class="fixed top-0 left-0 w-full z-30 flex flex-col md:hidden">
-    <div class="flex justify-between items-center p-4">
-      <div>
-        <a href="/" aria-label="Diego Linhares" class="text-white text-xl md:text-2xl lg:text-3xl font-bold">Diego Linhares</a>
+<body class="bg-gray-900 text-white flex justify-center min-h-screen antialiased">
+  <div class="container max-w-4xl p-8 text-center mt-8">
+    <header class="flex flex-col items-center mb-12">
+      <a href="/diego" class="flex flex-col items-center text-center">
+        <img src="/assets/images/profile.jpeg" alt="Avatar" class="w-14 h-14 rounded-full mb-2">
+        <p class="text-base uppercase text-gray-400 tracking-widest">Diego Linhares</p>
+      </a>
+      <div class="text-sm sm:text-base text-gray-400 mt-4">
+        <p>Innovating simple solutions. Aspiring bootstrapped founder.</p>
       </div>
-      <label for="nav-active" class="cursor-pointer text-white">
-        <span class="text-lg md:text-xl lg:text-2xl font-bold">Menu</span>
-      </label>
-    </div>
-    <div class="hidden flex-col p-4 bg-white rounded-b-lg shadow-lg" id="nav">
-      <ul class="flex flex-col space-y-2">
-        <li><a href="mailto:[email protected]" class="text-black text-lg md:text-xl lg:text-2xl font-bold hover:underline">Email</a></li>
-        <li><a href="https://github.com/diegolinhares" target="_blank" class="text-black text-lg md:text-xl lg:text-2xl font-bold hover:underline">Github</a></li>
-        <li><a href="https://www.linkedin.com/in/diegomlinhares/" target="_blank" class="text-black text-lg md:text-xl lg:text-2xl font-bold hover:underline">LinkedIn</a></li>
-        <li><a href="/" class="text-black text-lg md:text-xl lg:text-2xl font-bold hover:underline">CV</a></li>
-      </ul>
-    </div>
-  </nav>
-
-  <!-- Header -->
-  <header class="bg-gradient-to-b from-black to-transparent fixed top-0 left-0 right-0 w-full z-10 flex justify-end pointer-events-none py-8 px-6 md:py-12 md:px-8 lg:py-16 lg:px-12">
-    <h1 class="order-2 pointer-events-auto">
-      <a href="/" class="block h-auto text-white text-xl md:text-2xl lg:text-3xl 2xl:text-3xl font-bold">Diego Linhares</a>
-    </h1>
-    <ul class="hidden md:flex items-center flex-1 pl-4 pointer-events-auto order-1">
-      <li class="text-sm md:text-base lg:text-lg 2xl:text-2xl font-bold pr-4">
-        <a href="mailto:[email protected]" class="hover:text-gray-400 transition duration-300">Email</a>
-      </li>
-      <li class="text-sm md:text-base lg:text-lg 2xl:text-2xl font-bold pr-4">
-        <a href="https://github.com/diegolinhares" class="hover:text-gray-400 transition duration-300">Github</a>
-      </li>
-      <li class="text-sm md:text-base lg:text-lg 2xl:text-2xl font-bold pr-4">
-        <a href="https://www.linkedin.com/in/diegomlinhares/" class="hover:text-gray-400 transition duration-300">LinkedIn</a>
-      </li>
-      <li class="text-sm md:text-base lg:text-lg 2xl:text-2xl font-bold pr-4">
-        <a href="/" class="hover:text-gray-400 transition duration-300">CV</a>
-      </li>
-    </ul>
-  </header>
+      <div class="flex justify-center space-x-4 mt-4">
+        <a href="https://www.linkedin.com/in/diegomlinhares/" class="text-gray-400 hover:text-white">
+          <i class="fab fa-linkedin fa-lg"></i>
+        </a>
+        <a href="https://github.com/diegolinhares" class="text-gray-400 hover:text-white">
+          <i class="fab fa-github fa-lg"></i>
+        </a>
+      </div>
+    </header>
 
-  <!-- Container with Padding at the Bottom -->
-  <div class="container max-w-full mt-32 pt-24 pb-64">
-    {{ content }}
+    {{content}}
   </div>
-
-  <!-- Footer with Gradient Fade -->
-  <footer class="bg-gradient-to-t from-black via-black/70 to-transparent fixed bottom-0 left-0 right-0 w-full z-10 flex justify-between items-center py-12 px-6 md:px-8 lg:px-12 pointer-events-none">
-  </footer>
 </body>
 </html>
diff --git a/assets/images/profile.jpeg b/assets/images/profile.jpeg
diff --git a/index.html b/index.html
@@ -3,16 +3,19 @@
 title: "Blog"
 ---
 
-<section class="px-4 md:px-8 lg:px-16">
-  <div class="space-y-12">
-    <ul class="mt-4 mb-4">
-      {% for post in site.posts %}
-        <li class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold group mb-2 text-left">
-          <a href="{{ post.url }}" class="group-hover:text-white text-gray-500 transition-colors duration-300">
-            {{ forloop.index | prepend: '0' | slice: -2, 2 }}. {{ post.title }}
-          </a>
-        </li>
-      {% endfor %}
-    </ul>
+<section>
+  {% for post in site.posts %}
+    <article class="bg-gray-800 p-6 rounded-lg shadow-md mb-6">
+      <div class="text-center text-gray-400 text-xs sm:text-base mb-2">February 5, 2024</div>
+      <h2 class="text-xl sm:text-2xl lg:text-3xl font-bold text-white mb-4">{{ forloop.index | prepend: '0' | slice: -2, 2 }}. {{ post.title }}</h2>
+      <p class="text-sm sm:text-base text-gray-300">One of the reasons I think AI is going to have a hard time...</p>
+      <div class="text-center mt-4">
+        <a href="#" class="inline-block text-xs text-white border border-gray-100 border-opacity-50 rounded-full px-2 py-1 m-2 shadow-md">Read more</a>
+      </div>
+    </article>
+  {% endfor %}
+
+  <div class="text-center mt-8">
+    <a href="#" class="inline-block text-sm text-white border border-gray-100 rounded-full px-4 py-1 m-2 shadow-md">See more posts »</a>
   </div>
 </section>