feat: social float icons

astro.config.mjs

@@ -3,7 +3,10 @@ import { defineConfig } from 'astro/config';
 // https://astro.build/config
 import tailwind from "@astrojs/tailwind";
 
+// https://astro.build/config
+import react from "@astrojs/react";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind()]
+  integrations: [tailwind(), react()]
 });

package.json

@@ -11,8 +11,13 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/react": "^2.0.2",
     "@astrojs/tailwind": "^3.0.1",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
     "astro": "^2.0.6",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "tailwindcss": "^3.0.24"
   },
   "devDependencies": {

src/components/BaseHead.astro

@@ -7,7 +7,7 @@ export interface Props {
 const { title, description, permalink } = Astro.props;
 ---
 
-<style global>
+<style is:global>
   @import "../styles/global.css";
 </style>
 

src/components/Hero.astro

@@ -0,0 +1,4 @@
+---
+---
+
+<section></section>

src/components/Icons/GithubIcon.tsx

@@ -0,0 +1,32 @@
+const GitHubIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    viewBox="0 0 438.549 438.549"
+  >
+    <title>GitHub</title>
+    <path
+      d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365
+          c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63 c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996
+          c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136
+          c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559
+          c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559
+          c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997
+          c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851
+          c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136
+          c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41
+          c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126
+          c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817
+          c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994
+          c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849
+          c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24
+          c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979
+          c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146
+          c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995
+          c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906
+          C438.536,184.851,428.728,148.168,409.132,114.573z"
+    ></path>
+  </svg>
+);
+
+export default GitHubIcon;

src/components/Icons/Linkedin.tsx

@@ -0,0 +1,19 @@
+const LinkedinIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    viewBox="0 0 430.117 430.117"
+  >
+    <title>LinkedIn</title>
+    <path
+      d="M430.117,261.543V420.56h-92.188V272.193c0-37.271-13.334-62.707-46.703-62.707
+          c-25.473,0-40.632,17.142-47.301,33.724c-2.432,5.928-3.058,14.179-3.058,22.477V420.56h-92.219c0,0,1.242-251.285,0-277.32h92.21
+          v39.309c-0.187,0.294-0.43,0.611-0.606,0.896h0.606v-0.896c12.251-18.869,34.13-45.824,83.102-45.824
+          C384.633,136.724,430.117,176.361,430.117,261.543z M52.183,9.558C20.635,9.558,0,30.251,0,57.463
+          c0,26.619,20.038,47.94,50.959,47.94h0.616c32.159,0,52.159-21.317,52.159-47.94C103.128,30.251,83.734,9.558,52.183,9.558z
+           M5.477,420.56h92.184v-277.32H5.477V420.56z"
+    />
+  </svg>
+);
+
+export default LinkedinIcon;

src/components/NavItem.astro

@@ -4,21 +4,8 @@ interface Props {
   path: string;
 }
 const { name, path } = Astro.props;
-const si = "0";
-let number = "before:content-['0" + si + "']";
 ---
 
-<li class="nav-item bg-slate-50">
-  <a href={path}>
-    {name}
-  </a>
-</li>
-
-<style>
-  /* li {
-    counter-increment: item 1;
-  }
-  li:before {
-    content: "0" counter(item) ".";
-  } */
-</style>
+<a href={path} class="hover:text-blue-400 text-white cursor-pointer">
+  {name}
+</a>

src/components/Navbar.astro

@@ -9,7 +9,7 @@ interface NavbarProps {
 const { title } = Astro.props;
 ---
 
-<nav class="flex flex-row justify-center lg:justify-between px-10 py-4">
+<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"
@@ -18,6 +18,12 @@ const { title } = Astro.props;
     />
   </div>
   <ol class="flex flex-row gap-8">
-    {navItems.map(({ name, path }) => <NavItem name={name} path={path} />)}
+    {
+      navItems.map(({ name, path }) => (
+        <li class="nav-item">
+          <NavItem name={name} path={path} />
+        </li>
+      ))
+    }
   </ol>
 </nav>

src/components/Social.tsx

@@ -0,0 +1,34 @@
+import GitHubIcon from "./Icons/GithubIcon";
+import LinkedinIcon from "./Icons/Linkedin";
+
+interface SocialItems {
+  icon: React.ReactNode;
+  link: string;
+}
+
+const socialItems: SocialItems[] = [
+  {
+    icon: <LinkedinIcon />,
+    link: "https://www.linkedin.com/in/daniel-cuque-bb94541ab/",
+  },
+  {
+    icon: <GitHubIcon />,
+    link: "https://github.com/danielcuque",
+  },
+];
+
+export const Social = () => {
+  return (
+    <div className="fixed left-6 bottom-10 w-10">
+      <ul className="flex flex-col w-full h-full gap-8">
+        {socialItems.map(({ icon, link }) => (
+          <li>
+            <a className="text-base w-10 bg-white" target="_blank" href={link}>
+              {icon}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

src/layouts/Layout.astro

@@ -3,15 +3,15 @@ import BaseHead from "../components/BaseHead.astro";
 
 let description = "Daniel Cuque Portafolio";
 let permalink = "https://example.com/";
-let title = "Portafolio | Daniel Cuque";
+let title = "Daniel Cuque | Web Developer";
 ---
 
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <BaseHead title={title} description={description} permalink={permalink} />
   </head>
-  <body class="min-h-screen">
+  <body class="min-h-screen bg-[#16151D]">
     <slot />
   </body>
 </html>

src/pages/index.astro

@@ -1,9 +1,15 @@
 ---
+import Hero from "../components/Hero.astro";
 import Navbar from "../components/Navbar.astro";
 import Layout from "../layouts/Layout.astro";
+
+import { Social } from "../components/Social";
 ---
 
 <Layout title="Welcome to Astro.">
   <Navbar />
-  <main class="min-h-full"></main>
+  <Social />
+  <main class="min-h-full">
+    <Hero />
+  </main>
 </Layout>

src/styles/global.css

@@ -8,6 +8,21 @@
     counter-increment: item 1;
   }
   .nav-item::before {
-    content: "0" counter(item) ". ";
+    content: "0" counter(item) ".";
+    @apply text-blue-400 text-sm hidden lg:inline mr-2;
+  }
+
+  .nav-item a::after {
+    @apply relative content-[''] block top-[0.2em] w-0 h-[2px] bg-blue-400 transition-all duration-75 ease-in-out opacity-50;
+  }
+
+  .nav-item a:hover::after {
+    @apply w-full opacity-100;
+  }
+}
+
+@layer base {
+  svg {
+    @apply fill-white max-w-[2em] max-h-[2em];
   }
 }

tsconfig.json

@@ -1,3 +1,7 @@
 {
-  "extends": "astro/tsconfigs/base"
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
 }