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';
|
||||
|
||||
export default async function Home() {
|
||||
|
||||
const response = await fetch("https://api.github.com/users/markusthielker")
|
||||
const profile = await response.json() as PublicUser
|
||||
|
||||
return (
|
||||
<div className="flex flex-col w-full min-h-screen">
|
||||
|
||||
|
|
@ -24,6 +28,143 @@ export default async function Home() {
|
|||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
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