Kris_HD1337/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added color-gradients

Browse Source
This commit is contained in:
IM23a-cernik
2025-04-10 09:45:24 +02:00
parent b22dac3d6a
commit d53f278172
3 changed files with 16 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/layout.js
+2 -3
View File
@@ -37,7 +37,7 @@ export default function RootLayout({children}) {
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<body <body
className={"bg-gray-200 dark:bg-black text-emerald-800 dark:text-emerald-300"}> className={"text-emerald-800 dark:text-emerald-300 bg-gradient-to-tr dark:from-black dark:via-emerald-800 dark:to-black from-gray-300 via-emerald-100 to-gray-300"}>
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"
defaultTheme="dark" defaultTheme="dark"
@@ -45,8 +45,7 @@ export default function RootLayout({children}) {
disableTransitionOnChange disableTransitionOnChange
> >
<header <header
className={"fixed dark:bg-black bg-gray-200 w-full flex text-4xl md:text-5xl p-3 justify-between " + className={"fixed dark:bg-black bg-gray-200 w-full flex text-4xl md:text-5xl p-3 justify-between border-b-2 border-emerald-800 dark:border-emerald-300 content-center items-center"}>
"border-b-2 border-emerald-800 dark:border-emerald-300 content-center flex items-center"}>
<Burger/> <Burger/>
<div className={""}>{getTitle()}</div> <div className={""}>{getTitle()}</div>
<ModeToggle/> <ModeToggle/>
src/app/page.js
+11 -17
View File
@@ -27,40 +27,34 @@ export default function Home() {
<div className="flex justify-between h-screen items-center border-b-2 border-x-2 border-emerald-800 <div className="flex justify-between h-screen items-center border-b-2 border-x-2 border-emerald-800
dark:border-emerald-300 dark:animate-pulse-border-dark animate-pulse-border-light w-screen p-0 m-0"> dark:border-emerald-300 dark:animate-pulse-border-dark animate-pulse-border-light w-screen p-0 m-0">
<section className={"w-1/2 p-5"}> <section className={"w-1/2 p-5"}>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt <p className={"md:text-2xl"}>
ut labore Hier findest du einige meiner Informatik-Skills! Klicke einfach auf einer der Sprachen* und du
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et kommst zu den Projekten mit der jeweiligen Sprache! Nicht zu jeder Sprache hat es aber unbedingt
ea rebum. Stet ein Projekt. *Nicht alle sind Programmiersprachen.
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor </p>
sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.</p>
</section> </section>
<ul className={"w-1/2 left-1/2 list-none p-5 text-center"}> <ul className={"w-1/2 left-1/2 list-none p-5 text-center"}>
<li className={"text-xl border-2 rounded-2xl border-emerald-800 dark:border-cyan-400 dark:text-cyan-400 bg-cyan-400 dark:bg-black p-2 m-2"}> <li className={"text-xl border-2 rounded-2xl dark:hover:bg-radial from-black via-black to-cyan-400 border-emerald-800 dark:border-cyan-400 dark:text-cyan-400 bg-cyan-400 dark:bg-black p-2 m-2"}>
<Link href={"https://github.com/KrisHD1337?tab=repositories&q=&type=&language=python&sort="} <Link href={"https://github.com/KrisHD1337?tab=repositories&q=&type=&language=python&sort="}
target={"_blank"}>Python</Link> target={"_blank"}>Python</Link>
</li> </li>
<li className={"text-xl border-2 rounded-2xl border-emerald-800 dark:border-orange-400 dark:text-orange-400 bg-orange-400 dark:bg-black p-2 m-2"}> <li className={"text-xl border-2 rounded-2xl dark:hover:bg-radial from-black via-black to-orange-400 border-emerald-800 dark:border-orange-400 dark:text-orange-400 bg-orange-400 dark:bg-black p-2 m-2"}>
<Link href={"https://github.com/KrisHD1337?tab=repositories&q=&type=&language=java&sort="} <Link href={"https://github.com/KrisHD1337?tab=repositories&q=&type=&language=java&sort="}
target={"_blank"}>Java</Link> target={"_blank"}>Java</Link>
</li> </li>
<li className={"text-xl border-2 rounded-2xl border-emerald-800 dark:border-yellow-400 dark:text-yellow-400 bg-yellow-400 dark:bg-black p-2 m-2"}> <li className={"text-xl border-2 rounded-2xl dark:hover:bg-radial from-black via-black to-yellow-400 border-emerald-800 dark:border-yellow-400 dark:text-yellow-400 bg-yellow-400 dark:bg-black p-2 m-2"}>
<Link href={"https://github.com/KrisHD1337?tab=repositories&q=&type=&language=javascript&sort="} <Link href={"https://github.com/KrisHD1337?tab=repositories&q=&type=&language=javascript&sort="}
target={"_blank"}>JavaScript</Link> target={"_blank"}>JavaScript</Link>
</li> </li>
<li className={"text-xl border-2 rounded-2xl border-emerald-800 dark:border-green-400 dark:text-green-400 bg-green-400 dark:bg-black p-2 m-2"}> <li className={"text-xl border-2 rounded-2xl dark:hover:bg-radial from-black via-black to-green-400 border-emerald-800 dark:border-green-400 dark:text-green-400 bg-green-400 dark:bg-black p-2 m-2"}>
<Link href={"https://github.com/KrisHD1337?tab=repositories&q=&type=&language=html&sort="} <Link href={"https://github.com/KrisHD1337?tab=repositories&q=&type=&language=html&sort="}
target={"_blank"}>HTML</Link> target={"_blank"}>HTML</Link>
</li> </li>
<li className={"text-xl border-2 rounded-2xl border-emerald-800 dark:border-blue-400 dark:text-blue-400 bg-blue-400 dark:bg-black p-2 m-2"}> <li className={"text-xl border-2 rounded-2xl dark:hover:bg-radial from-black via-black to-blue-400 border-emerald-800 dark:border-blue-400 dark:text-blue-400 bg-blue-400 dark:bg-black p-2 m-2"}>
<Link href={"https://github.com/KrisHD1337?tab=repositories&q=&type=&language=css&sort="} <Link href={"https://github.com/KrisHD1337?tab=repositories&q=&type=&language=css&sort="}
target={"_blank"}>CSS</Link> target={"_blank"}>CSS</Link>
</li> </li>
<li className={"text-xl border-2 rounded-2xl border-emerald-800 dark:border-red-400 dark:text-red-400 bg-red-400 dark:bg-black p-2 m-2"}> <li className={"text-xl border-2 rounded-2xl dark:hover:bg-radial from-black via-black to-red-400 border-emerald-800 dark:border-red-400 dark:text-red-400 bg-red-400 dark:bg-black p-2 m-2"}>
<Link href={"https://github.com/KrisHD1337?tab=repositories&q=&type=&language=sql&sort="} <Link href={"https://github.com/KrisHD1337?tab=repositories&q=&type=&language=sql&sort="}
target={"_blank"}>SQL</Link> target={"_blank"}>SQL</Link>
</li> </li>
src/components/burger.jsx
+3 -2
View File
@@ -9,8 +9,9 @@ export default function Burger() {
<div> <div>
<button className={"text-4xl md:text-5xl"} onClick={() => setIsOpen(!isOpen)}>&#9776;</button> <button className={"text-4xl md:text-5xl"} onClick={() => setIsOpen(!isOpen)}>&#9776;</button>
<div <div
className={`absolute top-19 left-0 md:w-1/4 w-3/4 h-screen dark:bg-emerald-950 dark:border-t-emerald-400 className={`absolute top-19 left-0 md:w-1/4 w-3/4 h-screen bg-gradient-to-tl
dark:border-r-emerald-400 border-2 bg-gray-200 flex flex-col dark:from-emerald-950 dark:via-emerald-800 dark:to-emerald-950 dark:border-t-emerald-400
dark:border-r-emerald-400 border-2 from-gray-300 via-emerald-100 to-gray-300 flex flex-col
border-t-emerald-600 border-r-emerald-600 border-t-emerald-600 border-r-emerald-600
gap-6 font-semibold text-lg transform transition-transform gap-6 font-semibold text-lg transform transition-transform
${isOpen ? "opacity-100" : "opacity-0 hidden"}`} ${isOpen ? "opacity-100" : "opacity-0 hidden"}`}