IM23a-cernik
72 lines
4.9 KiB
JavaScript
72 lines
4.9 KiB
JavaScript
import Link from "next/link";
|
|
import {Button} from "@/components/ui/button";
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div>
|
|
<div className="flex dark:animate-pulse-border-dark animate-pulse-border-light justify-between h-screen
|
|
items-center border-b-2 border-x-2 border-emerald-800 dark:border-emerald-300 w-screen p-0 m-0">
|
|
<section className={"w-1/2 md:w-1/3 p-5 place-content-center"}>
|
|
<img className={""} src={"https://placehold.co/500"} alt={"Bild von Kristian"}/>
|
|
</section>
|
|
<section className={"flex flex-col items-center w-1/2 md:w-2/3 left-1/2 md:left-1/3 p-10"}>
|
|
<h1 className={"text-3xl md:text-6xl dark:animate-pulse-dark animate-pulse-light p-2"}>Willkommen!</h1>
|
|
<p className={"md:text-2xl justify-items-center text-center"}>
|
|
Mein Name ist Kristian und bin Schüler an der Informatikmittelschule in Hottingen. Ich
|
|
programmiere
|
|
hauptsächlich Videospiele und Mods. Auf dieser Webseite findest du meine Projekte und
|
|
Informationen
|
|
zu mir!
|
|
</p>
|
|
<Button
|
|
className={"p-4 md:p-7 mt-20 md:text-3xl bg-emerald-800 text-gray-200 dark:bg-emerald-300 dark:text-black m-5"}>
|
|
<Link className={""} href={"/me"}>Mehr zu mir</Link>
|
|
</Button>
|
|
</section>
|
|
</div>
|
|
<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>
|
|
</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"}>
|
|
<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"}>
|
|
<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"}>
|
|
<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"}>
|
|
<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"}>
|
|
<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"}>
|
|
<Link href={"https://github.com/KrisHD1337?tab=repositories&q=&type=&language=sql&sort="}
|
|
target={"_blank"}>SQL</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|