Move src dir

src/components/footer/content.jsx

@@ -0,0 +1,60 @@
+"use client"
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+
+const Items = [
+  { id: 0, href: "https://add-later", label: "Contact", color: "green" },
+  { id: 1, href: "https://github.com/timmypidashev", label: "Github", color: "yellow" },
+  { id: 3, href: "https://linkedin.com/in/timothy-pidashev-9055922a7", label: "Linkedin", color: "blue" },
+  { id: 4, href: "https://instagram.com/timmypidashev", label: "Instagram", color: "purple" },
+  { id: 5, href: "https://github.com/timmypidashev/web", label: "Source", color: "aqua" },
+];
+
+const ItemColors = {
+  green: "text-light-green-1 dark:text-dark-green-1",
+  yellow: "text-light-yellow-1 dark:text-dark-yellow-1",
+  blue: "text-light-blue-1 dark:text-dark-blue-1",
+  purple: "text-light-purple-1 dark:text-dark-purple-1",
+  aqua: "text-light-aqua-1 dark:text-dark-aqua-1"
+};
+
+function Content() {
+  return (
+    <motion.nav
+      initial="hidden"
+      animate="visible"
+      variants={{
+        visible: {
+          transition: {
+            staggerChildren: 0.3
+          }
+        },
+      }}
+      className="
+        fixed bottom-0 left-0 w-full z-50
+        flex flex-row
+        px-6 py-1.5
+        font-bold text-2xl
+        justify-center
+    ">
+      <div className="flex space-x-10">
+        {Items.map((item) => (
+          <motion.div
+            key={item.id}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: item.id * 0.2 }}
+            className={`
+              inline-block
+              ${ItemColors[item.color]} dark:${ItemColors[item.color]}
+          `}>
+            <Link href={item.href} target="_blank" rel="noopener noreferrer">{item.label}</Link>
+          </motion.div>
+        ))}
+      </div>
+    </motion.nav>
+  );
+}
+
+export default Content;

src/components/footer/index.jsx

@@ -0,0 +1,10 @@
+import Container from "@/components/ui/container";
+import Content from "@/components/footer/content";
+
+function Footer() {
+  return (
+    <Content />
+  );
+}
+
+export default Footer;

src/components/header/constants.js

@@ -0,0 +1,26 @@
+// Navigation links
+export const Links = [
+  { id: 0, href: "/", label: "Home", color: "green" },
+  { id: 1, href: "projects", label: "Projects", color: "yellow" },
+  { id: 2, href: "resume", label: "Resume", color: "blue" },
+  { id: 3, href: "blog", label: "Blog", color: "purple" },
+  { id: 4, href: "shop", label: "Shop", color: "aqua" }
+];
+
+// Drop down menu link colors
+export const LinkColors = {
+  green: "text-light-green-1 dark:text-dark-green-1",
+  yellow: "text-light-yellow-1 dark:text-dark-yellow-1",
+  blue: "text-light-blue-1 dark:text-dark-blue-1",
+  purple: "text-light-purple-1 dark:text-dark-purple-1",
+  aqua: "text-light-aqua-1 dark:text-dark-aqua-1"
+};
+
+// Link underline selector colors
+export const LinkUnderlineColors = {
+  green: "bg-light-green-1 dark:bg-dark-green-1",
+  yellow: "bg-light-yellow-1 dark:bg-dark-yellow-1",
+  blue: "bg-light-blue-1 dark:bg-dark-blue-1",
+  purple: "bg-light-purple-1 dark:bg-dark-purple-1",
+  aqua: "bg-light-aqua-1 dark:bg-dark-aqua-1"
+};

src/components/header/default.jsx

@@ -0,0 +1,44 @@
+"use client"
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { Links, LinkColors } from "@/components/header/constants";
+
+function DefaultHeader() {
+  return (
+    <motion.nav
+      initial="hidden"
+      animate="visible"
+      variants={{
+        visible: {
+          transition: {
+            staggerChildren: 0.3
+          }
+        },
+      }}
+      className="
+        fixed top-0 left-0 w-full z-50
+        hidden 2xl:flex xl:flex lg:flex md:flex flex-row
+        lg:px-6 md:px-5 sm:px-4 lg:py-1.5 md:py-1.5
+        lg:text-4xl md:text-3xl
+        font-bold justify-center
+    ">
+      <div className="flex lg:space-x-20 md:space-x-10">
+        {Links.map((link) => (
+          <motion.div
+            key={link.id}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: link.id * 0.2 }}
+            className={`
+              inline-block
+              ${LinkColors[link.color]} dark:${LinkColors[link.color]}
+            `}>
+            <Link href={link.href}>{link.label}</Link>
+          </motion.div>
+        ))}
+      </div>
+    </motion.nav>
+  );
+}
+export default DefaultHeader;

src/components/header/index.jsx

@@ -0,0 +1,13 @@
+import Container from "@/components/ui/container";
+import DefaultHeader from "@/components/header/default";
+import Sidebar from "@/components/header/sidebar";
+
+function Header() {
+  return (
+    <header className="hidden md:flex lg:text-4xl md:text-10xl">
+      <DefaultHeader />
+    </header>
+  );
+}
+
+export default Header;

src/components/header/sidebar.jsx

@@ -0,0 +1,41 @@
+"use client"
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { Links, LinkColors } from "@/components/header/constants";
+
+function Sidebar() {
+  return (
+    <div className="fixed top-0 left-0 h-screen w-45 flex justify-end transform -rotate-90 origin-top-left">
+      <motion.nav
+        initial="hidden"
+        animate="visible"
+        variants={{
+          visible: {
+            transiton: {
+              staggerChildren: 0.3
+            }
+          },
+        }}
+        className="
+          flex flex-col justify-center items-center transform -translate-x-full
+      ">
+        <div className="flex space-x-10">
+          {Links.map((link) => (
+            <motion.div
+              key={link.id}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: link.id * 0.2 }}
+              className={`
+                ${LinkColors[link.color]} dark:${LinkColors[link.color]}
+              `}>
+              <Link href={link.href}>{link.label}</Link>
+            </motion.div>
+          ))}
+        </div>
+      </motion.nav>
+    </div>
+  );
+}
+export default Sidebar;

src/components/hero/content.jsx

@@ -0,0 +1,70 @@
+"use client"
+
+import Typewriter from 'typewriter-effect';
+import { motion } from 'framer-motion';
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+
+function Portrait() {
+  const fadeInAnimation = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { duration: 1 } },
+  };
+
+  return (
+    <motion.div
+      initial="hidden"
+      animate="visible"
+      variants={fadeInAnimation}
+      className="w-32 h-32 relative rounded-full overflow-hidden"
+    >
+      <Image
+        src="/profile.png"
+        alt="Portrait"
+        width="90"
+        height="90"
+        className="w-full h-full rounded-full"
+      />
+    </motion.div>
+  );
+}
+
+function Content() {
+  return (
+    <>
+      <div className="flex justify-center items-center h-full font-bold text-4xl">
+        <div className="h-screen flex flex-col items-center justify-center">
+          <div className="flex items-center justify-center relative h-58 overflow-y-auto">
+            <Typewriter
+              options={{
+                autoStart: true,
+                loop: true,
+                delay: 50,
+                deleteSpeed: 800,
+                cursor: ''
+              }}
+              onInit={(typewriter) => {
+                typewriter.typeString("<center><span class='inline-block mb-4'>Hello, I'm</span><br><span class='inline-block mb-4'><strong class='text-light-aqua-1 dark:text-dark-aqua-1'>Timothy Pidashev</strong></span></center>")
+                  .pauseFor(2500)
+                  .deleteAll()
+                  .start()
+
+                typewriter.typeString("<center><span class='inline-block mb-4'>I'm a <strong class='text-light-green-1 dark:text-dark-green-1'>19 year old</strong></span><br><span class='inline-block mb-4'>on an <strong class='text-light-yellow-1 dark:text-dark-yellow-1'>epic journey</strong> to</span><br><span class='inline-block mb-4'>become a <strong class='text-light-blue-1 dark:text-dark-blue-1'>software engineer</strong>!</span></center>")
+                  .pauseFor(2500)
+                  .deleteAll()
+                  .start()
+
+                typewriter.typeString("<center><span class=''>Check out my <strong class='text-light-purple-1 dark:text-dark-purple-1'>blog</strong> and <strong class='text-light-aqua-1 dark:text-dark-aqua-1'>shop</strong></span><br></span><br><span class=''>or <strong class='text-light-green-1 dark:text-dark-green-1'>contact me below</strong>!</span></center>")
+                  .pauseFor(2500)
+                  .deleteAll()
+                  .start()
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Content; 

src/components/hero/index.jsx

@@ -0,0 +1,12 @@
+"use client"
+
+import React from 'react';
+import Content from '@/components/hero/content';
+
+function Hero() {
+  return (
+    <Content />
+  );
+}
+
+export default Hero;

src/components/ui/container.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Container = ({ children }) => {
+  return ( 
+    <div className="mx-auto w-full max-w-3xl">
+      {children}
+    </div>
+   );
+};
+
+export default Container;

src/components/ui/theme-toggle.jsx

@@ -0,0 +1,35 @@
+"use client"
+
+// Imports
+import { FiSun, FiMoon } from "react-icons/fi"
+import { useState, useEffect } from 'react'
+import { useTheme } from 'next-themes'
+import Image from "next/image"
+
+export default function ThemeToggle() {
+  const [mounted, setMounted] = useState(false)
+  const { setTheme, resolvedTheme } = useTheme()
+
+  useEffect(() => setMounted(true), [])
+
+  if (!mounted) return (
+    <Image
+      src="data:image/svg+xml;base64,PHN2ZyBzdHJva2U9IiNGRkZGRkYiIGZpbGw9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMCIgdmlld0JveD0iMCAwIDI0IDI0IiBoZWlnaHQ9IjIwMHB4IiB3aWR0aD0iMjAwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4PSIyIiB5PSIyIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjIiIHJ4PSIyIj48L3JlY3Q+PC9zdmc+Cg=="
+      width={16}
+      height={16}
+      sizes="16x16"
+      alt="Loading Light/Dark Toggle"
+      priority={false}
+      title="Loading Light/Dark Toggle"
+      style={{ opacity: 0 }}
+    />
+  )
+
+  if (resolvedTheme === 'dark') {
+    return <FiSun onClick={() => setTheme('light')} />
+  }
+
+  if (resolvedTheme === 'light') {
+    return <FiMoon onClick={() => setTheme('dark')} />
+  }
+}

src/components/ui/transitions.jsx

@@ -0,0 +1,18 @@
+"use client"
+
+import { motion } from "framer-motion";
+
+const PageTransition = ({ children }) => (
+  <motion.div
+    initial={{ opacity: 0 }}
+    animate={{ opacity: 1 }}
+    exit={{ opacity: 0 }}
+    transition={{
+      type: "tween",
+      duration: 0.5, // You can adjust the duration as needed
+    }}
+  >
+    {children}
+  </motion.div>
+);
+export default PageTransition;