fix footer

src/package.json

@@ -15,6 +15,7 @@
     "astro": "^4.16.7"
   },
   "dependencies": {
+    "framer-motion": "^11.11.11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-responsive": "^10.0.0",

src/pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      framer-motion:
+        specifier: ^11.11.11
+        version: 11.11.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -910,6 +913,20 @@ packages:
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
+  framer-motion@11.11.11:
+    resolution: {integrity: sha512-tuDH23ptJAKUHGydJQII9PhABNJBpB+z0P1bmgKK9QFIssHGlfPd6kxMq00LSKwE27WFsb2z0ovY0bpUyMvfRw==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -2711,6 +2728,13 @@ snapshots:
 
   fraction.js@4.3.7: {}
 
+  framer-motion@11.11.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      tslib: 2.8.0
+    optionalDependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   fsevents@2.3.3:
     optional: true
 
@@ -3744,8 +3768,7 @@ snapshots:
     optionalDependencies:
       typescript: 5.6.3
 
-  tslib@2.8.0:
+  tslib@2.8.0: {}
-    optional: true
 
   type-fest@4.26.1: {}
 

src/src/components/footer/index.tsx

@@ -1,9 +1,22 @@
 import React from "react";
 
+import { Links } from "@/components/footer/links";
+
 export default function Footer({ fixed = false }) {
+  const footerLinks = Links.map((link) => (
+    <div
+      key={link.id}
+      className={`inline-block ${link.color}`}
+    >
+      <a href={link.href} target="_blank" rel="noopener noreferrer">{link.label}</a>
+    </div>
+   ));
+
   return (
-    <footer className={`w-full ${fixed ? 'fixed bottom-0 left-0 right-0' : ''}`}>
+    <footer className={`w-full ${fixed ? "fixed bottom-0 left-0 right-0" : ""}`}>
-      footer
+      <div className="flex flex-row px-6 py-1.5 font-bold text-2xl justify-center space-x-10">
+        {footerLinks}
+      </div>
     </footer>
   );
 }

src/src/components/footer/links.ts

@@ -6,9 +6,9 @@ interface FooterLink {
 }
 
 export const Links: FooterLink[] = [
-  { id: 0, href: "https://add-later", label: "Contact", color: "green" },
+  { id: 0, href: "mailto:contact@timmypidashev.dev", label: "Contact", color: "text-green" },
-  { id: 1, href: "https://github.com/timmypidashev", label: "Github", color: "yellow" },
+  { id: 1, href: "https://github.com/timmypidashev", label: "Github", color: "text-yellow" },
-  { id: 3, href: "https://linkedin.com/in/timothy-pidashev-9055922a7", label: "Linkedin", color: "blue" },
+  { id: 3, href: "https://www.linkedin.com/in/timothy-pidashev-4353812b8", label: "Linkedin", color: "text-blue" },
-  { id: 4, href: "https://instagram.com/timmypidashev", label: "Instagram", color: "purple" },
+  { id: 4, href: "https://instagram.com/timmypidashev", label: "Instagram", color: "text-purple" },
-  { id: 5, href: "https://github.com/timmypidashev/web", label: "Source", color: "aqua" },
+  { id: 5, href: "https://github.com/timmypidashev/web", label: "Source", color: "text-aqua" },
 ];

src/src/components/hero/index.tsx

@@ -31,7 +31,7 @@ export default function Hero() {
       .start();
 
     typewriter
-      .typeString("<center><span class=''>Check out my <strong class='text-purple'>blog</strong> and <strong class='text-aqua'>shop</strong></span><br></span><br><span class=''>or <strong class='text-green'>contact me below</strong>!</span></center>")
+      .typeString("<center><span class=''>Check out my <strong class='text-purple'>blog</strong> and <strong class='text-aqua'>shop</strong></span><br></span><br><span class=''>or <strong class='text-green'>contact</strong> me below!</span></center>")
       .pauseFor(2500)
       .deleteAll()
       .start();

src/src/layouts/main.astro

@@ -0,0 +1,24 @@
+---
+const { content } = Astro.props;
+
+import "@/style/globals.css";
+
+import Header from "@/components/header";
+import Footer from "@/components/footer";
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<title>{content.title}</title>
+	</head>
+  <body class="bg-background text-foreground">
+    <Header client:load />
+    <main>
+      <slot />
+    </main>
+    <Footer client:load />
+	</body>
+</html>