begin work on header

2026-04-14 11:03:50 +00:00 · 2024-03-18 12:19:11 -07:00
parent 9422553c9c
commit 36112fe04e
7 changed files with 41 additions and 6 deletions
--- a/src/web/package-lock.json
+++ b/src/web/package-lock.json
@@ -8,6 +8,7 @@
      "name": "web",
      "version": "0.1.0",
      "dependencies": {
+        "framer-motion": "^11.0.14",
        "next": "14.1.3",
        "next-themes": "^0.3.0",
        "react": "^18",
@@ -2139,6 +2140,30 @@
        "url": "https://github.com/sponsors/rawify"
      }
    },
+    "node_modules/framer-motion": {
+      "version": "11.0.14",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.14.tgz",
+      "integrity": "sha512-RFjo2hB1MTW0EWsHQaXgVn0AEUDGxAs0ZL2vVjTTJJu3N7wFiLkmqTn5ysLjL+qKZ9jvfpKXDb9waN9AyLqk8g==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "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
+        }
+      }
+    },
    "node_modules/fs.realpath": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
--- a/src/web/package.json
+++ b/src/web/package.json
@@ -9,6 +9,7 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "framer-motion": "^11.0.14",
    "next": "14.1.3",
    "next-themes": "^0.3.0",
    "react": "^18",
--- a/src/web/src/app/layout.js
+++ b/src/web/src/app/layout.js
@@ -14,7 +14,10 @@ export const metadata = {
 export default function Layout({children}) {
  return (
    <html lang="en" suppressHydrationWarning>
-      <body className="bg-light-background dark:bg-dark-background">
+      <body className="
+        bg-light-background text-light-foreground 
+        dark:bg-dark-background dark:text-dark-foreground
+      ">
        <Theme>
          <Header />
          <main>
--- a/src/web/src/app/page.jsx
+++ b/src/web/src/app/page.jsx
@@ -1,5 +1,4 @@
 // Imports
-import ThemeToggle from "@/components/theme-toggle";

 // Metadata

@@ -7,7 +6,6 @@ import ThemeToggle from "@/components/theme-toggle";
 export default function Index() {
  return (
    <div> 
-      <ThemeToggle />
    </div>
  );
 }
--- a/src/web/src/components/footer.jsx
+++ b/src/web/src/components/footer.jsx
@@ -1,6 +1,6 @@
 const Footer = () => {
  return (
-    <div>Footer</div>
+    <div></div>
  );
 }

--- a/src/web/src/components/header.jsx
+++ b/src/web/src/components/header.jsx
@@ -1,5 +1,6 @@
 "use client";

+import ThemeToggle from "@/components/theme-toggle"
 import Link from "next/link";
 import { usePathname } from "next/navigation";

@@ -29,8 +30,13 @@ const navItems= [
 const Header = () => {

  return (
-    <div>
-      Navbar
+    <div className="flex justify-center space-x-7">
+      <Link href="/">Home</Link>
+      <Link href="/projects">Projects</Link>
+      <Link href="/resume">Resume</Link>
+      <Link href="/blog">Blog</Link>
+      <Link href="/shop">Shop</Link>
+      <ThemeToggle />
    </div>
  );
 }
--- a/src/web/tailwind.config.js
+++ b/src/web/tailwind.config.js
@@ -9,6 +9,7 @@ module.exports = {
      colors: {
        light:{
          background: "#fbf1c7",
+          foreground: "#3c3836",
          red: {
            1: "#cc241d",
            2: "#9d0006"
@@ -40,6 +41,7 @@ module.exports = {
        },
        dark: {
          background: "#282828",
+          foreground: "#ebdbb2",
          red: {
            1: "#cc241d",
            2: "#fb4934"