mirror of
https://github.com/timmypidashev/web.git
synced 2026-04-14 11:03:50 +00:00
Begin rewrite to astro
This commit is contained in:
Timothy Pidashev
@@ -1,67 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import Link from "next/link";
|
||||
import { motion } from "framer-motion";
|
||||
import ThemeToggle from "@/components/ui/theme-toggle";
|
||||
|
||||
const Items = [
|
||||
{ id: 0, href: "https://add-later", label: "Contact", color: "green", component: false },
|
||||
{ id: 1, href: "https://github.com/timmypidashev", label: "Github", color: "yellow", component: false },
|
||||
{ id: 3, href: "https://linkedin.com/in/timothy-pidashev-9055922a7", label: "Linkedin", color: "blue", component: false },
|
||||
{ id: 4, href: "https://instagram.com/timmypidashev", label: "Instagram", color: "purple", component: false },
|
||||
{ id: 5, href: "https://github.com/timmypidashev/web", label: "Source", color: "aqua", component: false },
|
||||
{ id: 6, color: "foreground", component: true },
|
||||
];
|
||||
|
||||
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
|
||||
bg-light-background dark:bg-dark-background
|
||||
">
|
||||
<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]}
|
||||
`}>
|
||||
{item.component ? (
|
||||
<ThemeToggle />
|
||||
) : (
|
||||
<Link href={item.href} target="_blank" rel="noopener noreferrer">{item.label}</Link>
|
||||
)}
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.nav>
|
||||
);
|
||||
}
|
||||
|
||||
export default Content;
|
||||
@@ -1,9 +0,0 @@
|
||||
import Content from "@/components/footer/content";
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
<Content />
|
||||
);
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
@@ -1,26 +0,0 @@
|
||||
// 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"
|
||||
};
|
||||
@@ -1,45 +0,0 @@
|
||||
"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
|
||||
bg-light-background dark:bg-dark-background
|
||||
">
|
||||
<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;
|
||||
@@ -1,13 +0,0 @@
|
||||
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;
|
||||
@@ -1,41 +0,0 @@
|
||||
"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;
|
||||
@@ -1,70 +0,0 @@
|
||||
"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;
|
||||
@@ -1,12 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import React from 'react';
|
||||
import Content from '@/components/hero/content';
|
||||
|
||||
function Hero() {
|
||||
return (
|
||||
<Content />
|
||||
);
|
||||
}
|
||||
|
||||
export default Hero;
|
||||
@@ -1,11 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const Container = ({ children }) => {
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-5xl">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Container;
|
||||
@@ -1,35 +0,0 @@
|
||||
"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')} />
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
"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;
|
||||
Reference in New Issue
Block a user