Release v1.1.0
This commit is contained in:
Markus Thielker
GitHub
commit
60481a9adf
4 changed files with 129 additions and 126 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "portfolio",
|
||||
"version": "0.1.0",
|
||||
"version": "1.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"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);
|
||||
|
||||
const age = calculateAge(new Date('2001-03-04'));
|
||||
const year = new Date().getFullYear()
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
|
|
@ -105,7 +106,7 @@ export default async function Home() {
|
|||
{ /* search header */}
|
||||
<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-yellow-500">L</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">
|
||||
|
||||
{ /* input */}
|
||||
<Input
|
||||
className="w-full bg-neutral-700 p-6 rounded-full"
|
||||
value="Who the fuck is Markus Thielker?"
|
||||
readOnly/>
|
||||
<div className="relative w-full">
|
||||
<Input
|
||||
className="w-full bg-neutral-700 p-6 pl-24 xl:pl-6 rounded-full"
|
||||
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 */}
|
||||
<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">Images</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">Finances</span>
|
||||
</div>
|
||||
|
|
@ -151,128 +159,123 @@ export default async function Home() {
|
|||
</section>
|
||||
|
||||
{ /* card grid */}
|
||||
<section className="w-full overflow-y-scroll">
|
||||
<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">
|
||||
<section className="grid gap-4 grid-cols-2 sm:grid-cols-4 md:grid-cols-8">
|
||||
|
||||
{ /* images */}
|
||||
<Card
|
||||
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 col-span-1 lg:col-span-3 row-span-1 lg:row-span-2 items-center overflow-hidden">
|
||||
<Image
|
||||
height="500"
|
||||
width="500"
|
||||
src="/portrait-two.png"
|
||||
className="aspect-square overflow-hidden"
|
||||
alt="Portrait of Markus Thielker"/>
|
||||
</div>
|
||||
<div className="flex col-span-1 lg:col-span-2 row-span-1 items-center overflow-hidden">
|
||||
<Image
|
||||
height="1200"
|
||||
width="1600"
|
||||
src="/portrait-one.jpg"
|
||||
className="overflow-hidden"
|
||||
alt="Portrait of Markus Thielker"/>
|
||||
</div>
|
||||
<div
|
||||
className="hidden md:flex col-span-1 lg:col-span-2 row-span-1 items-center overflow-hidden">
|
||||
<Image
|
||||
height="500"
|
||||
width="500"
|
||||
src="/portrait-three.png"
|
||||
className="aspect-square overflow-hidden"
|
||||
alt="Portrait of Markus Thielker"/>
|
||||
</div>
|
||||
</Card>
|
||||
{ /* images */}
|
||||
<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">
|
||||
<div className="flex sm:col-span-1 lg:col-span-3 lg:row-span-2 max-h-72">
|
||||
<Image
|
||||
height="500"
|
||||
width="500"
|
||||
style={{ objectFit: 'cover' }}
|
||||
src="/portrait-two.png"
|
||||
alt="Portrait of Markus Thielker"/>
|
||||
</div>
|
||||
<div className="hidden sm:flex lg:col-span-2 max-h-72 lg:max-h-36">
|
||||
<Image
|
||||
height="500"
|
||||
width="500"
|
||||
style={{ objectFit: 'cover' }}
|
||||
src="/portrait-one.png"
|
||||
alt="Portrait of Markus Thielker"/>
|
||||
</div>
|
||||
<div className="hidden lg:flex lg:col-span-2 lg:max-h-36">
|
||||
<Image
|
||||
height="500"
|
||||
width="500"
|
||||
style={{ objectFit: 'cover' }}
|
||||
src="/portrait-three.png"
|
||||
alt="Portrait of Markus Thielker"/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{ /* GitHub */}
|
||||
<Link href="https://github.com/markusthielker"
|
||||
className="col-span-2 row-span-1 lg:row-span-2 h-full">
|
||||
<Card className="h-full">
|
||||
<CardContent className="pt-4">
|
||||
<div className="flex flex-row items-center space-x-2">
|
||||
<Image
|
||||
height="50"
|
||||
width="50"
|
||||
className="rounded-full h-4 w-4"
|
||||
src="/github-logo.png"
|
||||
alt="GitHub"/>
|
||||
<span>GitHub</span>
|
||||
{ /* GitHub */}
|
||||
<Link
|
||||
href="https://github.com/markusthielker"
|
||||
className="col-span-2 sm:row-span-2">
|
||||
<Card className="h-full">
|
||||
<CardContent className="pt-4">
|
||||
<div className="flex flex-row items-center space-x-2">
|
||||
<Image
|
||||
height="50"
|
||||
width="50"
|
||||
className="rounded-full h-4 w-4"
|
||||
src="/github-logo.png"
|
||||
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 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>
|
||||
<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>
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
|
||||
{ /* age */}
|
||||
<Card className="md:col-span-2 lg:col-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="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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
|
||||
{ /* 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>
|
||||
}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
|
||||
{ /* default content (centered) */}
|
||||
|
|
@ -348,7 +351,7 @@ export default async function Home() {
|
|||
</main>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue