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

updata

Browse Source
This commit is contained in:
Denshooter
2025-01-23 14:08:25 +01:00
parent c8eaef7c36
commit bd657eb7ea
10 changed files with 90 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/components/Contact.tsx
View File

@@ -27,7 +27,7 @@ export default function Contact() {
};
return (
<section id="contact" className="p-10 bg-gray-100 dark:bg-gray-800">
<section id="contact" className="p-10 ">
<h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
Contact Me
</h2>
@@ -42,7 +42,7 @@ export default function Contact() {
type="text"
name="name"
placeholder="Name"
className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
className="w-full p-2 border rounded dark:text-white"
required
value={form.name}
onChange={handleChange}
@@ -51,7 +51,7 @@ export default function Contact() {
type="email"
name="email"
placeholder="Email"
className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
className="w-full p-2 border rounded dark:text-white"
required
value={form.email}
onChange={handleChange}
@@ -59,7 +59,7 @@ export default function Contact() {
<textarea
name="message"
placeholder="Message"
className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
className="w-full p-2 border rounded dark:text-white"
rows={5}
required
value={form.message}
@@ -67,7 +67,7 @@ export default function Contact() {
></textarea>
<button
type="submit"
className="w-full p-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition"
className="w-full p-2 text-white rounded hover:bg-blue-600 transition"
>
Send
</button>

4
app/components/Footer.tsx
View File

@@ -2,7 +2,7 @@ import Link from "next/link";
export default function Footer() {
return (
<footer className="text-center p-10 bg-gray-800 text-white">
<footer className="text-center p-10 text-white">
<h1 className="text-3xl font-bold">Thank You for Visiting</h1>
<p className="mt-4 text-xl">Connect with me on social platforms:</p>
<div className="flex justify-center space-x-4 mt-4">
@@ -15,7 +15,7 @@ export default function Footer() {
</div>
<p className="mt-6">© Dennis Konkol 2024</p>
<Link href="#hero">
<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 text-white rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300 transition">
Back to Top
</button>
</Link>

87
app/components/Header.tsx
View File

@@ -7,56 +7,39 @@ export default function Header() {
const [isOpen, setIsOpen] = useState(false);
return (
<header className="p-5 bg-gray-800 text-white fixed w-full z-10">
<nav className="flex justify-between items-center max-w-6xl mx-auto">
<h1 className="text-lg font-bold">My Portfolio</h1>
<button
className="md:hidden block focus:outline-none"
onClick={() => setIsOpen(!isOpen)}
>
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
{isOpen ? (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
) : (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 8h16M4 16h16"
/>
)}
</svg>
</button>
<ul className={`flex space-x-4 ${isOpen ? "block" : "hidden"} md:flex`}>
<li>
<Link href="#about" className="hover:underline">
About
</Link>
</li>
<li>
<Link href="#projects" className="hover:underline">
Projects
</Link>
</li>
<li>
<Link href="#contact" className="hover:underline">
Contact
</Link>
</li>
{/* DarkModeToggle removed */}
</ul>
</nav>
</header>
<header className="p-5 bg-white/30 text-gray-800 fixed w-full z-10 backdrop-blur-md shadow-lg">
<nav className="flex justify-between items-center max-w-6xl mx-auto">
<h1 className="text-2xl md:text-3xl font-bold">Dennis Konkol</h1>
<div className="flex items-center">
<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"
onClick={() => setIsOpen(!isOpen)}
>
Menu
</button>
<ul
className={`fixed top-0 right-0 h-full w-64 bg-white p-5 flex flex-col space-y-4 transition-transform duration-300 ${
isOpen ? "translate-x-0" : "translate-x-full"
} md:static md:flex-row md:space-y-0 md:space-x-4 md:bg-transparent md:p-0 md:translate-x-0`}
>
{["About", "Projects", "Contact"].map((item, index) => (
<li
key={item}
className={`transition-opacity duration-500 delay-${index * 150} ${
isOpen ? "opacity-100" : "opacity-0"
} md:opacity-100`}
>
<Link
href={`#${item.toLowerCase()}`}
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"
>
{item}
</Link>
</li>
))}
</ul>
</div>
</nav>
</header>
);
}
}

2
app/components/Hero.tsx
View File

@@ -4,7 +4,7 @@ export default function Hero() {
return (
<section
id="hero"
className="text-center p-20 bg-gradient-to-r from-purple-400 to-blue-500 dark:from-gray-800 dark:to-gray-900 text-white"
className="text-center p-20 text-white"
>
<h1 className="text-5xl font-bold">Hi, I am Dennis</h1>
<p className="mt-4 text-xl">A passionate developer and student.</p>

4
app/components/Projects.tsx
View File

@@ -21,7 +21,7 @@ export default function Projects() {
}, []);
return (
<section id="projects" className="p-10 bg-gray-100 dark:bg-gray-800">
<section id="projects" className="p-10">
<h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
Projects
</h2>
@@ -29,7 +29,7 @@ export default function Projects() {
{projects.map((project) => (
<div
key={project.id}
className="p-4 border rounded shadow-lg bg-white dark:bg-gray-700"
className="p-4 border rounded shadow-lg "
>
<h3 className="text-2xl font-bold text-gray-800 dark:text-white">
{project.title}

15
app/globals.css
View File

@@ -6,3 +6,18 @@
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.neumorphism {
background-color: #f0f0f0;
box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.neumorphism:hover {
box-shadow: inset 8px 8px 16px #dddddd, inset -8px -8px 16px #ffffff;
}
.neumorphism:active {
translate: 0 0.225em;
box-shadow: inset 8px 8px 16px #bebebe, inset -8px -8px 16px #ffffff;
}

25
app/page.tsx
View File

@@ -1,4 +1,3 @@
// app/page.tsx
"use client";
import Header from "./components/Header";
@@ -8,15 +7,15 @@ import Contact from "./components/Contact";
import Footer from "./components/Footer";
export default function Home() {
return (
<>
<Header />
<main>
<Hero />
<Projects />
<Contact />
<Footer />
</main>
</>
);
}
return (
<>
<Header/>
<main>
<Hero/>
<Projects/>
<Contact/>
<Footer/>
</main>
</>
);
}