denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Denshooter
2025-01-29 19:03:18 +01:00
parent bd657eb7ea
commit 262f8d3b86
4 changed files with 204 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
app/components/Header.tsx
View File

@@ -1,45 +1,188 @@
"use client"; "use client";
import {useState} from "react";
import Link from "next/link"; import Link from "next/link";
import { useState } from "react"; import {Roboto} from "next/font/google";
const inter = Roboto({weight: '400', subsets: ["latin"]});
export default function Header() { export default function Header() {
const [isOpen, setIsOpen] = useState(false); const [isSidebarOpen, setIsSidebarOpen] = useState(false);
const toggleSidebar = () => {
setIsSidebarOpen(!isSidebarOpen);
};
return ( return (
<header className="p-5 bg-white/30 text-gray-800 fixed w-full z-10 backdrop-blur-md shadow-lg"> <div className={inter.className}>
<nav className="flex justify-between items-center max-w-6xl mx-auto"> <header
<h1 className="text-2xl md:text-3xl font-bold">Dennis Konkol</h1> className={`p-5 bg-white/30 text-gray-700 fixed w-full z-10 backdrop-blur-md shadow-xl rounded-b-2xl transition-transform ${isSidebarOpen ? 'transform -translate-y-full' : ''}`}>
<div className="flex items-center"> <nav className="flex justify-between items-center mx-auto">
<h1 className="text-2xl md:text-4xl">Dennis</h1>
<button <button
className="md:hidden p-2 rounded-md bg-white/30 backdrop-blur-md shadow-inner transform transition-transform hover:scale-105 active:shadow-lg active:translate-y-1 neumorphism" className="md:hidden text-gray-700 hover:text-gray-900"
onClick={() => setIsOpen(!isOpen)} onClick={toggleSidebar}
> >
Menu <svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button> </button>
<ul <div className="hidden md:flex space-x-4 md:space-x-6">
className={`fixed top-0 right-0 h-full w-64 bg-white p-5 flex flex-col space-y-4 transition-transform duration-300 ${ <Link href="#projects">
isOpen ? "translate-x-0" : "translate-x-full" <button
} md:static md:flex-row md:space-y-0 md:space-x-4 md:bg-transparent md:p-0 md:translate-x-0`} className="relative px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
<span
className="inline-flex items-center group-hover:transform group-hover:-translate-x-2 transition-transform">
Projects
<svg
className="ml-1 w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
> >
{["About", "Projects", "Contact"].map((item, index) => ( <path
<li strokeLinecap="round"
key={item} strokeLinejoin="round"
className={`transition-opacity duration-500 delay-${index * 150} ${ strokeWidth={2}
isOpen ? "opacity-100" : "opacity-0" d="M3 8.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C4.52 5 5.08 5 6.2 5h3.475c.489 0 .733 0 .963.055.204.05.4.13.579.24.201.123.374.296.72.642l.126.126c.346.346.519.519.72.642.18.11.375.19.579.24.23.055.474.055.963.055H17.8c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C21 8.52 21 9.08 21 10.2v5.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C19.48 19 18.92 19 17.8 19H6.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C3 17.48 3 16.92 3 15.8V8.2Z"
} md:opacity-100`} />
> </svg>
<Link </span>
href={`#${item.toLowerCase()}`} </button>
className="bg-white/30 p-2 rounded-md backdrop-blur-md shadow-inner transform transition-transform hover:scale-105 active:shadow-lg active:translate-y-1 neumorphism" </Link>
> <Link href="#contact">
{item} <button
className="relative px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
<span
className="inline-flex items-center group-hover:transform group-hover:-translate-x-2 transition-transform">
Contact
<svg
className="ml-1 w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
d="M22 12.27v4.37a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7.36a2 2 0 0 1 2-2h6.76"
style={{
strokeLinejoin: "bevel",
fillRule: "evenodd",
fill: "none",
strokeLinecap: "round",
strokeWidth: "1.5px",
}}
/>
<path
d="M19.3 4.25a1 1 0 0 0-1.42 0l-6 6h0l-.1 3a.21.21 0 0 0 .23.22l3-.1h0l6-6A1 1 0 0 0 21 6Z"
style={{
strokeLinejoin: "round",
fill: "none",
strokeLinecap: "round",
strokeWidth: "1.5px",
}}
/>
</svg>
</span>
</button>
</Link>
<Link href="#about">
<button
className="relative px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
<span
className="inline-flex items-center group-hover:transform group-hover:-translate-x-2 transition-transform">
About
<svg
className="ml-1 w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
fillRule="evenodd"
d="M10 7.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Z"
clipRule="evenodd"
/>
<path
fillRule="evenodd"
d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-1.052 1.761C18.908 16.611 15.884 19.5 12 19.5c-3.884 0-6.908-2.889-7.948-6.739A2 2 0 0 1 3 11V7Zm2-1h14a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-3.335a1 1 0 0 1-.284-.041l-2.529-.75a2.999 2.999 0 0 0-1.704 0l-2.529.75a1 1 0 0 1-.284.041H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Zm.166 7C6.23 16.256 8.834 18.5 12 18.5c3.166 0 5.77-2.244 6.834-5.5h-3.169c-.192 0-.384-.028-.568-.082l-2.529-.75c-.37-.11-.765-.11-1.136 0l-2.529.75a2.002 2.002 0 0 1-.568.082H5.166Z"
clipRule="evenodd"
/>
<path
fillRule="evenodd"
d="M10 14.5a.5.5 0 0 1 .5.5v.003l.003.01c.004.009.014.027.036.053a.86.86 0 0 0 .27.194c.28.14.7.24 1.191.24.492 0 .912-.1 1.19-.24a.86.86 0 0 0 .271-.194.214.214 0 0 0 .039-.063V15a.5.5 0 0 1 1 0c0 .568-.447.947-.862 1.154-.445.223-1.025.346-1.638.346s-1.193-.123-1.638-.346C9.947 15.947 9.5 15.568 9.5 15a.5.5 0 0 1 .5-.5Z"
clipRule="evenodd"
/>
</svg>
</span>
</button>
</Link> </Link>
</li>
))}
</ul>
</div> </div>
</nav> </nav>
</header> </header>
<div
className={`fixed inset-0 bg-black bg-opacity-50 transition-opacity ${isSidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
onClick={toggleSidebar}
></div>
<div
className={`fixed top-0 right-0 h-full bg-white w-1/3 transform transition-transform flex flex-col ${isSidebarOpen ? 'translate-x-0' : 'translate-x-full'}`}
>
<button
className="absolute top-4 right-4 text-gray-700 hover:text-gray-900"
onClick={toggleSidebar}
>
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
<div className="pt-8 space-y-4 flex-grow">
<Link href="#projects">
<button
className="w-full px-4 py-2 pt-8 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
Projects
</button>
</Link>
<Link href="#contact">
<button
className="w-full px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
Contact
</button>
</Link>
<Link href="#about">
<button
className="w-full px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
About
</button>
</Link>
</div>
<h6 className="text-center text-xs text-gray-500 p-4">© 2025 Dennis</h6>
</div>
</div>
); );
} }

7
app/components/Hero.tsx
View File

@@ -2,17 +2,20 @@ import Link from "next/link";
export default function Hero() { export default function Hero() {
return ( return (
<div id="hero">
<section <section
id="hero" id="hero"
className="text-center p-20 text-white" className="text-center p-20 text-black"
> >
<h1 className="text-5xl font-bold">Hi, I am Dennis</h1> <h1 className="text-5xl font-bold">Hi, I am Dennis</h1>
<p className="mt-4 text-xl">A passionate developer and student.</p> <p className="mt-4 text-xl">A passionate developer and student.</p>
<Link href="#projects"> <Link href="#projects">
<button className="mt-6 inline-block px-6 py-2 bg-black text-white rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300 transition"> <button
className="mt-6 inline-block px-6 py-2 bg-black text-black rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300 transition">
See My Work See My Work
</button> </button>
</Link> </Link>
</section> </section>
</div>
); );
} }

1
app/globals.css
View File

@@ -5,6 +5,7 @@
/* Custom Global Styles */ /* Custom Global Styles */
body { body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #e7e7e7;
} }
.neumorphism { .neumorphism {

1
app/page.tsx
View File

@@ -10,6 +10,7 @@ export default function Home() {
return ( return (
<> <>
<Header/> <Header/>
<div className="h-10"></div>
<main> <main>
<Hero/> <Hero/>
<Projects/> <Projects/>