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

Compare commits

base: markus:main
Branches Tags
markus:development
markus:main
markus:v1.1.0
markus:v1.0.0
..
compare: markus:v1.0.0
Branches Tags
markus:development
markus:main
markus:v1.1.0
markus:v1.0.0

No commits in common. "main" and "v1.0.0" have entirely different histories.
main ... v1.0.0

4 changed files with 122 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

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

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 344 KiB

BIN
public/portrait-one.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 378 KiB

245
src/app/page.tsx
View file

@ -98,7 +98,6 @@ 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">
@ -106,7 +105,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 xl:flex absolute top-10 cursor-pointer text-3xl"> <div className="hidden lg:block 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>
@ -118,18 +117,10 @@ 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 */}
<div className="relative w-full"> <Input
<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?"
value="Who the fuck is Markus Thielker?" readOnly/>
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">
@ -137,6 +128,7 @@ 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>
@ -159,123 +151,128 @@ export default async function Home() {
</section> </section>
{ /* card grid */} { /* card grid */}
<section className="grid gap-4 grid-cols-2 sm:grid-cols-4 md:grid-cols-8"> <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">
{ /* images */} { /* 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"> <Card
<div className="flex sm:col-span-1 lg:col-span-3 lg:row-span-2 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">
<Image <div
height="500" className="flex col-span-1 lg:col-span-3 row-span-1 lg:row-span-2 items-center overflow-hidden">
width="500" <Image
style={{ objectFit: 'cover' }} height="500"
src="/portrait-two.png" width="500"
alt="Portrait of Markus Thielker"/> src="/portrait-two.png"
</div> className="aspect-square overflow-hidden"
<div className="hidden sm:flex lg:col-span-2 max-h-72 lg:max-h-36"> alt="Portrait of Markus Thielker"/>
<Image </div>
height="500" <div className="flex col-span-1 lg:col-span-2 row-span-1 items-center overflow-hidden">
width="500" <Image
style={{ objectFit: 'cover' }} height="1200"
src="/portrait-one.png" width="1600"
alt="Portrait of Markus Thielker"/> src="/portrait-one.jpg"
</div> className="overflow-hidden"
<div className="hidden lg:flex lg:col-span-2 lg:max-h-36"> alt="Portrait of Markus Thielker"/>
<Image </div>
height="500" <div
width="500" className="hidden md:flex col-span-1 lg:col-span-2 row-span-1 items-center overflow-hidden">
style={{ objectFit: 'cover' }} <Image
src="/portrait-three.png" height="500"
alt="Portrait of Markus Thielker"/> width="500"
</div> src="/portrait-three.png"
</Card> className="aspect-square overflow-hidden"
alt="Portrait of Markus Thielker"/>
</div>
</Card>
{ /* GitHub */} { /* GitHub */}
<Link <Link href="https://github.com/markusthielker"
href="https://github.com/markusthielker" className="col-span-2 row-span-1 lg:row-span-2 h-full">
className="col-span-2 sm:row-span-2"> <Card className="h-full">
<Card className="h-full"> <CardContent className="pt-4">
<CardContent className="pt-4"> <div className="flex flex-row items-center space-x-2">
<div className="flex flex-row items-center space-x-2"> <Image
<Image height="50"
height="50" width="50"
width="50" className="rounded-full h-4 w-4"
className="rounded-full h-4 w-4" src="/github-logo.png"
src="/github-logo.png" alt="GitHub"/>
alt="GitHub"/> <span>GitHub</span>
<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>
<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 mt-2 space-y-4">
</div> <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>
</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> </CardContent>
</Card> </Card>
</Link>
{ /* age */} { /* employer */}
<Card className="md:col-span-2 lg:col-span-1"> <Card className="col-span-1 row-span-1">
<CardHeader> <CardHeader>
<CardDescription> <CardDescription>
Age Employer
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="flex flex-col"> <CardContent className="flex flex-col">
<span className="text-lg text-white/80">{age} years</span> <span className="text-lg text-white/80">None</span>
<span className="text-sm text-white/80">March 2001</span> <span className="text-sm text-white/80">Open for work</span>
</CardContent> </CardContent>
</Card> </Card>
{ /* employer */} { /* TODO */}
<Card className="md:col-span-2 lg:col-span-1"> <Card className="hidden lg:block col-span-2 row-span-1">
<CardHeader> <CardHeader>
<CardDescription> <CardDescription>
Employer Languages
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="flex flex-col"> <CardContent>
<span className="text-lg text-white/80">None</span> {
<span className="text-sm text-white/80">Open for work</span> languagePercentages ?
</CardContent> <ul>
</Card> {Object.entries(languagePercentages).map(([index, language]) => (
<li key={index} className="text-sm text-white/80">
{language.name}: {Math.round(language.percent)} %
</li>
))}
</ul>
:
<div>
{ /* TODO */} </div>
<Card className="hidden sm:block sm:col-span-2 md:hidden lg:block"> }
<CardHeader> </CardContent>
<CardDescription> </Card>
Languages </div>
</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>
</section> </section>
{ /* default content (centered) */} { /* default content (centered) */}
@ -351,7 +348,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 &copy; {year}</span> <span className="text-white/45">Markus Thielker &copy; 2024</span>
</footer> </footer>
</div> </div>
); );