feat: fade-in animation

danielcuque · Feb 8, 2023 · 614ff3c · 614ff3c
1 parent 0d255eb
commit 614ff3c
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 27 deletions.
diff --git a/src/components/NavItem.astro b/src/components/NavItem.astro
@@ -6,9 +6,11 @@ interface Props {
 const { name, path } = Astro.props;
 ---
 
-<a
-  href={path}
-  class="hover:text-blue-500 text-white cursor-pointer [counter-increment:item] lg:before:[content:'0'counters(item,'.')'.'] before:text-blue-500 before:text-sm before:mr-2 before:hidden lg:before:inline lg:after:relative lg:after:content-[''] lg:after:block lg:after:top-[0.2em] after:bg-blue-500 lg:after:h-[2px] lg:after:transition-all lg:after:w-0 lg:after:duration-200 lg:after:ease-in-out lg:after:opacity-50 lg:after:hover:w-full lg:after:hover:opacity-100"
->
-  {name}
-</a>
+<li>
+  <a
+    href={path}
+    class="hover:text-primary-50 text-white cursor-pointer [counter-increment:item] lg:before:[content:'0'counters(item,'.')'.'] before:text-primary-50 before:text-xs before:mr-2 before:hidden lg:before:inline lg:after:relative lg:after:content-[''] lg:after:block lg:after:top-[0.2em] after:bg-primary-50 lg:after:h-[2px] lg:after:transition-all lg:after:w-0 lg:after:duration-200 lg:after:ease-in-out lg:after:opacity-50 lg:after:hover:w-full lg:after:hover:opacity-100"
+  >
+    {name}
+  </a>
+</li>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -1,29 +1,19 @@
 ---
 import { navItems } from "../utils/navItems";
 import NavItem from "./NavItem.astro";
-
-interface NavbarProps {
-  title: string;
-}
-
-const { title } = Astro.props;
 ---
 
 <nav class="flex flex-row justify-center lg:justify-between mx-16 my-4">
   <div class="hidden lg:flex">
-    <img
-      src="https://avatars.githubusercontent.com/u/81493003?v=4"
-      alt="github-image"
-      class="w-10 h-10 rounded-full"
-    />
+    <a href="/">
+      <img
+        src="https://avatars.githubusercontent.com/u/81493003?v=4"
+        alt="github-image"
+        class="w-10 h-10 rounded-full"
+      />
+    </a>
   </div>
   <ol class="flex flex-row gap-8 [counter-reset:item]">
-    {
-      navItems.map(({ name, path }) => (
-        <li>
-          <NavItem name={name} path={path} />
-        </li>
-      ))
-    }
+    {navItems.map(({ name, path }) => <NavItem name={name} path={path} />)}
   </ol>
 </nav>
diff --git a/src/components/Social.tsx b/src/components/Social.tsx
@@ -24,7 +24,7 @@ export const Social = () => {
         {socialItems.map(({ icon, link }) => (
           <li key={link} className="group w-12 p-2">
             <a
-              className="text-base fill-white group-hover:fill-blue-500 group-hover:transition group-hover:duration-200 group-hover:ease-in-out"
+              className="text-base fill-white group-hover:fill-primary-50 group-hover:transition group-hover:duration-200 group-hover:ease-in-out"
               target="_blank"
               href={link}
             >

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -11,7 +11,7 @@ let title = "Daniel Cuque | Software Developer";
   <head>
     <BaseHead title={title} description={description} permalink={permalink} />
   </head>
-  <body class="min-h-full bg-[#16151D]">
+  <body class="min-h-full bg-[#16151D] animate-fade">
     <slot />
   </body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -6,13 +6,14 @@ import Layout from "../layouts/Layout.astro";
 import { Social } from "../components/Social";
 
 import "../styles/base.css";
+
 import Footer from "../components/Footer.astro";
 import Projects from "../components/Projects.astro";
 import About from "../components/About.astro";
 import Contact from "../components/Contact.astro";
 ---
 
-<Layout title="Welcome to Astro.">
+<Layout title="Welcome to my portafolio">
   <Navbar />
   <Social />
   <main class="px-6 md:px-12 lg:px-24 xl:px-52">

diff --git a/src/styles/base.css b/src/styles/base.css
@@ -7,4 +7,8 @@
   a svg {
     @apply group-hover:-translate-y-1;
   }
+
+  * {
+    @apply text-white;
+  }
 }
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -6,6 +6,29 @@ module.exports = {
       fontFamily: {
         secondary: ['"Sofia Sans Extra Condensed"', "sans-serif"],
       },
+      colors: {
+        primary: {
+          50: "#EDC58B",
+          100: "FEBA34",
+          200: "#DF5904",
+          300: "#8E4F0A",
+        },
+        secondary: {
+          50: "#fc4b08",
+          100: "#1C626D",
+          200: "#1FACE7",
+          300: "#1A3176",
+        },
+      },
+      animation: {
+        fade: "fadeIn 1s ease-in-out",
+      },
+      keyframes: () => ({
+        fadeIn: {
+          "0%": { opacity: 0 },
+          "100%": { opacity: 1 },
+        },
+      }),
     },
   },
   plugins: [],
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,4 +7,8 @@ @@
       a svg {
         @apply group-hover:-translate-y-1;
       }
+      * {
+        @apply text-white;
+      }
     }