├── .eslintrc.json ├── public ├── og.png ├── favicon.ico ├── vercel.svg ├── next.svg └── pc-logo.svg ├── .prettierignore ├── .gitattributes ├── next.config.js ├── postcss.config.js ├── .env.example ├── src ├── components │ ├── ui │ │ ├── skeleton.tsx │ │ ├── label.tsx │ │ ├── textarea.tsx │ │ ├── input.tsx │ │ ├── progress.tsx │ │ ├── badge.tsx │ │ ├── tooltip.tsx │ │ ├── hover-card.tsx │ │ ├── avatar.tsx │ │ ├── alert.tsx │ │ ├── button.tsx │ │ ├── card.tsx │ │ └── dropdown-menu.tsx │ ├── theme-provider.tsx │ ├── common │ │ ├── heading-text.tsx │ │ └── social-media-icons.tsx │ ├── layout │ │ ├── footer.tsx │ │ └── navbar.tsx │ ├── timer │ │ ├── elapsed-time.tsx │ │ └── progress-bar.tsx │ ├── loaders │ │ ├── projects-skeleton.tsx │ │ └── statistics-skeleton.tsx │ ├── animation │ │ └── cube.tsx │ ├── projects │ │ └── project-card.tsx │ ├── statistics │ │ ├── code-time.tsx │ │ └── languages.tsx │ ├── mode-toggle.tsx │ ├── music │ │ └── soundcloud-wrapper.tsx │ ├── handbook.tsx │ └── introduction.tsx ├── lib │ ├── utils.ts │ ├── api │ │ ├── github.ts │ │ └── wakatime.ts │ ├── language-colors.ts │ └── time.ts ├── config │ └── site.ts ├── env.mjs ├── app │ ├── handbook │ │ └── page.tsx │ ├── providers.tsx │ ├── statistics │ │ ├── loading.tsx │ │ └── page.tsx │ ├── PostHogPageView.tsx │ ├── (home) │ │ ├── loading.tsx │ │ └── page.tsx │ ├── music │ │ └── page.tsx │ └── layout.tsx ├── types │ └── index.d.ts └── styles │ └── globals.css ├── components.json ├── .gitignore ├── tsconfig.json ├── prettier.config.js ├── README.md ├── LICENSE ├── package.json └── tailwind.config.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /public/og.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maakle/website/HEAD/public/og.png -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | .next 4 | package.json 5 | pnpm-lock.yaml -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maakle/website/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {} 3 | 4 | module.exports = nextConfig 5 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_APP_URL=http://localhost:3000 2 | NEXT_PUBLIC_POSTHOG_KEY= 3 | NEXT_PUBLIC_POSTHOG_HOST=https://eu.i.posthog.com 4 | NEXT_PUBLIC_GOOGLE_TAG_ID= 5 | 6 | GH_API_URL=https://gh-pinned-repos-tsj7ta5xfhep.deno.dev 7 | WAKATIME_API_KEY=waka_ 8 | -------------------------------------------------------------------------------- /src/components/ui/skeleton.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from "@/lib/utils" 2 | 3 | function Skeleton({ 4 | className, 5 | ...props 6 | }: React.HTMLAttributes) { 7 | return ( 8 |
12 | ) 13 | } 14 | 15 | export { Skeleton } 16 | -------------------------------------------------------------------------------- /src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | import { env } from "@/env.mjs" 5 | 6 | export function cn(...inputs: ClassValue[]) { 7 | return twMerge(clsx(inputs)) 8 | } 9 | 10 | export function absoluteUrl(path: string) { 11 | return `${env.NEXT_PUBLIC_APP_URL}${path}` 12 | } 13 | 14 | export { env } 15 | -------------------------------------------------------------------------------- /src/components/theme-provider.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import { ThemeProvider as NextThemesProvider } from "next-themes" 5 | import { type ThemeProviderProps } from "next-themes/dist/types" 6 | 7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) { 8 | return {children} 9 | } 10 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.js", 8 | "css": "src/styles/globals.css", 9 | "baseColor": "zinc", 10 | "cssVariables": true 11 | }, 12 | "aliases": { 13 | "components": "@/components", 14 | "utils": "@/lib/utils" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/components/common/heading-text.tsx: -------------------------------------------------------------------------------- 1 | interface HeadingProps { 2 | children: string 3 | subtext?: string 4 | } 5 | 6 | export function HeadingText({ children, subtext }: HeadingProps) { 7 | return ( 8 |
9 |

{children}

10 | {subtext && ( 11 |

12 | {subtext} 13 |

14 | )} 15 |
16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /src/components/layout/footer.tsx: -------------------------------------------------------------------------------- 1 | import { siteConfig } from "@/config/site" 2 | 3 | export default function Footer() { 4 | return ( 5 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /src/config/site.ts: -------------------------------------------------------------------------------- 1 | import { SiteConfig } from "@/types" 2 | 3 | import { env } from "@/env.mjs" 4 | 5 | export const siteConfig: SiteConfig = { 6 | name: "maakle", 7 | author: "maakle", 8 | description: "Maakle's website", 9 | url: env.NEXT_PUBLIC_APP_URL, 10 | ogImage: `${env.NEXT_PUBLIC_APP_URL}/og.png`, 11 | links: { 12 | github: "https://github.com/maakle", 13 | twitter: "https://twitter.com/maaklen", 14 | linkedin: "https://www.linkedin.com/in/mathiasklenk", 15 | }, 16 | } 17 | -------------------------------------------------------------------------------- /src/env.mjs: -------------------------------------------------------------------------------- 1 | import { createEnv } from "@t3-oss/env-nextjs" 2 | import { z } from "zod" 3 | 4 | export const env = createEnv({ 5 | server: { 6 | WAKATIME_API_KEY: z.string().startsWith("waka_"), 7 | GH_API_URL: z.string().startsWith("https://"), 8 | }, 9 | client: { 10 | NEXT_PUBLIC_APP_URL: z.string().min(1), 11 | }, 12 | runtimeEnv: { 13 | WAKATIME_API_KEY: process.env.WAKATIME_API_KEY, 14 | GH_API_URL: process.env.GH_API_URL, 15 | NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL, 16 | }, 17 | }) 18 | -------------------------------------------------------------------------------- /src/app/handbook/page.tsx: -------------------------------------------------------------------------------- 1 | import { HeadingText } from "@/components/common/heading-text" 2 | import { Handbook } from "@/components/handbook" 3 | 4 | export const metadata = { 5 | title: "Handbook", 6 | description: "How I work & operate", 7 | } 8 | 9 | export default async function Music() { 10 | return ( 11 |
12 |
13 | Handbook 14 | 15 |
16 |
17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | 37 | .vercel 38 | 39 | .env 40 | -------------------------------------------------------------------------------- /src/lib/api/github.ts: -------------------------------------------------------------------------------- 1 | import wretch from "wretch" 2 | 3 | import { env } from "@/env.mjs" 4 | 5 | const apiUrl = env.GH_API_URL 6 | 7 | // Instantiate and configure wretch 8 | const api = wretch(apiUrl, { 9 | cache: "no-store", 10 | mode: "cors", 11 | }) 12 | .errorType("json") 13 | .resolve((r) => r.json()) 14 | 15 | // Fetch my pinned repository 16 | export const getRepo = async () => { 17 | try { 18 | return await api.get("/?username=maakle") 19 | } catch (error) { 20 | console.error("Error fetching data:", error) 21 | return { error: "Failed fetching data" } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/lib/language-colors.ts: -------------------------------------------------------------------------------- 1 | export const languageColors: Record = { 2 | TypeScript: "#3178c6", 3 | JavaScript: "#f1e05a", 4 | PHP: "#4f5d95", 5 | HTML: "#e34c26", 6 | C: "#555555", 7 | ["C++"]: "#f34b7d", 8 | ["C#"]: "#178600", 9 | SQL: "#e38c00", 10 | Markdown: "#083fa1", 11 | Java: "#b07219", 12 | Python: "#3572A5", 13 | JSON: "#292929", 14 | Ruby: "#701516", 15 | Go: "#00ADD8", 16 | Swift: "#ffac45", 17 | Kotlin: "#F18E33", 18 | Shell: "#89e051", 19 | Rust: "#dea584", 20 | Dart: "#00B4AB", 21 | CSS: "#563d7c", 22 | SCSS: "#c6538c", 23 | Vue: "#41b883", 24 | } 25 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/timer/elapsed-time.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | 5 | import { discordTimestamp } from "@/lib/time" 6 | 7 | interface TimestampProps { 8 | unixTimestamp: number 9 | } 10 | 11 | export function ElapsedTime({ unixTimestamp }: TimestampProps) { 12 | const [timeAgo, setTimeAgo] = React.useState(discordTimestamp(unixTimestamp)) 13 | 14 | React.useEffect(() => { 15 | const intervalId = setInterval(() => { 16 | setTimeAgo(discordTimestamp(unixTimestamp)) 17 | }, 1000) 18 | 19 | return () => clearInterval(intervalId) 20 | }, [unixTimestamp]) 21 | 22 | return <>{timeAgo} 23 | } 24 | -------------------------------------------------------------------------------- /src/components/loaders/projects-skeleton.tsx: -------------------------------------------------------------------------------- 1 | import { Skeleton } from "@/components/ui/skeleton" 2 | 3 | export function ProjectsSkeleton() { 4 | return ( 5 | <> 6 | {Array.from({ length: 6 }).map((_, index) => ( 7 |
8 |
9 | 10 | 11 | 12 |
13 | 14 |
15 | ))} 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /src/app/providers.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import posthog from "posthog-js" 4 | import { PostHogProvider } from "posthog-js/react" 5 | 6 | if (typeof window !== "undefined") { 7 | posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, { 8 | api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST, 9 | person_profiles: "identified_only", 10 | capture_pageview: false, // Disable automatic pageview capture, as we capture manually 11 | capture_pageleave: true, // Enable pageleave capture 12 | }) 13 | } 14 | 15 | export function PHProvider({ children }: { children: React.ReactNode }) { 16 | return {children} 17 | } 18 | -------------------------------------------------------------------------------- /src/app/statistics/loading.tsx: -------------------------------------------------------------------------------- 1 | import { HeadingText } from "@/components/common/heading-text" 2 | import { StatisticSkeleton } from "@/components/loaders/statistics-skeleton" 3 | 4 | export const metadata = { 5 | title: "Statistics", 6 | description: "Statistics about my programming", 7 | } 8 | 9 | export default async function Loading() { 10 | return ( 11 |
12 |
13 | 14 | Statistics 15 | 16 |
17 | 18 |
19 |
20 |
21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /src/lib/api/wakatime.ts: -------------------------------------------------------------------------------- 1 | import wretch from "wretch" 2 | 3 | import { env } from "../utils" 4 | 5 | // Instantiate and configure wretch 6 | const api = wretch("https://wakatime.com", { cache: "no-store" }) 7 | .errorType("json") 8 | .resolve((r) => r.json()) 9 | 10 | // Fetch stats from wakatime 11 | export const getCodingStats = async () => { 12 | try { 13 | return await api 14 | .headers({ 15 | Authorization: `Basic ${Buffer.from(env.WAKATIME_API_KEY).toString( 16 | "base64" 17 | )}`, 18 | }) 19 | .get("/api/v1/users/current/stats") 20 | } catch (error) { 21 | console.error("Error fetching data:", error) 22 | return { error: "Failed fetching data" } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "bundler", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "plugins": [ 18 | { 19 | "name": "next" 20 | } 21 | ], 22 | "paths": { 23 | "@/*": ["./src/*"] 24 | } 25 | }, 26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 27 | "exclude": ["node_modules"] 28 | } 29 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('prettier').Config} */ 2 | module.exports = { 3 | endOfLine: "lf", 4 | semi: false, 5 | singleQuote: false, 6 | tabWidth: 2, 7 | trailingComma: "es5", 8 | importOrder: [ 9 | "^(react/(.*)$)|^(react$)", 10 | "^(next/(.*)$)|^(next$)", 11 | "", 12 | "", 13 | "^types$", 14 | "^@/env(.*)$", 15 | "^@/types/(.*)$", 16 | "^@/config/(.*)$", 17 | "^@/lib/(.*)$", 18 | "^@/components/ui/(.*)$", 19 | "^@/components/(.*)$", 20 | "^@/app/(.*)$", 21 | "", 22 | "^[./]", 23 | ], 24 | importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"], 25 | plugins: [ 26 | "@ianvs/prettier-plugin-sort-imports", 27 | "prettier-plugin-tailwindcss", 28 | ], 29 | } 30 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # maakle.com 2 | 3 | My personal website built with [Next.js](https://nextjs.org/), [Tailwind](https://tailwindcss.org/), [Radix](https://www.radix-ui.com/), and [Shadcn](https://ui.shadcn.com/). 4 | 5 | ## Local Installation 6 | 7 | First, install the dependencies: 8 | 9 | ```bash 10 | npm i 11 | # or 12 | pnpm i 13 | ``` 14 | 15 | Then, run development server: 16 | 17 | ```bash 18 | npm run dev 19 | # or 20 | pnpm run dev 21 | ``` 22 | 23 | Finally, create a local env file. Refer to [.env.example](./.env.example). 24 | 25 | Open [http://localhost:3000](http://localhost:3000) with your browser to view the app. 26 | 27 | ## License 28 | 29 | This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](LICENSE) file for details. 30 | -------------------------------------------------------------------------------- /src/app/PostHogPageView.tsx: -------------------------------------------------------------------------------- 1 | // app/PostHogPageView.tsx 2 | "use client" 3 | 4 | import { useEffect } from "react" 5 | import { usePathname, useSearchParams } from "next/navigation" 6 | import { usePostHog } from "posthog-js/react" 7 | 8 | export default function PostHogPageView(): null { 9 | const pathname = usePathname() 10 | const searchParams = useSearchParams() 11 | const posthog = usePostHog() 12 | useEffect(() => { 13 | // Track pageviews 14 | if (pathname && posthog) { 15 | let url = window.origin + pathname 16 | if (searchParams.toString()) { 17 | url = url + `?${searchParams.toString()}` 18 | } 19 | posthog.capture("$pageview", { 20 | $current_url: url, 21 | }) 22 | } 23 | }, [pathname, searchParams, posthog]) 24 | 25 | return null 26 | } 27 | -------------------------------------------------------------------------------- /src/components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as LabelPrimitive from "@radix-ui/react-label" 5 | import { cva, type VariantProps } from "class-variance-authority" 6 | 7 | import { cn } from "@/lib/utils" 8 | 9 | const labelVariants = cva( 10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" 11 | ) 12 | 13 | const Label = React.forwardRef< 14 | React.ElementRef, 15 | React.ComponentPropsWithoutRef & 16 | VariantProps 17 | >(({ className, ...props }, ref) => ( 18 | 23 | )) 24 | Label.displayName = LabelPrimitive.Root.displayName 25 | 26 | export { Label } 27 | -------------------------------------------------------------------------------- /src/components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | export interface TextareaProps 6 | extends React.TextareaHTMLAttributes {} 7 | 8 | const Textarea = React.forwardRef( 9 | ({ className, ...props }, ref) => { 10 | return ( 11 |