Compare commits
4 commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
60481a9adf | ||
|
|
05bd6822db | ||
|
|
83464ecb7d | ||
|
|
8de2a8fdb7 |
4 changed files with 129 additions and 126 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "portfolio",
|
"name": "portfolio",
|
||||||
"version": "0.1.0",
|
"version": "1.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 344 KiB |
BIN
public/portrait-one.png
Normal file
BIN
public/portrait-one.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 378 KiB |
253
src/app/page.tsx
253
src/app/page.tsx
|
|
@ -98,6 +98,7 @@ export default async function Home() {
|
||||||
.slice(0, 3);
|
.slice(0, 3);
|
||||||
|
|
||||||
const age = calculateAge(new Date('2001-03-04'));
|
const age = calculateAge(new Date('2001-03-04'));
|
||||||
|
const year = new Date().getFullYear()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col min-h-screen">
|
<div className="flex flex-col min-h-screen">
|
||||||
|
|
@ -105,7 +106,7 @@ export default async function Home() {
|
||||||
{ /* search header */}
|
{ /* search header */}
|
||||||
<header className="relative p-4 pb-0 lg:p-8 lg:pb-0">
|
<header className="relative p-4 pb-0 lg:p-8 lg:pb-0">
|
||||||
|
|
||||||
<div className="hidden lg:block absolute top-10 cursor-pointer text-3xl">
|
<div className="hidden xl:flex absolute top-10 cursor-pointer text-3xl">
|
||||||
<span className="text-blue-500">T</span>
|
<span className="text-blue-500">T</span>
|
||||||
<span className="text-yellow-500">L</span>
|
<span className="text-yellow-500">L</span>
|
||||||
<span className="text-green-500">K</span>
|
<span className="text-green-500">K</span>
|
||||||
|
|
@ -117,10 +118,18 @@ export default async function Home() {
|
||||||
<div className="flex flex-col items-center w-full justify-start max-w-6xl">
|
<div className="flex flex-col items-center w-full justify-start max-w-6xl">
|
||||||
|
|
||||||
{ /* input */}
|
{ /* input */}
|
||||||
<Input
|
<div className="relative w-full">
|
||||||
className="w-full bg-neutral-700 p-6 rounded-full"
|
<Input
|
||||||
value="Who the fuck is Markus Thielker?"
|
className="w-full bg-neutral-700 p-6 pl-24 xl:pl-6 rounded-full"
|
||||||
readOnly/>
|
value="Who the fuck is Markus Thielker?"
|
||||||
|
readOnly/>
|
||||||
|
<div className="xl:hidden absolute top-2.5 left-5 cursor-pointer text-2xl">
|
||||||
|
<span className="text-blue-500">T</span>
|
||||||
|
<span className="text-yellow-500">L</span>
|
||||||
|
<span className="text-green-500">K</span>
|
||||||
|
<span className="text-red-500">R</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{ /* tab navigation */}
|
{ /* tab navigation */}
|
||||||
<div className="flex flex-row w-full mt-6 text-sm text-white/50 cursor-pointer">
|
<div className="flex flex-row w-full mt-6 text-sm text-white/50 cursor-pointer">
|
||||||
|
|
@ -128,7 +137,6 @@ export default async function Home() {
|
||||||
<span className="px-3 pb-2">News</span>
|
<span className="px-3 pb-2">News</span>
|
||||||
<span className="px-3 pb-2">Images</span>
|
<span className="px-3 pb-2">Images</span>
|
||||||
<span className="px-3 pb-2">Videos</span>
|
<span className="px-3 pb-2">Videos</span>
|
||||||
<span className="px-3 pb-2">Books</span>
|
|
||||||
<span className="px-3 pb-2">Web</span>
|
<span className="px-3 pb-2">Web</span>
|
||||||
<span className="px-3 pb-2">Finances</span>
|
<span className="px-3 pb-2">Finances</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -151,128 +159,123 @@ export default async function Home() {
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{ /* card grid */}
|
{ /* card grid */}
|
||||||
<section className="w-full overflow-y-scroll">
|
<section className="grid gap-4 grid-cols-2 sm:grid-cols-4 md:grid-cols-8">
|
||||||
<div
|
|
||||||
className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 grid-rows-3 lg:grid-rows-2 gap-4 max-h-92 lg:max-h-72">
|
|
||||||
|
|
||||||
{ /* images */}
|
{ /* images */}
|
||||||
<Card
|
<Card className="col-span-2 sm:col-span-4 md:row-span-2 overflow-hidden sm:grid sm:gap-0.5 sm:grid-cols-2 lg:grid-cols-5 sm:grid-row-2 md:max-h-72">
|
||||||
className="col-span-4 row-span-2 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 grid-rows-1 lg:grid-rows-2 overflow-hidden gap-0.5">
|
<div className="flex sm:col-span-1 lg:col-span-3 lg:row-span-2 max-h-72">
|
||||||
<div
|
<Image
|
||||||
className="flex col-span-1 lg:col-span-3 row-span-1 lg:row-span-2 items-center overflow-hidden">
|
height="500"
|
||||||
<Image
|
width="500"
|
||||||
height="500"
|
style={{ objectFit: 'cover' }}
|
||||||
width="500"
|
src="/portrait-two.png"
|
||||||
src="/portrait-two.png"
|
alt="Portrait of Markus Thielker"/>
|
||||||
className="aspect-square overflow-hidden"
|
</div>
|
||||||
alt="Portrait of Markus Thielker"/>
|
<div className="hidden sm:flex lg:col-span-2 max-h-72 lg:max-h-36">
|
||||||
</div>
|
<Image
|
||||||
<div className="flex col-span-1 lg:col-span-2 row-span-1 items-center overflow-hidden">
|
height="500"
|
||||||
<Image
|
width="500"
|
||||||
height="1200"
|
style={{ objectFit: 'cover' }}
|
||||||
width="1600"
|
src="/portrait-one.png"
|
||||||
src="/portrait-one.jpg"
|
alt="Portrait of Markus Thielker"/>
|
||||||
className="overflow-hidden"
|
</div>
|
||||||
alt="Portrait of Markus Thielker"/>
|
<div className="hidden lg:flex lg:col-span-2 lg:max-h-36">
|
||||||
</div>
|
<Image
|
||||||
<div
|
height="500"
|
||||||
className="hidden md:flex col-span-1 lg:col-span-2 row-span-1 items-center overflow-hidden">
|
width="500"
|
||||||
<Image
|
style={{ objectFit: 'cover' }}
|
||||||
height="500"
|
src="/portrait-three.png"
|
||||||
width="500"
|
alt="Portrait of Markus Thielker"/>
|
||||||
src="/portrait-three.png"
|
</div>
|
||||||
className="aspect-square overflow-hidden"
|
</Card>
|
||||||
alt="Portrait of Markus Thielker"/>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{ /* GitHub */}
|
{ /* GitHub */}
|
||||||
<Link href="https://github.com/markusthielker"
|
<Link
|
||||||
className="col-span-2 row-span-1 lg:row-span-2 h-full">
|
href="https://github.com/markusthielker"
|
||||||
<Card className="h-full">
|
className="col-span-2 sm:row-span-2">
|
||||||
<CardContent className="pt-4">
|
<Card className="h-full">
|
||||||
<div className="flex flex-row items-center space-x-2">
|
<CardContent className="pt-4">
|
||||||
<Image
|
<div className="flex flex-row items-center space-x-2">
|
||||||
height="50"
|
<Image
|
||||||
width="50"
|
height="50"
|
||||||
className="rounded-full h-4 w-4"
|
width="50"
|
||||||
src="/github-logo.png"
|
className="rounded-full h-4 w-4"
|
||||||
alt="GitHub"/>
|
src="/github-logo.png"
|
||||||
<span>GitHub</span>
|
alt="GitHub"/>
|
||||||
|
<span>GitHub</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col mt-2 space-y-4">
|
||||||
|
<div className="flex flex-col text-white/80 -space-y-1">
|
||||||
|
<span className="text-lg">MarkusThielker</span>
|
||||||
|
{
|
||||||
|
stars > 0 ?
|
||||||
|
<span className="text-lg">{stars} total stars</span>
|
||||||
|
:
|
||||||
|
<Skeleton className="w-16"/>
|
||||||
|
}
|
||||||
|
{
|
||||||
|
profile.followers ?
|
||||||
|
<span className="text-lg">{profile.followers} followers</span>
|
||||||
|
:
|
||||||
|
<Skeleton className="w-12"/>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col mt-2 space-y-4">
|
<span className="text-sm text-white/50">Full stack developer of Kotlin and Java backends with experience in Android, React and Angular frontend development.</span>
|
||||||
<div className="flex flex-col text-white/80 -space-y-1">
|
</div>
|
||||||
<span className="text-lg">MarkusThielker</span>
|
</CardContent>
|
||||||
{
|
</Card>
|
||||||
stars > 0 ?
|
</Link>
|
||||||
<span className="text-lg">{stars} total stars</span>
|
|
||||||
:
|
{ /* age */}
|
||||||
<Skeleton className="w-16"/>
|
<Card className="md:col-span-2 lg:col-span-1">
|
||||||
}
|
<CardHeader>
|
||||||
{
|
<CardDescription>
|
||||||
profile.followers ?
|
Age
|
||||||
<span className="text-lg">{profile.followers} followers</span>
|
</CardDescription>
|
||||||
:
|
</CardHeader>
|
||||||
<Skeleton className="w-12"/>
|
<CardContent className="flex flex-col">
|
||||||
}
|
<span className="text-lg text-white/80">{age} years</span>
|
||||||
</div>
|
<span className="text-sm text-white/80">March 2001</span>
|
||||||
<span className="text-sm text-white/50">Full stack developer of Kotlin and Java backends with experience in Android, React and Angular frontend development.</span>
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{ /* employer */}
|
||||||
|
<Card className="md:col-span-2 lg:col-span-1">
|
||||||
|
<CardHeader>
|
||||||
|
<CardDescription>
|
||||||
|
Employer
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col">
|
||||||
|
<span className="text-lg text-white/80">None</span>
|
||||||
|
<span className="text-sm text-white/80">Open for work</span>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{ /* TODO */}
|
||||||
|
<Card className="hidden sm:block sm:col-span-2 md:hidden lg:block">
|
||||||
|
<CardHeader>
|
||||||
|
<CardDescription>
|
||||||
|
Languages
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{
|
||||||
|
languagePercentages ?
|
||||||
|
<ul>
|
||||||
|
{Object.entries(languagePercentages).map(([index, language]) => (
|
||||||
|
<li key={index} className="text-sm text-white/80">
|
||||||
|
{language.name}: {Math.round(language.percent)} %
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
:
|
||||||
|
<div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
}
|
||||||
</Card>
|
</CardContent>
|
||||||
</Link>
|
</Card>
|
||||||
|
|
||||||
{ /* age */}
|
|
||||||
<Card className="col-span-1 row-span-1">
|
|
||||||
<CardHeader>
|
|
||||||
<CardDescription>
|
|
||||||
Age
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex flex-col">
|
|
||||||
<span className="text-lg text-white/80">{age} years</span>
|
|
||||||
<span className="text-sm text-white/80">March 2001</span>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{ /* employer */}
|
|
||||||
<Card className="col-span-1 row-span-1">
|
|
||||||
<CardHeader>
|
|
||||||
<CardDescription>
|
|
||||||
Employer
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex flex-col">
|
|
||||||
<span className="text-lg text-white/80">None</span>
|
|
||||||
<span className="text-sm text-white/80">Open for work</span>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{ /* TODO */}
|
|
||||||
<Card className="hidden lg:block col-span-2 row-span-1">
|
|
||||||
<CardHeader>
|
|
||||||
<CardDescription>
|
|
||||||
Languages
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
{
|
|
||||||
languagePercentages ?
|
|
||||||
<ul>
|
|
||||||
{Object.entries(languagePercentages).map(([index, language]) => (
|
|
||||||
<li key={index} className="text-sm text-white/80">
|
|
||||||
{language.name}: {Math.round(language.percent)} %
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
:
|
|
||||||
<div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{ /* default content (centered) */}
|
{ /* default content (centered) */}
|
||||||
|
|
@ -348,7 +351,7 @@ export default async function Home() {
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer className="flex items-center justify-center mt-8 h-16 bg-neutral-900">
|
<footer className="flex items-center justify-center mt-8 h-16 bg-neutral-900">
|
||||||
<span className="text-white/45">Markus Thielker © 2024</span>
|
<span className="text-white/45">Markus Thielker © {year}</span>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue