Added color-gradients
This commit is contained in:
IM23a-cernik
+2
-3
@@ -37,7 +37,7 @@ export default function RootLayout({children}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<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
|
||||
attribute="class"
|
||||
defaultTheme="dark"
|
||||
@@ -45,8 +45,7 @@ export default function RootLayout({children}) {
|
||||
disableTransitionOnChange
|
||||
>
|
||||
<header
|
||||
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 flex items-center"}>
|
||||
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"}>
|
||||
<Burger/>
|
||||
<div className={""}>{getTitle()}</div>
|
||||
<ModeToggle/>
|
||||
|
||||
+11
-17
@@ -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
|
||||
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"}>
|
||||
<p>Lorem ipsum dolor 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. Lorem ipsum dolor
|
||||
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>
|
||||
<p className={"md:text-2xl"}>
|
||||
Hier findest du einige meiner Informatik-Skills! Klicke einfach auf einer der Sprachen* und du
|
||||
kommst zu den Projekten mit der jeweiligen Sprache! Nicht zu jeder Sprache hat es aber unbedingt
|
||||
ein Projekt. *Nicht alle sind Programmiersprachen.
|
||||
</p>
|
||||
</section>
|
||||
<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="}
|
||||
target={"_blank"}>Python</Link>
|
||||
</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="}
|
||||
target={"_blank"}>Java</Link>
|
||||
</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="}
|
||||
target={"_blank"}>JavaScript</Link>
|
||||
</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="}
|
||||
target={"_blank"}>HTML</Link>
|
||||
</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="}
|
||||
target={"_blank"}>CSS</Link>
|
||||
</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="}
|
||||
target={"_blank"}>SQL</Link>
|
||||
</li>
|
||||
|
||||
@@ -9,8 +9,9 @@ export default function Burger() {
|
||||
<div>
|
||||
<button className={"text-4xl md:text-5xl"} onClick={() => setIsOpen(!isOpen)}>☰</button>
|
||||
<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
|
||||
dark:border-r-emerald-400 border-2 bg-gray-200 flex flex-col
|
||||
className={`absolute top-19 left-0 md:w-1/4 w-3/4 h-screen bg-gradient-to-tl
|
||||
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
|
||||
gap-6 font-semibold text-lg transform transition-transform
|
||||
${isOpen ? "opacity-100" : "opacity-0 hidden"}`}
|
||||
|
||||
Reference in New Issue
Block a user