markus/portfolio
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

Release v1.1.0

Browse source
This commit is contained in:
Markus Thielker 2025-01-18 19:44:29 +01:00 • committed by GitHub
commit 60481a9adf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 129 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "portfolio",
"version": "0.1.0",
"version": "1.1.0",
"private": true,
"scripts": {
"dev": "next dev",

BIN
public/portrait-one.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 344 KiB

BIN
public/portrait-one.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 378 KiB

61
src/app/page.tsx
View file

@ -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 */}
<div className="relative w-full">
<Input
className="w-full bg-neutral-700 p-6 rounded-full"
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,44 +159,40 @@ 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">
<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"
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">
<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"
className="aspect-square overflow-hidden"
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">
<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">
@ -223,7 +227,7 @@ export default async function Home() {
</Link>
{ /* age */}
<Card className="col-span-1 row-span-1">
<Card className="md:col-span-2 lg:col-span-1">
<CardHeader>
<CardDescription>
Age
@ -236,7 +240,7 @@ export default async function Home() {
</Card>
{ /* employer */}
<Card className="col-span-1 row-span-1">
<Card className="md:col-span-2 lg:col-span-1">
<CardHeader>
<CardDescription>
Employer
@ -249,7 +253,7 @@ export default async function Home() {
</Card>
{ /* TODO */}
<Card className="hidden lg:block col-span-2 row-span-1">
<Card className="hidden sm:block sm:col-span-2 md:hidden lg:block">
<CardHeader>
<CardDescription>
Languages
@ -272,7 +276,6 @@ export default async function Home() {
}
</CardContent>
</Card>
</div>
</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 &copy; 2024</span>
<span className="text-white/45">Markus Thielker &copy; {year}</span>
</footer>
</div>
);