Information grid
This commit is contained in:
Markus Thielker
parent
e008729aad
commit
b4ac37f316
3 changed files with 249 additions and 0 deletions
BIN
public/github-logo.png
Normal file
BIN
public/github-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
141
src/app/page.tsx
141
src/app/page.tsx
|
|
@ -4,6 +4,10 @@ import { Input } from '@/components/ui/input';
|
||||||
import { Separator } from '@/components/ui/separator';
|
import { Separator } from '@/components/ui/separator';
|
||||||
|
|
||||||
export default async function Home() {
|
export default async function Home() {
|
||||||
|
|
||||||
|
const response = await fetch("https://api.github.com/users/markusthielker")
|
||||||
|
const profile = await response.json() as PublicUser
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col w-full min-h-screen">
|
<div className="flex flex-col w-full min-h-screen">
|
||||||
|
|
||||||
|
|
@ -24,6 +28,143 @@ export default async function Home() {
|
||||||
|
|
||||||
<Separator/>
|
<Separator/>
|
||||||
|
|
||||||
|
<main className="flex flex-col w-full justify-center max-w-6xl">
|
||||||
|
|
||||||
|
{ /* heading */}
|
||||||
|
<section className="p-4 w-full overflow-y-scroll">
|
||||||
|
<p className="text-3xl font-semibold">Markus Thielker</p>
|
||||||
|
<p className="text-lg font-light text-neutral-500">Software Engineer</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{ /* card grid */}
|
||||||
|
<section className="p-4 w-full overflow-y-scroll">
|
||||||
|
<div className="grid grid-cols-8 grid-rows-2 gap-4 h-64">
|
||||||
|
|
||||||
|
{ /* images */}
|
||||||
|
<Card className="col-span-4 row-span-2 grid grid-cols-5 grid-rows-2 overflow-hidden">
|
||||||
|
<div className="flex col-span-3 row-span-2 items-center overflow-hidden">
|
||||||
|
<Image
|
||||||
|
height="350"
|
||||||
|
width="350"
|
||||||
|
src="/portrait.png"
|
||||||
|
className="aspect-square overflow-hidden"
|
||||||
|
alt="Portrait of Markus Thielker"/>
|
||||||
|
</div>
|
||||||
|
<div className="flex col-span-2 row-span-1 items-center overflow-hidden">
|
||||||
|
<Image
|
||||||
|
height="225"
|
||||||
|
width="225"
|
||||||
|
src="/portrait.png"
|
||||||
|
className="aspect-square overflow-hidden"
|
||||||
|
alt="Portrait of Markus Thielker"/>
|
||||||
|
</div>
|
||||||
|
<div className="flex col-span-2 row-span-1 items-center overflow-hidden">
|
||||||
|
<Image
|
||||||
|
height="225"
|
||||||
|
width="225"
|
||||||
|
src="/portrait.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-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>
|
||||||
|
</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">{profile.name}</span>
|
||||||
|
<span className="text-md">{profile.followers} Followers</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-sm text-white/50">{profile.bio}</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-md text-white/80">23 Jahre</span>
|
||||||
|
<span className="text-sm text-white/80">04. März 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-md text-white/80">Looking for employment</span>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{ /* TODO */}
|
||||||
|
<Card className="col-span-2 row-span-1">
|
||||||
|
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{ /* search results */}
|
||||||
|
<section className="h-full p-4 grid grid-cols-3">
|
||||||
|
<div className="h-full col-span-2 space-y-8">
|
||||||
|
<SearchResult
|
||||||
|
website="LinkedIn"
|
||||||
|
website_icon_uri="/linkedin-logo.png"
|
||||||
|
href="https://linkedin.com/in/markusthielker"
|
||||||
|
title="LinkedIn"
|
||||||
|
description="Als erfahrener Softwareentwickler bin ich stolz darauf, innovative Software Lösungen zu schaffen. Neben meiner beruflichen Tätigkeit engagiere ich mich auch in persönlichen Projekten, insbesondere in den Bereichen Web- und Android Full Stack Entwicklung."/>
|
||||||
|
<SearchResult
|
||||||
|
website="GitHub"
|
||||||
|
website_icon_uri="/github-logo.png"
|
||||||
|
href="https://github.com/markusthielker"
|
||||||
|
title="Markus Thielker"
|
||||||
|
description="Full stack developer of Kotlin and Java backends with experience in Android, React and Angular frontend development."/>
|
||||||
|
<SearchResult
|
||||||
|
website="Bluesky"
|
||||||
|
website_icon_uri="/bluesky-logo.svg"
|
||||||
|
href="https://bsky.app/profile/thielker.dev"
|
||||||
|
title="Markus Thielker @thielker.dev"
|
||||||
|
description="23 | Software Engineer | links-grün versiffter Veganer"/>
|
||||||
|
<SearchResult
|
||||||
|
website="GitHub"
|
||||||
|
website_icon_uri="/github-logo.png"
|
||||||
|
href="https://github.com/markusthielker/next-ory"
|
||||||
|
title="MarkusThielker/next-ory"
|
||||||
|
description="☄️ An easy-to-use starting point to self-host Ory Kratos with OAuth2 and OIDC, NextJS authentication UI and admin dashboard (work in progress) styled with TailwindCSS and shadcn/ui"
|
||||||
|
links={[
|
||||||
|
{
|
||||||
|
text: 'README.md',
|
||||||
|
href: 'https://github.com/MarkusThielker/next-ory/blob/development/README.md',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Releases',
|
||||||
|
href: 'https://github.com/MarkusThielker/next-ory/releases',
|
||||||
|
},
|
||||||
|
]}/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
108
src/lib/github-user.ts
Normal file
108
src/lib/github-user.ts
Normal file
|
|
@ -0,0 +1,108 @@
|
||||||
|
export type GithubUser = PrivateUser | PublicUser
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Private User
|
||||||
|
*/
|
||||||
|
export interface PrivateUser {
|
||||||
|
login: string
|
||||||
|
id: number
|
||||||
|
user_view_type?: string
|
||||||
|
node_id: string
|
||||||
|
avatar_url: string
|
||||||
|
gravatar_id: string | null
|
||||||
|
url: string
|
||||||
|
html_url: string
|
||||||
|
followers_url: string
|
||||||
|
following_url: string
|
||||||
|
gists_url: string
|
||||||
|
starred_url: string
|
||||||
|
subscriptions_url: string
|
||||||
|
organizations_url: string
|
||||||
|
repos_url: string
|
||||||
|
events_url: string
|
||||||
|
received_events_url: string
|
||||||
|
type: string
|
||||||
|
site_admin: boolean
|
||||||
|
name: string | null
|
||||||
|
company: string | null
|
||||||
|
blog: string | null
|
||||||
|
location: string | null
|
||||||
|
email: string | null
|
||||||
|
notification_email?: string | null
|
||||||
|
hireable: boolean | null
|
||||||
|
bio: string | null
|
||||||
|
twitter_username?: string | null
|
||||||
|
public_repos: number
|
||||||
|
public_gists: number
|
||||||
|
followers: number
|
||||||
|
following: number
|
||||||
|
created_at: string
|
||||||
|
updated_at: string
|
||||||
|
private_gists: number
|
||||||
|
total_private_repos: number
|
||||||
|
owned_private_repos: number
|
||||||
|
disk_usage: number
|
||||||
|
collaborators: number
|
||||||
|
two_factor_authentication: boolean
|
||||||
|
plan?: {
|
||||||
|
collaborators: number
|
||||||
|
name: string
|
||||||
|
space: number
|
||||||
|
private_repos: number
|
||||||
|
[k: string]: unknown
|
||||||
|
}
|
||||||
|
business_plus?: boolean
|
||||||
|
ldap_dn?: string
|
||||||
|
[k: string]: unknown
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Public User
|
||||||
|
*/
|
||||||
|
export interface PublicUser {
|
||||||
|
login: string
|
||||||
|
id: number
|
||||||
|
user_view_type?: string
|
||||||
|
node_id: string
|
||||||
|
avatar_url: string
|
||||||
|
gravatar_id: string | null
|
||||||
|
url: string
|
||||||
|
html_url: string
|
||||||
|
followers_url: string
|
||||||
|
following_url: string
|
||||||
|
gists_url: string
|
||||||
|
starred_url: string
|
||||||
|
subscriptions_url: string
|
||||||
|
organizations_url: string
|
||||||
|
repos_url: string
|
||||||
|
events_url: string
|
||||||
|
received_events_url: string
|
||||||
|
type: string
|
||||||
|
site_admin: boolean
|
||||||
|
name: string | null
|
||||||
|
company: string | null
|
||||||
|
blog: string | null
|
||||||
|
location: string | null
|
||||||
|
email: string | null
|
||||||
|
notification_email?: string | null
|
||||||
|
hireable: boolean | null
|
||||||
|
bio: string | null
|
||||||
|
twitter_username?: string | null
|
||||||
|
public_repos: number
|
||||||
|
public_gists: number
|
||||||
|
followers: number
|
||||||
|
following: number
|
||||||
|
created_at: string
|
||||||
|
updated_at: string
|
||||||
|
plan?: {
|
||||||
|
collaborators: number
|
||||||
|
name: string
|
||||||
|
space: number
|
||||||
|
private_repos: number
|
||||||
|
[k: string]: unknown
|
||||||
|
}
|
||||||
|
private_gists?: number
|
||||||
|
total_private_repos?: number
|
||||||
|
owned_private_repos?: number
|
||||||
|
disk_usage?: number
|
||||||
|
collaborators?: number
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue