├── app
    ├── favicon.ico
    ├── robots.ts
    ├── header.tsx
    ├── globals.css
    ├── blog
    │   ├── example-mdx-metadata
    │   │   └── page.mdx
    │   ├── layout.tsx
    │   └── exploring-the-intersection-of-design-ai-and-design-engineering
    │   │   └── page.mdx
    ├── layout.tsx
    ├── footer.tsx
    ├── data.ts
    └── page.tsx
├── lib
    ├── constants.ts
    └── utils.ts
├── public
    ├── cover.jpg
    ├── vercel.svg
    └── next.svg
├── postcss.config.mjs
├── .prettierrc.json
├── next.config.mjs
├── eslint.config.mjs
├── .gitignore
├── tsconfig.json
├── hooks
    └── useClickOutside.tsx
├── mdx-components.tsx
├── components
    └── ui
    │   ├── scroll-progress.tsx
    │   ├── text-loop.tsx
    │   ├── text-morph.tsx
    │   ├── animated-background.tsx
    │   ├── spotlight.tsx
    │   ├── magnetic.tsx
    │   ├── text-effect.tsx
    │   └── morphing-dialog.tsx
├── package.json
├── README.md
└── INSTALLATION.md


/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibelick/nim/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/lib/constants.ts:
--------------------------------------------------------------------------------
1 | export const WEBSITE_URL = 'https://nim-fawn.vercel.app'
2 | 


--------------------------------------------------------------------------------
/public/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibelick/nim/HEAD/public/cover.jpg


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { ClassValue, clsx } from 'clsx'
2 | import { twMerge } from 'tailwind-merge'
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     '@tailwindcss/postcss': {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "trailingComma": "all",
 3 |   "semi": false,
 4 |   "tabWidth": 2,
 5 |   "singleQuote": true,
 6 |   "printWidth": 80,
 7 |   "endOfLine": "auto",
 8 |   "arrowParens": "always",
 9 |   "plugins": ["prettier-plugin-tailwindcss"]
10 | }
11 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | import createMDX from '@next/mdx';
 2 | 
 3 | /** @type {import('next').NextConfig} */
 4 | const nextConfig = {
 5 |   reactStrictMode: true,
 6 |   pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
 7 | };
 8 | 
 9 | const withMDX = createMDX({
10 |   extension: /\.mdx?$/,
11 | });
12 | 
13 | export default withMDX(nextConfig);
14 | 


--------------------------------------------------------------------------------
/app/robots.ts:
--------------------------------------------------------------------------------
 1 | import type { MetadataRoute } from 'next'
 2 | import { WEBSITE_URL } from '@/lib/constants'
 3 | 
 4 | export default function robots(): MetadataRoute.Robots {
 5 |   return {
 6 |     rules: {
 7 |       userAgent: '*',
 8 |       allow: '/',
 9 |       disallow: '/private/',
10 |     },
11 |     sitemap: `${WEBSITE_URL}/sitemap.xml`,
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { dirname } from "path";
 2 | import { fileURLToPath } from "url";
 3 | import { FlatCompat } from "@eslint/eslintrc";
 4 | 
 5 | const __filename = fileURLToPath(import.meta.url);
 6 | const __dirname = dirname(__filename);
 7 | 
 8 | const compat = new FlatCompat({
 9 |   baseDirectory: __dirname,
10 | });
11 | 
12 | const eslintConfig = [
13 |   ...compat.extends(
14 |     "next/core-web-vitals",
15 |     "next/typescript",
16 |     "plugin:prettier/recommended",
17 |   ),
18 |   "plugin:mdx/recommended",
19 | ];
20 | 
21 | export default eslintConfig;
22 | 


--------------------------------------------------------------------------------
/.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.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 | 
36 | # vercel
37 | .vercel
38 | 
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 | 


--------------------------------------------------------------------------------
/app/header.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import { TextEffect } from '@/components/ui/text-effect'
 3 | import Link from 'next/link'
 4 | 
 5 | export function Header() {
 6 |   return (
 7 |     <header className="mb-8 flex items-center justify-between">
 8 |       <div>
 9 |         <Link href="/" className="font-medium text-black dark:text-white">
10 |           Julien Nim
11 |         </Link>
12 |         <TextEffect
13 |           as="p"
14 |           preset="fade"
15 |           per="char"
16 |           className="text-zinc-600 dark:text-zinc-500"
17 |           delay={0.5}
18 |         >
19 |           Design Engineer
20 |         </TextEffect>
21 |       </div>
22 |     </header>
23 |   )
24 | }
25 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": [
26 |     "next-env.d.ts",
27 |     "**/*.ts",
28 |     "**/*.tsx",
29 |     ".next/types/**/*.ts",
30 |     "next.config.mjs"
31 |   ],
32 |   "exclude": ["node_modules"]
33 | }
34 | 


--------------------------------------------------------------------------------
/hooks/useClickOutside.tsx:
--------------------------------------------------------------------------------
 1 | import { RefObject, useEffect } from 'react'
 2 | 
 3 | function useClickOutside<T extends HTMLElement>(
 4 |   ref: RefObject<T>,
 5 |   handler: (event: MouseEvent | TouchEvent) => void,
 6 | ): void {
 7 |   useEffect(() => {
 8 |     const handleClickOutside = (event: MouseEvent | TouchEvent) => {
 9 |       if (!ref || !ref.current || ref.current.contains(event.target as Node)) {
10 |         return
11 |       }
12 | 
13 |       handler(event)
14 |     }
15 | 
16 |     document.addEventListener('mousedown', handleClickOutside)
17 |     document.addEventListener('touchstart', handleClickOutside)
18 | 
19 |     return () => {
20 |       document.removeEventListener('mousedown', handleClickOutside)
21 |       document.removeEventListener('touchstart', handleClickOutside)
22 |     }
23 |   }, [ref, handler])
24 | }
25 | 
26 | export default useClickOutside
27 | 


--------------------------------------------------------------------------------
/mdx-components.tsx:
--------------------------------------------------------------------------------
 1 | import type { MDXComponents } from 'mdx/types'
 2 | import { ComponentPropsWithoutRef } from 'react'
 3 | import { highlight } from 'sugar-high'
 4 | 
 5 | export function useMDXComponents(components: MDXComponents): MDXComponents {
 6 |   return {
 7 |     ...components,
 8 |     Cover: ({
 9 |       src,
10 |       alt,
11 |       caption,
12 |     }: {
13 |       src: string
14 |       alt: string
15 |       caption: string
16 |     }) => {
17 |       return (
18 |         <figure>
19 |           <img src={src} alt={alt} className="rounded-xl" />
20 |           <figcaption className="text-center">{caption}</figcaption>
21 |         </figure>
22 |       )
23 |     },
24 |     code: ({ children, ...props }: ComponentPropsWithoutRef<'code'>) => {
25 |       const codeHTML = highlight(children as string)
26 |       return <code dangerouslySetInnerHTML={{ __html: codeHTML }} {...props} />
27 |     },
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @import 'tailwindcss';
 2 | @plugin '@tailwindcss/typography';
 3 | @custom-variant dark (&:is(.dark *));
 4 | 
 5 | /*
 6 |   The default border color has changed to `currentColor` in Tailwind CSS v4,
 7 |   so we've added these compatibility styles to make sure everything still
 8 |   looks the same as it did with Tailwind CSS v3.
 9 | 
10 |   If we ever want to remove these styles, we need to add an explicit border
11 |   color utility to any element that depends on these defaults.
12 | */
13 | @layer base {
14 |   *,
15 |   ::after,
16 |   ::before,
17 |   ::backdrop,
18 |   ::file-selector-button {
19 |     border-color: var(--color-gray-200, currentColor);
20 |   }
21 | }
22 | 
23 | :root {
24 |   --sh-class: #7aa2f7;
25 |   --sh-sign: #89ddff;
26 |   --sh-string: #9ece6a;
27 |   --sh-keyword: #bb9af7;
28 |   --sh-comment: #565f89;
29 |   --sh-jsxliterals: #7aa2f7;
30 |   --sh-property: #73daca;
31 |   --sh-entity: #e0af68;
32 | }
33 | 


--------------------------------------------------------------------------------
/components/ui/scroll-progress.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { motion, SpringOptions, useScroll, useSpring } from 'motion/react'
 4 | import { cn } from '@/lib/utils'
 5 | import { RefObject } from 'react'
 6 | 
 7 | export type ScrollProgressProps = {
 8 |   className?: string
 9 |   springOptions?: SpringOptions
10 |   containerRef?: RefObject<HTMLDivElement>
11 | }
12 | 
13 | const DEFAULT_SPRING_OPTIONS: SpringOptions = {
14 |   stiffness: 200,
15 |   damping: 50,
16 |   restDelta: 0.001,
17 | }
18 | 
19 | export function ScrollProgress({
20 |   className,
21 |   springOptions,
22 |   containerRef,
23 | }: ScrollProgressProps) {
24 |   const { scrollYProgress } = useScroll({
25 |     container: containerRef,
26 |     layoutEffect: Boolean(containerRef?.current),
27 |   })
28 | 
29 |   const scaleX = useSpring(scrollYProgress, {
30 |     ...DEFAULT_SPRING_OPTIONS,
31 |     ...(springOptions ?? {}),
32 |   })
33 | 
34 |   return (
35 |     <motion.div
36 |       className={cn('inset-x-0 top-0 h-1 origin-left', className)}
37 |       style={{
38 |         scaleX,
39 |       }}
40 |     />
41 |   )
42 | }
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nim",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@mdx-js/loader": "^3.0.1",
13 |     "@mdx-js/react": "^3.0.1",
14 |     "@next/mdx": "^14.2.13",
15 |     "@tailwindcss/typography": "^0.5.15",
16 |     "@types/mdx": "^2.0.13",
17 |     "clsx": "^2.1.1",
18 |     "lucide-react": "^0.468.0",
19 |     "motion": "^11.15.0",
20 |     "next": "15.1.10",
21 |     "next-themes": "^0.4.4",
22 |     "react": "^19.0.0",
23 |     "react-dom": "^19.0.0",
24 |     "sugar-high": "^0.9.3",
25 |     "tailwind-merge": "^2.5.5"
26 |   },
27 |   "devDependencies": {
28 |     "@eslint/eslintrc": "^3",
29 |     "@tailwindcss/postcss": "^4.0.0",
30 |     "@types/node": "^20",
31 |     "@types/react": "^19",
32 |     "@types/react-dom": "^19",
33 |     "eslint": "^9",
34 |     "eslint-config-next": "15.1.1",
35 |     "postcss": "^8",
36 |     "prettier": "^3.4.2",
37 |     "prettier-plugin-tailwindcss": "^0.6.10",
38 |     "tailwindcss": "^4.0.0",
39 |     "typescript": "^5"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/app/blog/example-mdx-metadata/page.mdx:
--------------------------------------------------------------------------------
 1 | # How to Export Metadata from MDX for Next.js SEO
 2 | 
 3 | Next.js supports exporting a `metadata` object from your MDX files, which can be used to enhance SEO and social sharing features. This is especially useful for blog posts and documentation pages.
 4 | 
 5 | ## Example: Exporting Metadata
 6 | 
 7 | You can export a `metadata` object at the top of your MDX file like this:
 8 | 
 9 | ```javascript
10 | export const metadata = {
11 |   title: 'How to Export Metadata from MDX for Next.js SEO',
12 |   description: 'A guide on exporting metadata from MDX files to leverage Next.js SEO features.',
13 |   authors: [{ name: 'Jane Doe', url: 'https://janedoe.com' }],
14 |   openGraph: {
15 |     images: [
16 |       'https://cdn.cosmos.so/example-image.jpg',
17 |     ],
18 |   },
19 | }
20 | ```
21 | 
22 | This metadata will be picked up by Next.js and can be used for SEO, Open Graph, and other meta tags.
23 | 
24 | ## Why Use Metadata in MDX?
25 | 
26 | - **SEO**: Improve your page's search engine ranking with relevant titles and descriptions.
27 | - **Social Sharing**: Enhance how your content appears when shared on social media platforms.
28 | - **Consistency**: Keep your metadata close to your content for easier management.
29 | 
30 | ## Further Reading
31 | - [Next.js Documentation: Metadata](https://nextjs.org/docs/app/building-your-application/optimizing/metadata)
32 | - [MDX Documentation](https://mdxjs.com/)
33 | 
34 | ---
35 | 
36 | _This post demonstrates how to export metadata from MDX files for use with Next.js SEO features, inspired by [leerob's site](https://github.com/leerob/site/blob/main/app/n/product-engineers/page.mdx)._ 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata, Viewport } from 'next'
 2 | import { Geist, Geist_Mono } from 'next/font/google'
 3 | import './globals.css'
 4 | import { Header } from './header'
 5 | import { Footer } from './footer'
 6 | import { ThemeProvider } from 'next-themes'
 7 | 
 8 | export const viewport: Viewport = {
 9 |   width: 'device-width',
10 |   initialScale: 1,
11 |   themeColor: '#ffffff',
12 | }
13 | 
14 | export const metadata: Metadata = {
15 |   metadataBase: new URL('https://nim-fawn.vercel.app/'),
16 |   alternates: {
17 |     canonical: '/'
18 |   },
19 |   title: {
20 |     default: 'Nim - Personal website template',
21 |     template: '%s | Nim'
22 |   },
23 |   description:  'Nim is a free and open-source personal website template built with Next.js 15, React 19 and Motion-Primitives.',
24 | };
25 | 
26 | const geist = Geist({
27 |   variable: '--font-geist',
28 |   subsets: ['latin'],
29 | })
30 | 
31 | const geistMono = Geist_Mono({
32 |   variable: '--font-geist-mono',
33 |   subsets: ['latin'],
34 | })
35 | 
36 | export default function RootLayout({
37 |   children,
38 | }: Readonly<{
39 |   children: React.ReactNode
40 | }>) {
41 |   return (
42 |     <html lang="en" suppressHydrationWarning>
43 |       <body
44 |         className={`${geist.variable} ${geistMono.variable} bg-white tracking-tight antialiased dark:bg-zinc-950`}
45 |       >
46 |         <ThemeProvider
47 |           enableSystem={true}
48 |           attribute="class"
49 |           storageKey="theme"
50 |           defaultTheme="system"
51 |         >
52 |           <div className="flex min-h-screen w-full flex-col font-[family-name:var(--font-inter-tight)]">
53 |             <div className="relative mx-auto w-full max-w-screen-sm flex-1 px-4 pt-20">
54 |               <Header />
55 |               {children}
56 |               <Footer />
57 |             </div>
58 |           </div>
59 |         </ThemeProvider>
60 |       </body>
61 |     </html>
62 |   )
63 | }
64 | 


--------------------------------------------------------------------------------
/app/blog/layout.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import { TextMorph } from '@/components/ui/text-morph'
 3 | import { ScrollProgress } from '@/components/ui/scroll-progress'
 4 | import { useEffect, useState } from 'react'
 5 | 
 6 | function CopyButton() {
 7 |   const [text, setText] = useState('Copy')
 8 |   const currentUrl = typeof window !== 'undefined' ? window.location.href : ''
 9 | 
10 |   useEffect(() => {
11 |     setTimeout(() => {
12 |       setText('Copy')
13 |     }, 2000)
14 |   }, [text])
15 | 
16 |   return (
17 |     <button
18 |       onClick={() => {
19 |         setText('Copied')
20 |         navigator.clipboard.writeText(currentUrl)
21 |       }}
22 |       className="font-base flex items-center gap-1 text-center text-sm text-zinc-500 transition-colors dark:text-zinc-400"
23 |       type="button"
24 |     >
25 |       <TextMorph>{text}</TextMorph>
26 |       <span>URL</span>
27 |     </button>
28 |   )
29 | }
30 | 
31 | export default function LayoutBlogPost({
32 |   children,
33 | }: {
34 |   children: React.ReactNode
35 | }) {
36 |   return (
37 |     <>
38 |       <div className="pointer-events-none fixed left-0 top-0 z-10 h-12 w-full bg-gray-100 to-transparent backdrop-blur-xl [-webkit-mask-image:linear-gradient(to_bottom,black,transparent)] dark:bg-zinc-950" />
39 |       <ScrollProgress
40 |         className="fixed top-0 z-20 h-0.5 bg-gray-300 dark:bg-zinc-600"
41 |         springOptions={{
42 |           bounce: 0,
43 |         }}
44 |       />
45 | 
46 |       <div className="absolute right-4 top-24">
47 |         <CopyButton />
48 |       </div>
49 |       <main className="prose prose-gray mt-24 pb-20 prose-h4:prose-base dark:prose-invert prose-h1:text-xl prose-h1:font-medium prose-h2:mt-12 prose-h2:scroll-m-20 prose-h2:text-lg prose-h2:font-medium prose-h3:text-base prose-h3:font-medium prose-h4:font-medium prose-h5:text-base prose-h5:font-medium prose-h6:text-base prose-h6:font-medium prose-strong:font-medium">
50 |         {children}
51 |       </main>
52 |     </>
53 |   )
54 | }
55 | 


--------------------------------------------------------------------------------
/components/ui/text-loop.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import { cn } from '@/lib/utils'
 3 | import {
 4 |   motion,
 5 |   AnimatePresence,
 6 |   Transition,
 7 |   Variants,
 8 |   AnimatePresenceProps,
 9 | } from 'motion/react'
10 | import { useState, useEffect, Children } from 'react'
11 | 
12 | export type TextLoopProps = {
13 |   children: React.ReactNode[]
14 |   className?: string
15 |   interval?: number
16 |   transition?: Transition
17 |   variants?: Variants
18 |   onIndexChange?: (index: number) => void
19 |   trigger?: boolean
20 |   mode?: AnimatePresenceProps['mode']
21 | }
22 | 
23 | export function TextLoop({
24 |   children,
25 |   className,
26 |   interval = 2,
27 |   transition = { duration: 0.3 },
28 |   variants,
29 |   onIndexChange,
30 |   trigger = true,
31 |   mode = 'popLayout',
32 | }: TextLoopProps) {
33 |   const [currentIndex, setCurrentIndex] = useState(0)
34 |   const items = Children.toArray(children)
35 | 
36 |   useEffect(() => {
37 |     if (!trigger) return
38 | 
39 |     const intervalMs = interval * 1000
40 |     const timer = setInterval(() => {
41 |       setCurrentIndex((current) => {
42 |         const next = (current + 1) % items.length
43 |         onIndexChange?.(next)
44 |         return next
45 |       })
46 |     }, intervalMs)
47 |     return () => clearInterval(timer)
48 |   }, [items.length, interval, onIndexChange, trigger])
49 | 
50 |   const motionVariants: Variants = {
51 |     initial: { y: 20, opacity: 0 },
52 |     animate: { y: 0, opacity: 1 },
53 |     exit: { y: -20, opacity: 0 },
54 |   }
55 | 
56 |   return (
57 |     <div className={cn('relative inline-block whitespace-nowrap', className)}>
58 |       <AnimatePresence mode={mode} initial={false}>
59 |         <motion.div
60 |           key={currentIndex}
61 |           initial="initial"
62 |           animate="animate"
63 |           exit="exit"
64 |           transition={transition}
65 |           variants={variants || motionVariants}
66 |         >
67 |           {items[currentIndex]}
68 |         </motion.div>
69 |       </AnimatePresence>
70 |     </div>
71 |   )
72 | }
73 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <img src="/public/cover.jpg" alt="Cover image representing Nim, a personal website template" width="100%" />
 2 | 
 3 | Nim is a free and open-source personal website template built with Next.js 15, React 19, Tailwind CSS v4, and Motion. Designed for developers, designers, and founders, it combines minimalism with delightful animated components powered by [Motion-Primitives](https://motion-primitives.com).
 4 | 
 5 | Live demo: [https://nim-fawn.vercel.app](https://nim-fawn.vercel.app)
 6 | 
 7 | ## Features
 8 | 
 9 | - Minimal one-page portfolio layout.
10 | - Blog support with MDX.
11 | - Responsive and accessible design.
12 | - Easy to use
13 | - [Motion-Primitives](https://motion-primitives.com) for animated components.
14 | 
15 | ## Getting Started
16 | 
17 | For detailed setup instructions, refer to the [Installation Guide](./INSTALLATION.md).
18 | 
19 | ```bash
20 | git clone https://github.com/ibelick/nim.git
21 | cd nim
22 | npm install
23 | npm run dev
24 | ```
25 | 
26 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
27 | 
28 | ## Contributing
29 | 
30 | Contributions are welcome! Feel free to open issues or submit pull requests to improve Nim.
31 | 
32 | ## Deployment
33 | 
34 | You can deploy your site to any hosting platform that supports Next.js. For the easiest deployment experience, consider using Vercel:
35 | 
36 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fibelick%2Fnim&env=NEXT_PUBLIC_SITE_URL&project-name=nim&repository-name=nim&redirect-url=https%3A%2F%2Ftwitter.com%2Fibelick&demo-title=Nim&demo-description=Nim%20is%20a%20free%20and%20open-source%20minimal%20personal%20website%20template%20built%20with%20Next.js%2015%2C%20React%2019%2C%20and%20Motion-Primitives.&demo-url=https%3A%2F%2Fnim.vercel.app&demo-image=https%3A%2F%2Fraw.githubusercontent.com%2Fibelick%2Fnim%2Frefs%2Fheads%2Fmain%2F.github%2Fassets%2Freadme.png&teamSlug=ibelick)
37 | 
38 | ## About
39 | 
40 | Nim is designed to make personal branding effortless and beautiful. If you enjoy it, consider sharing it and exploring [Motion-Primitives Pro](https://pro.motion-primitives.com/).
41 | 


--------------------------------------------------------------------------------
/components/ui/text-morph.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import { cn } from '@/lib/utils'
 3 | import { AnimatePresence, motion, Transition, Variants } from 'motion/react'
 4 | import { useMemo, useId } from 'react'
 5 | 
 6 | export type TextMorphProps = {
 7 |   children: string
 8 |   as?: React.ElementType
 9 |   className?: string
10 |   style?: React.CSSProperties
11 |   variants?: Variants
12 |   transition?: Transition
13 | }
14 | 
15 | export function TextMorph({
16 |   children,
17 |   as: Component = 'p',
18 |   className,
19 |   style,
20 |   variants,
21 |   transition,
22 | }: TextMorphProps) {
23 |   const uniqueId = useId()
24 | 
25 |   const characters = useMemo(() => {
26 |     const charCounts: Record<string, number> = {}
27 | 
28 |     return children.split('').map((char, index) => {
29 |       const lowerChar = char.toLowerCase()
30 |       charCounts[lowerChar] = (charCounts[lowerChar] || 0) + 1
31 | 
32 |       return {
33 |         id: `${uniqueId}-${lowerChar}${charCounts[lowerChar]}`,
34 |         label:
35 |           char === ' '
36 |             ? '\u00A0'
37 |             : index === 0
38 |               ? char.toUpperCase()
39 |               : lowerChar,
40 |       }
41 |     })
42 |   }, [children, uniqueId])
43 | 
44 |   const defaultVariants: Variants = {
45 |     initial: { opacity: 0 },
46 |     animate: { opacity: 1 },
47 |     exit: { opacity: 0 },
48 |   }
49 | 
50 |   const defaultTransition: Transition = {
51 |     type: 'spring',
52 |     stiffness: 280,
53 |     damping: 18,
54 |     mass: 0.3,
55 |   }
56 | 
57 |   return (
58 |     <Component className={cn(className)} aria-label={children} style={style}>
59 |       <AnimatePresence mode="popLayout" initial={false}>
60 |         {characters.map((character) => (
61 |           <motion.span
62 |             key={character.id}
63 |             layoutId={character.id}
64 |             className="inline-block"
65 |             aria-hidden="true"
66 |             initial="initial"
67 |             animate="animate"
68 |             exit="exit"
69 |             variants={variants || defaultVariants}
70 |             transition={transition || defaultTransition}
71 |           >
72 |             {character.label}
73 |           </motion.span>
74 |         ))}
75 |       </AnimatePresence>
76 |     </Component>
77 |   )
78 | }
79 | 


--------------------------------------------------------------------------------
/INSTALLATION.md:
--------------------------------------------------------------------------------
 1 | # Nim - Installation Guide
 2 | 
 3 | ## Prerequisites
 4 | 
 5 | - Node.js 20.x or later
 6 | - Git
 7 | 
 8 | ## Installation Steps
 9 | 
10 | 1. **Clone the repository**
11 | 
12 |    ```bash
13 |    git clone https://github.com/ibelick/nim.git
14 |    cd nim
15 |    ```
16 | 
17 | 2. **Install dependencies**
18 | 
19 |    ```bash
20 |    npm install
21 |    ```
22 | 
23 | 3. **Run the development server**
24 | 
25 |    ```bash
26 |    npm run dev
27 |    ```
28 | 
29 | 4. **Update the template data**
30 | 
31 |    Update the template data in the `app/data.ts` file.
32 | 
33 |    ```ts
34 |    export const EMAIL = 'your@email.com'
35 | 
36 |    export const SOCIAL_LINKS = [
37 |      {
38 |        label: 'Github',
39 |        link: 'your-github-url',
40 |      },
41 |      // Add your social links
42 |    ]
43 | 
44 |    ...
45 |    ```
46 | 
47 | 5. **Add your blog posts**
48 | 
49 | Create a new .mdx file for each blog post inside the app/blog folder. For example:
50 | app/blog/your-article-slug/page.mdx.
51 | 
52 | Example blog post structure in .mdx:
53 | 
54 | ```mdx
55 | # Your Article Title
56 | 
57 | Introduction
58 | 
59 | Your content here...
60 | 
61 | ## Code Examples
62 | 
63 | // Example code block here...
64 | ```
65 | 
66 | **Note:** You can use all MDX features, including React components, in your blog posts.
67 | 
68 | 6. **Project Structure**
69 | 
70 | For a better understanding of the Next.js project structure, refer to the [Next.js](https://nextjs.org/docs/app/getting-started/project-structure) documentation.
71 | 
72 | 7. **Additional Features**
73 | 
74 | Want to add more animated components?
75 | Check out [Motion-Primitives](https://motion-primitives.com/) for additional animation components and templates. If you want something else DM on [X](https://x.com/Ibelick).
76 | 
77 | 8.  **Deployment**
78 | 
79 | You can deploy your site to any hosting platform that supports Next.js. For the easiest deployment experience, consider using Vercel:
80 | 
81 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fibelick%2Fnim&env=NEXT_PUBLIC_SITE_URL&project-name=nim&repository-name=nim&redirect-url=https%3A%2F%2Ftwitter.com%2Fibelick&demo-title=Nim&demo-description=Nim%20is%20a%20free%20and%20open-source%20minimal%20personal%20website%20template%20built%20with%20Next.js%2015%2C%20React%2019%2C%20and%20Motion-Primitives.&demo-url=https%3A%2F%2Fnim.vercel.app&demo-image=https%3A%2F%2Fraw.githubusercontent.com%2Fibelick%2Fnim%2Frefs%2Fheads%2Fmain%2F.github%2Fassets%2Freadme.png&teamSlug=ibelick)
82 | 


--------------------------------------------------------------------------------
/components/ui/animated-background.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import { cn } from '@/lib/utils'
 3 | import { AnimatePresence, Transition, motion } from 'motion/react'
 4 | import {
 5 |   Children,
 6 |   cloneElement,
 7 |   ReactElement,
 8 |   useEffect,
 9 |   useState,
10 |   useId,
11 | } from 'react'
12 | 
13 | export type AnimatedBackgroundProps = {
14 |   children:
15 |     | ReactElement<{ 'data-id': string }>[]
16 |     | ReactElement<{ 'data-id': string }>
17 |   defaultValue?: string
18 |   onValueChange?: (newActiveId: string | null) => void
19 |   className?: string
20 |   transition?: Transition
21 |   enableHover?: boolean
22 | }
23 | 
24 | export function AnimatedBackground({
25 |   children,
26 |   defaultValue,
27 |   onValueChange,
28 |   className,
29 |   transition,
30 |   enableHover = false,
31 | }: AnimatedBackgroundProps) {
32 |   const [activeId, setActiveId] = useState<string | null>(null)
33 |   const uniqueId = useId()
34 | 
35 |   const handleSetActiveId = (id: string | null) => {
36 |     setActiveId(id)
37 | 
38 |     if (onValueChange) {
39 |       onValueChange(id)
40 |     }
41 |   }
42 | 
43 |   useEffect(() => {
44 |     if (defaultValue !== undefined) {
45 |       setActiveId(defaultValue)
46 |     }
47 |   }, [defaultValue])
48 | 
49 |   return Children.map(children, (child: any, index) => {
50 |     const id = child.props['data-id']
51 | 
52 |     const interactionProps = enableHover
53 |       ? {
54 |           onMouseEnter: () => handleSetActiveId(id),
55 |           onMouseLeave: () => handleSetActiveId(null),
56 |         }
57 |       : {
58 |           onClick: () => handleSetActiveId(id),
59 |         }
60 | 
61 |     return cloneElement(
62 |       child,
63 |       {
64 |         key: index,
65 |         className: cn('relative inline-flex', child.props.className),
66 |         'data-checked': activeId === id ? 'true' : 'false',
67 |         ...interactionProps,
68 |       },
69 |       <>
70 |         <AnimatePresence initial={false}>
71 |           {activeId === id && (
72 |             <motion.div
73 |               layoutId={`background-${uniqueId}`}
74 |               className={cn('absolute inset-0', className)}
75 |               transition={transition}
76 |               initial={{ opacity: defaultValue ? 1 : 0 }}
77 |               animate={{
78 |                 opacity: 1,
79 |               }}
80 |               exit={{
81 |                 opacity: 0,
82 |               }}
83 |             />
84 |           )}
85 |         </AnimatePresence>
86 |         <div className="z-10">{child.props.children}</div>
87 |       </>,
88 |     )
89 |   })
90 | }
91 | 


--------------------------------------------------------------------------------
/app/footer.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import { AnimatedBackground } from '@/components/ui/animated-background'
 3 | import { TextLoop } from '@/components/ui/text-loop'
 4 | import { MonitorIcon, MoonIcon, SunIcon } from 'lucide-react'
 5 | import { useTheme } from 'next-themes'
 6 | import { useEffect, useState } from 'react'
 7 | 
 8 | const THEMES_OPTIONS = [
 9 |   {
10 |     label: 'Light',
11 |     id: 'light',
12 |     icon: <SunIcon className="h-4 w-4" />,
13 |   },
14 |   {
15 |     label: 'Dark',
16 |     id: 'dark',
17 |     icon: <MoonIcon className="h-4 w-4" />,
18 |   },
19 |   {
20 |     label: 'System',
21 |     id: 'system',
22 |     icon: <MonitorIcon className="h-4 w-4" />,
23 |   },
24 | ]
25 | 
26 | function ThemeSwitch() {
27 |   const [mounted, setMounted] = useState(false)
28 |   const { theme, setTheme } = useTheme()
29 | 
30 |   useEffect(() => {
31 |     setMounted(true)
32 |   }, [])
33 | 
34 |   if (!mounted) {
35 |     return null
36 |   }
37 | 
38 |   return (
39 |     <AnimatedBackground
40 |       className="pointer-events-none rounded-lg bg-zinc-100 dark:bg-zinc-800"
41 |       defaultValue={theme}
42 |       transition={{
43 |         type: 'spring',
44 |         bounce: 0,
45 |         duration: 0.2,
46 |       }}
47 |       enableHover={false}
48 |       onValueChange={(id) => {
49 |         setTheme(id as string)
50 |       }}
51 |     >
52 |       {THEMES_OPTIONS.map((theme) => {
53 |         return (
54 |           <button
55 |             key={theme.id}
56 |             className="inline-flex h-7 w-7 items-center justify-center text-zinc-500 transition-colors duration-100 focus-visible:outline-2 data-[checked=true]:text-zinc-950 dark:text-zinc-400 dark:data-[checked=true]:text-zinc-50"
57 |             type="button"
58 |             aria-label={`Switch to ${theme.label} theme`}
59 |             data-id={theme.id}
60 |           >
61 |             {theme.icon}
62 |           </button>
63 |         )
64 |       })}
65 |     </AnimatedBackground>
66 |   )
67 | }
68 | 
69 | export function Footer() {
70 |   return (
71 |     <footer className="mt-24 border-t border-zinc-100 px-0 py-4 dark:border-zinc-800">
72 |       <div className="flex items-center justify-between">
73 |         <a href="https://github.com/ibelick/nim" target="_blank">
74 |           <TextLoop className="text-xs text-zinc-500">
75 |             <span>© 2024 Nim.</span>
76 |             <span>Built with Motion-Primitives.</span>
77 |           </TextLoop>
78 |         </a>
79 |         <div className="text-xs text-zinc-400">
80 |           <ThemeSwitch />
81 |         </div>
82 |       </div>
83 |     </footer>
84 |   )
85 | }
86 | 


--------------------------------------------------------------------------------
/components/ui/spotlight.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import React, { useRef, useState, useCallback, useEffect } from 'react'
 3 | import { motion, useSpring, useTransform, SpringOptions } from 'motion/react'
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | export type SpotlightProps = {
 7 |   className?: string
 8 |   size?: number
 9 |   springOptions?: SpringOptions
10 | }
11 | 
12 | export function Spotlight({
13 |   className,
14 |   size = 200,
15 |   springOptions = { bounce: 0 },
16 | }: SpotlightProps) {
17 |   const containerRef = useRef<HTMLDivElement>(null)
18 |   const [isHovered, setIsHovered] = useState(false)
19 |   const [parentElement, setParentElement] = useState<HTMLElement | null>(null)
20 | 
21 |   const mouseX = useSpring(0, springOptions)
22 |   const mouseY = useSpring(0, springOptions)
23 | 
24 |   const spotlightLeft = useTransform(mouseX, (x) => `${x - size / 2}px`)
25 |   const spotlightTop = useTransform(mouseY, (y) => `${y - size / 2}px`)
26 | 
27 |   useEffect(() => {
28 |     if (containerRef.current) {
29 |       const parent = containerRef.current.parentElement
30 |       if (parent) {
31 |         parent.style.position = 'relative'
32 |         parent.style.overflow = 'hidden'
33 |         setParentElement(parent)
34 |       }
35 |     }
36 |   }, [])
37 | 
38 |   const handleMouseMove = useCallback(
39 |     (event: MouseEvent) => {
40 |       if (!parentElement) return
41 |       const { left, top } = parentElement.getBoundingClientRect()
42 |       mouseX.set(event.clientX - left)
43 |       mouseY.set(event.clientY - top)
44 |     },
45 |     [mouseX, mouseY, parentElement],
46 |   )
47 | 
48 |   useEffect(() => {
49 |     if (!parentElement) return
50 | 
51 |     parentElement.addEventListener('mousemove', handleMouseMove)
52 |     parentElement.addEventListener('mouseenter', () => setIsHovered(true))
53 |     parentElement.addEventListener('mouseleave', () => setIsHovered(false))
54 | 
55 |     return () => {
56 |       parentElement.removeEventListener('mousemove', handleMouseMove)
57 |       parentElement.removeEventListener('mouseenter', () => setIsHovered(true))
58 |       parentElement.removeEventListener('mouseleave', () => setIsHovered(false))
59 |     }
60 |   }, [parentElement, handleMouseMove])
61 | 
62 |   return (
63 |     <motion.div
64 |       ref={containerRef}
65 |       className={cn(
66 |         'pointer-events-none absolute rounded-full bg-[radial-gradient(circle_at_center,var(--tw-gradient-stops),transparent_80%)] blur-xl transition-opacity duration-200',
67 |         'from-zinc-50 via-zinc-100 to-zinc-200',
68 |         isHovered ? 'opacity-100' : 'opacity-0',
69 |         className,
70 |       )}
71 |       style={{
72 |         width: size,
73 |         height: size,
74 |         left: spotlightLeft,
75 |         top: spotlightTop,
76 |       }}
77 |     />
78 |   )
79 | }
80 | 


--------------------------------------------------------------------------------
/components/ui/magnetic.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import React, { useState, useEffect, useRef } from 'react'
  4 | import {
  5 |   motion,
  6 |   useMotionValue,
  7 |   useSpring,
  8 |   type SpringOptions,
  9 | } from 'motion/react'
 10 | 
 11 | const SPRING_CONFIG = { stiffness: 26.7, damping: 4.1, mass: 0.2 }
 12 | 
 13 | export type MagneticProps = {
 14 |   children: React.ReactNode
 15 |   intensity?: number
 16 |   range?: number
 17 |   actionArea?: 'self' | 'parent' | 'global'
 18 |   springOptions?: SpringOptions
 19 | }
 20 | 
 21 | export function Magnetic({
 22 |   children,
 23 |   intensity = 0.6,
 24 |   range = 100,
 25 |   actionArea = 'self',
 26 |   springOptions = SPRING_CONFIG,
 27 | }: MagneticProps) {
 28 |   const [isHovered, setIsHovered] = useState(false)
 29 |   const ref = useRef<HTMLDivElement>(null)
 30 | 
 31 |   const x = useMotionValue(0)
 32 |   const y = useMotionValue(0)
 33 | 
 34 |   const springX = useSpring(x, springOptions)
 35 |   const springY = useSpring(y, springOptions)
 36 | 
 37 |   useEffect(() => {
 38 |     const calculateDistance = (e: MouseEvent) => {
 39 |       if (ref.current) {
 40 |         const rect = ref.current.getBoundingClientRect()
 41 |         const centerX = rect.left + rect.width / 2
 42 |         const centerY = rect.top + rect.height / 2
 43 |         const distanceX = e.clientX - centerX
 44 |         const distanceY = e.clientY - centerY
 45 | 
 46 |         const absoluteDistance = Math.sqrt(distanceX ** 2 + distanceY ** 2)
 47 | 
 48 |         if (isHovered && absoluteDistance <= range) {
 49 |           const scale = 1 - absoluteDistance / range
 50 |           x.set(distanceX * intensity * scale)
 51 |           y.set(distanceY * intensity * scale)
 52 |         } else {
 53 |           x.set(0)
 54 |           y.set(0)
 55 |         }
 56 |       }
 57 |     }
 58 | 
 59 |     document.addEventListener('mousemove', calculateDistance)
 60 | 
 61 |     return () => {
 62 |       document.removeEventListener('mousemove', calculateDistance)
 63 |     }
 64 |   }, [ref, isHovered, intensity, range])
 65 | 
 66 |   useEffect(() => {
 67 |     if (actionArea === 'parent' && ref.current?.parentElement) {
 68 |       const parent = ref.current.parentElement
 69 | 
 70 |       const handleParentEnter = () => setIsHovered(true)
 71 |       const handleParentLeave = () => setIsHovered(false)
 72 | 
 73 |       parent.addEventListener('mouseenter', handleParentEnter)
 74 |       parent.addEventListener('mouseleave', handleParentLeave)
 75 | 
 76 |       return () => {
 77 |         parent.removeEventListener('mouseenter', handleParentEnter)
 78 |         parent.removeEventListener('mouseleave', handleParentLeave)
 79 |       }
 80 |     } else if (actionArea === 'global') {
 81 |       setIsHovered(true)
 82 |     }
 83 |   }, [actionArea])
 84 | 
 85 |   const handleMouseEnter = () => {
 86 |     if (actionArea === 'self') {
 87 |       setIsHovered(true)
 88 |     }
 89 |   }
 90 | 
 91 |   const handleMouseLeave = () => {
 92 |     if (actionArea === 'self') {
 93 |       setIsHovered(false)
 94 |       x.set(0)
 95 |       y.set(0)
 96 |     }
 97 |   }
 98 | 
 99 |   return (
100 |     <motion.div
101 |       ref={ref}
102 |       onMouseEnter={actionArea === 'self' ? handleMouseEnter : undefined}
103 |       onMouseLeave={actionArea === 'self' ? handleMouseLeave : undefined}
104 |       style={{
105 |         x: springX,
106 |         y: springY,
107 |       }}
108 |     >
109 |       {children}
110 |     </motion.div>
111 |   )
112 | }
113 | 


--------------------------------------------------------------------------------
/app/data.ts:
--------------------------------------------------------------------------------
  1 | type Project = {
  2 |   name: string
  3 |   description: string
  4 |   link: string
  5 |   video: string
  6 |   id: string
  7 | }
  8 | 
  9 | type WorkExperience = {
 10 |   company: string
 11 |   title: string
 12 |   start: string
 13 |   end: string
 14 |   link: string
 15 |   id: string
 16 | }
 17 | 
 18 | type BlogPost = {
 19 |   title: string
 20 |   description: string
 21 |   link: string
 22 |   uid: string
 23 | }
 24 | 
 25 | type SocialLink = {
 26 |   label: string
 27 |   link: string
 28 | }
 29 | 
 30 | export const PROJECTS: Project[] = [
 31 |   {
 32 |     name: 'Motion Primitives Pro',
 33 |     description:
 34 |       'Advanced components and templates to craft beautiful websites.',
 35 |     link: 'https://pro.motion-primitives.com/',
 36 |     video:
 37 |       'https://res.cloudinary.com/read-cv/video/upload/t_v_b/v1/1/profileItems/W2azTw5BVbMXfj7F53G92hMVIn32/newProfileItem/d898be8a-7037-4c71-af0c-8997239b050d.mp4?_a=DATAdtAAZAA0',
 38 |     id: 'project1',
 39 |   },
 40 |   {
 41 |     name: 'Motion Primitives',
 42 |     description: 'UI kit to make beautiful, animated interfaces.',
 43 |     link: 'https://motion-primitives.com/',
 44 |     video:
 45 |       'https://res.cloudinary.com/read-cv/video/upload/t_v_b/v1/1/profileItems/W2azTw5BVbMXfj7F53G92hMVIn32/XSfIvT7BUWbPRXhrbLed/ee6871c9-8400-49d2-8be9-e32675eabf7e.mp4?_a=DATAdtAAZAA0',
 46 |     id: 'project2',
 47 |   },
 48 | ]
 49 | 
 50 | export const WORK_EXPERIENCE: WorkExperience[] = [
 51 |   {
 52 |     company: 'Reglazed Studio',
 53 |     title: 'CEO',
 54 |     start: '2024',
 55 |     end: 'Present',
 56 |     link: 'https://ibelick.com',
 57 |     id: 'work1',
 58 |   },
 59 |   {
 60 |     company: 'Freelance',
 61 |     title: 'Design Engineer',
 62 |     start: '2022',
 63 |     end: '2024',
 64 |     link: 'https://ibelick.com',
 65 |     id: 'work2',
 66 |   },
 67 |   {
 68 |     company: 'Freelance',
 69 |     title: 'Front-end Developer',
 70 |     start: '2017',
 71 |     end: 'Present',
 72 |     link: 'https://ibelick.com',
 73 |     id: 'work3',
 74 |   },
 75 | ]
 76 | 
 77 | export const BLOG_POSTS: BlogPost[] = [
 78 |   {
 79 |     title: 'Exploring the Intersection of Design, AI, and Design Engineering',
 80 |     description: 'How AI is changing the way we design',
 81 |     link: '/blog/exploring-the-intersection-of-design-ai-and-design-engineering',
 82 |     uid: 'blog-1',
 83 |   },
 84 |   {
 85 |     title: 'Why I left my job to start my own company',
 86 |     description:
 87 |       'A deep dive into my decision to leave my job and start my own company',
 88 |     link: '/blog/exploring-the-intersection-of-design-ai-and-design-engineering',
 89 |     uid: 'blog-2',
 90 |   },
 91 |   {
 92 |     title: 'What I learned from my first year of freelancing',
 93 |     description:
 94 |       'A look back at my first year of freelancing and what I learned',
 95 |     link: '/blog/exploring-the-intersection-of-design-ai-and-design-engineering',
 96 |     uid: 'blog-3',
 97 |   },
 98 |   {
 99 |     title: 'How to Export Metadata from MDX for Next.js SEO',
100 |     description: 'A guide on exporting metadata from MDX files to leverage Next.js SEO features.',
101 |     link: '/blog/example-mdx-metadata',
102 |     uid: 'blog-4',
103 |   },
104 | ]
105 | 
106 | export const SOCIAL_LINKS: SocialLink[] = [
107 |   {
108 |     label: 'Github',
109 |     link: 'https://github.com/ibelick',
110 |   },
111 |   {
112 |     label: 'Twitter',
113 |     link: 'https://twitter.com/ibelick',
114 |   },
115 |   {
116 |     label: 'LinkedIn',
117 |     link: 'https://www.linkedin.com/in/ibelick',
118 |   },
119 |   {
120 |     label: 'Instagram',
121 |     link: 'https://www.instagram.com/ibelick',
122 |   },
123 | ]
124 | 
125 | export const EMAIL = 'your@email.com'
126 | 


--------------------------------------------------------------------------------
/app/blog/exploring-the-intersection-of-design-ai-and-design-engineering/page.mdx:
--------------------------------------------------------------------------------
  1 | export const metadata = {
  2 |   title: 'Exploring the Intersection of Design, AI, and Design Engineering',
  3 |   description:
  4 |     'Design and artificial intelligence (AI) are increasingly intertwined, driving innovation across industries. As technology evolves, the role of design engineering is more critical than ever, bridging creativity and functionality.',
  5 |   alternates: {
  6 |     canonical: '/blog/exploring-the-intersection-of-design-ai-and-design-engineering',
  7 |   },
  8 | };
  9 | 
 10 | <Cover
 11 |   src="https://cdn.cosmos.so/affd4b79-e848-4dfd-bd42-5f2c4a847365?format=jpeg"
 12 |   alt="Image from the movie Alien - from cosmos.com"
 13 |   caption="cosmos.com"
 14 | />
 15 | 
 16 | # Exploring the Intersection of Design, AI, and Design Engineering
 17 | 
 18 | Design and artificial intelligence (AI) are increasingly intertwined, driving innovation across industries. As technology evolves, the role of design engineering is more critical than ever, bridging creativity and functionality.
 19 | 
 20 | ---
 21 | 
 22 | ## The Evolving Role of AI in Design
 23 | 
 24 | AI is no longer just a backend tool—it’s becoming an active collaborator in the creative process. From generating design ideas to optimizing layouts, AI offers endless possibilities. For instance:
 25 | 
 26 | - **Generative Design**: AI algorithms can generate thousands of design variations based on constraints, helping designers explore ideas faster.
 27 | - **User Experience Optimization**: AI analyzes user behavior to suggest improvements, enabling data-driven design decisions.
 28 | - **Automation**: Repetitive tasks like resizing assets or formatting layouts can be automated, freeing up designers for more strategic work.
 29 | 
 30 | ## Challenges and Opportunities
 31 | 
 32 | While AI empowers designers, it also raises challenges:
 33 | 
 34 | ### Challenges
 35 | 
 36 | - **Ethical Design**: AI systems may unintentionally reinforce biases. Designers must ensure inclusivity and fairness.
 37 | - **Loss of Control**: Relying too heavily on AI can dilute the human touch in design.
 38 | - **Learning Curve**: Integrating AI tools requires new skills, which can be daunting for some designers.
 39 | 
 40 | ### Opportunities
 41 | 
 42 | - **Enhanced Creativity**: AI can inspire by offering unconventional ideas.
 43 | - **Efficiency Gains**: Automation allows for rapid iteration and prototyping.
 44 | - **Scalability**: AI enables personalized experiences at scale, a growing demand in today’s market.
 45 | 
 46 | ---
 47 | 
 48 | ## Design Engineering: The Glue Between Creativity and Execution
 49 | 
 50 | Design engineering ensures that the gap between creative vision and technical execution is seamless. It combines the artistry of design with the precision of engineering.
 51 | 
 52 | ### Key Principles of Design Engineering
 53 | 
 54 | 1. **Systems Thinking**: Viewing a design holistically ensures all components work together cohesively.
 55 | 2. **Collaboration**: Effective communication between designers and developers is crucial for successful outcomes.
 56 | 3. **Iterative Process**: Building, testing, and refining are fundamental to achieving the best results.
 57 | 
 58 | > "Good design is as little design as possible." — Dieter Rams
 59 | 
 60 | ### Tools of the Trade
 61 | 
 62 | Modern design engineers leverage tools like:
 63 | 
 64 | - **Figma** and **Sketch** for prototyping
 65 | - **Motion** for creating smooth animations
 66 | - **Tailwind CSS** for streamlined styling
 67 | - **Git** for version control and collaboration
 68 | 
 69 | ---
 70 | 
 71 | ## AI and Design Engineering: A Symbiotic Relationship
 72 | 
 73 | The integration of AI into design engineering creates powerful synergies:
 74 | 
 75 | - **Prototyping with AI**: AI-driven tools like ChatGPT assist in generating content for prototypes, accelerating the design process.
 76 | - **Predictive Analytics**: Engineers use AI to predict performance issues and optimize designs in real-time.
 77 | - **Accessibility Improvements**: AI tools automatically detect and fix accessibility concerns, ensuring compliance.
 78 | 
 79 | ### Case Study: Motion-Primitives
 80 | 
 81 | Motion-Primitives demonstrates how AI and design engineering come together. By leveraging Framer Motion and Tailwind CSS, it simplifies the creation of dynamic, responsive interfaces. AI can enhance this by:
 82 | 
 83 | - Generating motion patterns based on user preferences.
 84 | - Optimizing performance for different devices.
 85 | - Automating testing for cross-browser compatibility.
 86 | 
 87 | ---
 88 | 
 89 | ## Conclusion
 90 | 
 91 | The intersection of AI, design, and design engineering is reshaping the industry. By embracing AI while staying grounded in design principles, professionals can push boundaries and create experiences that are both innovative and human-centered. The future lies in collaboration—not only between humans and machines but also among designers, engineers, and AI.
 92 | 
 93 | ---
 94 | 
 95 | ### Questions for Reflection
 96 | 
 97 | - How can we ensure AI remains a tool for empowerment rather than replacement?
 98 | - What steps can design engineers take to integrate AI responsibly into their workflows?
 99 | 
100 | ### Further Reading
101 | 
102 | - [Designing for AI](https://example.com/designing-for-ai)
103 | - [The Future of Design Systems](https://example.com/future-design-systems)
104 | - [Ethical AI Guidelines](https://example.com/ethical-ai)
105 | 
106 | ---
107 | 
108 | ### Music for Inspiration
109 | 
110 | Listening to music while working? Check out _"Motion"_ by Tycho—a perfect blend of creativity and rhythm.
111 | 


--------------------------------------------------------------------------------
/components/ui/text-effect.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | import { cn } from '@/lib/utils'
  3 | import {
  4 |   AnimatePresence,
  5 |   motion,
  6 |   TargetAndTransition,
  7 |   Transition,
  8 |   Variant,
  9 |   Variants,
 10 | } from 'motion/react'
 11 | import React from 'react'
 12 | 
 13 | export type PresetType = 'blur' | 'fade-in-blur' | 'scale' | 'fade' | 'slide'
 14 | 
 15 | export type PerType = 'word' | 'char' | 'line'
 16 | 
 17 | export type TextEffectProps = {
 18 |   children: string
 19 |   per?: PerType
 20 |   as?: keyof React.JSX.IntrinsicElements
 21 |   variants?: {
 22 |     container?: Variants
 23 |     item?: Variants
 24 |   }
 25 |   className?: string
 26 |   preset?: PresetType
 27 |   delay?: number
 28 |   speedReveal?: number
 29 |   speedSegment?: number
 30 |   trigger?: boolean
 31 |   onAnimationComplete?: () => void
 32 |   onAnimationStart?: () => void
 33 |   segmentWrapperClassName?: string
 34 |   containerTransition?: Transition
 35 |   segmentTransition?: Transition
 36 |   style?: React.CSSProperties
 37 | }
 38 | 
 39 | const defaultStaggerTimes: Record<PerType, number> = {
 40 |   char: 0.03,
 41 |   word: 0.05,
 42 |   line: 0.1,
 43 | }
 44 | 
 45 | const defaultContainerVariants: Variants = {
 46 |   hidden: { opacity: 0 },
 47 |   visible: {
 48 |     opacity: 1,
 49 |     transition: {
 50 |       staggerChildren: 0.05,
 51 |     },
 52 |   },
 53 |   exit: {
 54 |     transition: { staggerChildren: 0.05, staggerDirection: -1 },
 55 |   },
 56 | }
 57 | 
 58 | const defaultItemVariants: Variants = {
 59 |   hidden: { opacity: 0 },
 60 |   visible: {
 61 |     opacity: 1,
 62 |   },
 63 |   exit: { opacity: 0 },
 64 | }
 65 | 
 66 | const presetVariants: Record<
 67 |   PresetType,
 68 |   { container: Variants; item: Variants }
 69 | > = {
 70 |   blur: {
 71 |     container: defaultContainerVariants,
 72 |     item: {
 73 |       hidden: { opacity: 0, filter: 'blur(12px)' },
 74 |       visible: { opacity: 1, filter: 'blur(0px)' },
 75 |       exit: { opacity: 0, filter: 'blur(12px)' },
 76 |     },
 77 |   },
 78 |   'fade-in-blur': {
 79 |     container: defaultContainerVariants,
 80 |     item: {
 81 |       hidden: { opacity: 0, y: 20, filter: 'blur(12px)' },
 82 |       visible: { opacity: 1, y: 0, filter: 'blur(0px)' },
 83 |       exit: { opacity: 0, y: 20, filter: 'blur(12px)' },
 84 |     },
 85 |   },
 86 |   scale: {
 87 |     container: defaultContainerVariants,
 88 |     item: {
 89 |       hidden: { opacity: 0, scale: 0 },
 90 |       visible: { opacity: 1, scale: 1 },
 91 |       exit: { opacity: 0, scale: 0 },
 92 |     },
 93 |   },
 94 |   fade: {
 95 |     container: defaultContainerVariants,
 96 |     item: {
 97 |       hidden: { opacity: 0 },
 98 |       visible: { opacity: 1 },
 99 |       exit: { opacity: 0 },
100 |     },
101 |   },
102 |   slide: {
103 |     container: defaultContainerVariants,
104 |     item: {
105 |       hidden: { opacity: 0, y: 20 },
106 |       visible: { opacity: 1, y: 0 },
107 |       exit: { opacity: 0, y: 20 },
108 |     },
109 |   },
110 | }
111 | 
112 | const AnimationComponent: React.FC<{
113 |   segment: string
114 |   variants: Variants
115 |   per: 'line' | 'word' | 'char'
116 |   segmentWrapperClassName?: string
117 | }> = React.memo(({ segment, variants, per, segmentWrapperClassName }) => {
118 |   const content =
119 |     per === 'line' ? (
120 |       <motion.span variants={variants} className="block">
121 |         {segment}
122 |       </motion.span>
123 |     ) : per === 'word' ? (
124 |       <motion.span
125 |         aria-hidden="true"
126 |         variants={variants}
127 |         className="inline-block whitespace-pre"
128 |       >
129 |         {segment}
130 |       </motion.span>
131 |     ) : (
132 |       <motion.span className="inline-block whitespace-pre">
133 |         {segment.split('').map((char, charIndex) => (
134 |           <motion.span
135 |             key={`char-${charIndex}`}
136 |             aria-hidden="true"
137 |             variants={variants}
138 |             className="inline-block whitespace-pre"
139 |           >
140 |             {char}
141 |           </motion.span>
142 |         ))}
143 |       </motion.span>
144 |     )
145 | 
146 |   if (!segmentWrapperClassName) {
147 |     return content
148 |   }
149 | 
150 |   const defaultWrapperClassName = per === 'line' ? 'block' : 'inline-block'
151 | 
152 |   return (
153 |     <span className={cn(defaultWrapperClassName, segmentWrapperClassName)}>
154 |       {content}
155 |     </span>
156 |   )
157 | })
158 | 
159 | AnimationComponent.displayName = 'AnimationComponent'
160 | 
161 | const splitText = (text: string, per: 'line' | 'word' | 'char') => {
162 |   if (per === 'line') return text.split('\n')
163 |   return text.split(/(\s+)/)
164 | }
165 | 
166 | const hasTransition = (
167 |   variant: Variant,
168 | ): variant is TargetAndTransition & { transition?: Transition } => {
169 |   return (
170 |     typeof variant === 'object' && variant !== null && 'transition' in variant
171 |   )
172 | }
173 | 
174 | const createVariantsWithTransition = (
175 |   baseVariants: Variants,
176 |   transition?: Transition & { exit?: Transition },
177 | ): Variants => {
178 |   if (!transition) return baseVariants
179 | 
180 |   const { exit: _, ...mainTransition } = transition
181 | 
182 |   return {
183 |     ...baseVariants,
184 |     visible: {
185 |       ...baseVariants.visible,
186 |       transition: {
187 |         ...(hasTransition(baseVariants.visible)
188 |           ? baseVariants.visible.transition
189 |           : {}),
190 |         ...mainTransition,
191 |       },
192 |     },
193 |     exit: {
194 |       ...baseVariants.exit,
195 |       transition: {
196 |         ...(hasTransition(baseVariants.exit)
197 |           ? baseVariants.exit.transition
198 |           : {}),
199 |         ...mainTransition,
200 |         staggerDirection: -1,
201 |       },
202 |     },
203 |   }
204 | }
205 | 
206 | export function TextEffect({
207 |   children,
208 |   per = 'word',
209 |   as = 'p',
210 |   variants,
211 |   className,
212 |   preset = 'fade',
213 |   delay = 0,
214 |   speedReveal = 1,
215 |   speedSegment = 1,
216 |   trigger = true,
217 |   onAnimationComplete,
218 |   onAnimationStart,
219 |   segmentWrapperClassName,
220 |   containerTransition,
221 |   segmentTransition,
222 |   style,
223 | }: TextEffectProps) {
224 |   const segments = splitText(children, per)
225 |   const MotionTag = motion[as as keyof typeof motion] as typeof motion.div
226 | 
227 |   const baseVariants = preset
228 |     ? presetVariants[preset]
229 |     : { container: defaultContainerVariants, item: defaultItemVariants }
230 | 
231 |   const stagger = defaultStaggerTimes[per] / speedReveal
232 | 
233 |   const baseDuration = 0.3 / speedSegment
234 | 
235 |   const customStagger = hasTransition(variants?.container?.visible ?? {})
236 |     ? (variants?.container?.visible as TargetAndTransition).transition
237 |         ?.staggerChildren
238 |     : undefined
239 | 
240 |   const customDelay = hasTransition(variants?.container?.visible ?? {})
241 |     ? (variants?.container?.visible as TargetAndTransition).transition
242 |         ?.delayChildren
243 |     : undefined
244 | 
245 |   const computedVariants = {
246 |     container: createVariantsWithTransition(
247 |       variants?.container || baseVariants.container,
248 |       {
249 |         staggerChildren: customStagger ?? stagger,
250 |         delayChildren: customDelay ?? delay,
251 |         ...containerTransition,
252 |         exit: {
253 |           staggerChildren: customStagger ?? stagger,
254 |           staggerDirection: -1,
255 |         },
256 |       },
257 |     ),
258 |     item: createVariantsWithTransition(variants?.item || baseVariants.item, {
259 |       duration: baseDuration,
260 |       ...segmentTransition,
261 |     }),
262 |   }
263 | 
264 |   return (
265 |     <AnimatePresence mode="popLayout">
266 |       {trigger && (
267 |         <MotionTag
268 |           initial="hidden"
269 |           animate="visible"
270 |           exit="exit"
271 |           variants={computedVariants.container}
272 |           className={className}
273 |           onAnimationComplete={onAnimationComplete}
274 |           onAnimationStart={onAnimationStart}
275 |           style={style}
276 |         >
277 |           {per !== 'line' ? <span className="sr-only">{children}</span> : null}
278 |           {segments.map((segment, index) => (
279 |             <AnimationComponent
280 |               key={`${per}-${index}-${segment}`}
281 |               segment={segment}
282 |               variants={computedVariants.item}
283 |               per={per}
284 |               segmentWrapperClassName={segmentWrapperClassName}
285 |             />
286 |           ))}
287 |         </MotionTag>
288 |       )}
289 |     </AnimatePresence>
290 |   )
291 | }
292 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | import { motion } from 'motion/react'
  3 | import { XIcon } from 'lucide-react'
  4 | import { Spotlight } from '@/components/ui/spotlight'
  5 | import { Magnetic } from '@/components/ui/magnetic'
  6 | import {
  7 |   MorphingDialog,
  8 |   MorphingDialogTrigger,
  9 |   MorphingDialogContent,
 10 |   MorphingDialogClose,
 11 |   MorphingDialogContainer,
 12 | } from '@/components/ui/morphing-dialog'
 13 | import Link from 'next/link'
 14 | import { AnimatedBackground } from '@/components/ui/animated-background'
 15 | import {
 16 |   PROJECTS,
 17 |   WORK_EXPERIENCE,
 18 |   BLOG_POSTS,
 19 |   EMAIL,
 20 |   SOCIAL_LINKS,
 21 | } from './data'
 22 | 
 23 | const VARIANTS_CONTAINER = {
 24 |   hidden: { opacity: 0 },
 25 |   visible: {
 26 |     opacity: 1,
 27 |     transition: {
 28 |       staggerChildren: 0.15,
 29 |     },
 30 |   },
 31 | }
 32 | 
 33 | const VARIANTS_SECTION = {
 34 |   hidden: { opacity: 0, y: 20, filter: 'blur(8px)' },
 35 |   visible: { opacity: 1, y: 0, filter: 'blur(0px)' },
 36 | }
 37 | 
 38 | const TRANSITION_SECTION = {
 39 |   duration: 0.3,
 40 | }
 41 | 
 42 | type ProjectVideoProps = {
 43 |   src: string
 44 | }
 45 | 
 46 | function ProjectVideo({ src }: ProjectVideoProps) {
 47 |   return (
 48 |     <MorphingDialog
 49 |       transition={{
 50 |         type: 'spring',
 51 |         bounce: 0,
 52 |         duration: 0.3,
 53 |       }}
 54 |     >
 55 |       <MorphingDialogTrigger>
 56 |         <video
 57 |           src={src}
 58 |           autoPlay
 59 |           loop
 60 |           muted
 61 |           className="aspect-video w-full cursor-zoom-in rounded-xl"
 62 |         />
 63 |       </MorphingDialogTrigger>
 64 |       <MorphingDialogContainer>
 65 |         <MorphingDialogContent className="relative aspect-video rounded-2xl bg-zinc-50 p-1 ring-1 ring-zinc-200/50 ring-inset dark:bg-zinc-950 dark:ring-zinc-800/50">
 66 |           <video
 67 |             src={src}
 68 |             autoPlay
 69 |             loop
 70 |             muted
 71 |             className="aspect-video h-[50vh] w-full rounded-xl md:h-[70vh]"
 72 |           />
 73 |         </MorphingDialogContent>
 74 |         <MorphingDialogClose
 75 |           className="fixed top-6 right-6 h-fit w-fit rounded-full bg-white p-1"
 76 |           variants={{
 77 |             initial: { opacity: 0 },
 78 |             animate: {
 79 |               opacity: 1,
 80 |               transition: { delay: 0.3, duration: 0.1 },
 81 |             },
 82 |             exit: { opacity: 0, transition: { duration: 0 } },
 83 |           }}
 84 |         >
 85 |           <XIcon className="h-5 w-5 text-zinc-500" />
 86 |         </MorphingDialogClose>
 87 |       </MorphingDialogContainer>
 88 |     </MorphingDialog>
 89 |   )
 90 | }
 91 | 
 92 | function MagneticSocialLink({
 93 |   children,
 94 |   link,
 95 | }: {
 96 |   children: React.ReactNode
 97 |   link: string
 98 | }) {
 99 |   return (
100 |     <Magnetic springOptions={{ bounce: 0 }} intensity={0.3}>
101 |       <a
102 |         href={link}
103 |         className="group relative inline-flex shrink-0 items-center gap-[1px] rounded-full bg-zinc-100 px-2.5 py-1 text-sm text-black transition-colors duration-200 hover:bg-zinc-950 hover:text-zinc-50 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
104 |       >
105 |         {children}
106 |         <svg
107 |           width="15"
108 |           height="15"
109 |           viewBox="0 0 15 15"
110 |           fill="none"
111 |           xmlns="http://www.w3.org/2000/svg"
112 |           className="h-3 w-3"
113 |         >
114 |           <path
115 |             d="M3.64645 11.3536C3.45118 11.1583 3.45118 10.8417 3.64645 10.6465L10.2929 4L6 4C5.72386 4 5.5 3.77614 5.5 3.5C5.5 3.22386 5.72386 3 6 3L11.5 3C11.6326 3 11.7598 3.05268 11.8536 3.14645C11.9473 3.24022 12 3.36739 12 3.5L12 9.00001C12 9.27615 11.7761 9.50001 11.5 9.50001C11.2239 9.50001 11 9.27615 11 9.00001V4.70711L4.35355 11.3536C4.15829 11.5488 3.84171 11.5488 3.64645 11.3536Z"
116 |             fill="currentColor"
117 |             fillRule="evenodd"
118 |             clipRule="evenodd"
119 |           ></path>
120 |         </svg>
121 |       </a>
122 |     </Magnetic>
123 |   )
124 | }
125 | 
126 | export default function Personal() {
127 |   return (
128 |     <motion.main
129 |       className="space-y-24"
130 |       variants={VARIANTS_CONTAINER}
131 |       initial="hidden"
132 |       animate="visible"
133 |     >
134 |       <motion.section
135 |         variants={VARIANTS_SECTION}
136 |         transition={TRANSITION_SECTION}
137 |       >
138 |         <div className="flex-1">
139 |           <p className="text-zinc-600 dark:text-zinc-400">
140 |             Focused on creating intuitive and performant web experiences.
141 |             Bridging the gap between design and development.
142 |           </p>
143 |         </div>
144 |       </motion.section>
145 | 
146 |       <motion.section
147 |         variants={VARIANTS_SECTION}
148 |         transition={TRANSITION_SECTION}
149 |       >
150 |         <h3 className="mb-5 text-lg font-medium">Selected Projects</h3>
151 |         <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
152 |           {PROJECTS.map((project) => (
153 |             <div key={project.name} className="space-y-2">
154 |               <div className="relative rounded-2xl bg-zinc-50/40 p-1 ring-1 ring-zinc-200/50 ring-inset dark:bg-zinc-950/40 dark:ring-zinc-800/50">
155 |                 <ProjectVideo src={project.video} />
156 |               </div>
157 |               <div className="px-1">
158 |                 <a
159 |                   className="font-base group relative inline-block font-[450] text-zinc-900 dark:text-zinc-50"
160 |                   href={project.link}
161 |                   target="_blank"
162 |                 >
163 |                   {project.name}
164 |                   <span className="absolute bottom-0.5 left-0 block h-[1px] w-full max-w-0 bg-zinc-900 dark:bg-zinc-50 transition-all duration-200 group-hover:max-w-full"></span>
165 |                 </a>
166 |                 <p className="text-base text-zinc-600 dark:text-zinc-400">
167 |                   {project.description}
168 |                 </p>
169 |               </div>
170 |             </div>
171 |           ))}
172 |         </div>
173 |       </motion.section>
174 | 
175 |       <motion.section
176 |         variants={VARIANTS_SECTION}
177 |         transition={TRANSITION_SECTION}
178 |       >
179 |         <h3 className="mb-5 text-lg font-medium">Work Experience</h3>
180 |         <div className="flex flex-col space-y-2">
181 |           {WORK_EXPERIENCE.map((job) => (
182 |             <a
183 |               className="relative overflow-hidden rounded-2xl bg-zinc-300/30 p-[1px] dark:bg-zinc-600/30"
184 |               href={job.link}
185 |               target="_blank"
186 |               rel="noopener noreferrer"
187 |               key={job.id}
188 |             >
189 |               <Spotlight
190 |                 className="from-zinc-900 via-zinc-800 to-zinc-700 blur-2xl dark:from-zinc-100 dark:via-zinc-200 dark:to-zinc-50"
191 |                 size={64}
192 |               />
193 |               <div className="relative h-full w-full rounded-[15px] bg-white p-4 dark:bg-zinc-950">
194 |                 <div className="relative flex w-full flex-row justify-between">
195 |                   <div>
196 |                     <h4 className="font-normal dark:text-zinc-100">
197 |                       {job.title}
198 |                     </h4>
199 |                     <p className="text-zinc-500 dark:text-zinc-400">
200 |                       {job.company}
201 |                     </p>
202 |                   </div>
203 |                   <p className="text-zinc-600 dark:text-zinc-400">
204 |                     {job.start} - {job.end}
205 |                   </p>
206 |                 </div>
207 |               </div>
208 |             </a>
209 |           ))}
210 |         </div>
211 |       </motion.section>
212 | 
213 |       <motion.section
214 |         variants={VARIANTS_SECTION}
215 |         transition={TRANSITION_SECTION}
216 |       >
217 |         <h3 className="mb-3 text-lg font-medium">Blog</h3>
218 |         <div className="flex flex-col space-y-0">
219 |           <AnimatedBackground
220 |             enableHover
221 |             className="h-full w-full rounded-lg bg-zinc-100 dark:bg-zinc-900/80"
222 |             transition={{
223 |               type: 'spring',
224 |               bounce: 0,
225 |               duration: 0.2,
226 |             }}
227 |           >
228 |             {BLOG_POSTS.map((post) => (
229 |               <Link
230 |                 key={post.uid}
231 |                 className="-mx-3 rounded-xl px-3 py-3"
232 |                 href={post.link}
233 |                 data-id={post.uid}
234 |               >
235 |                 <div className="flex flex-col space-y-1">
236 |                   <h4 className="font-normal dark:text-zinc-100">
237 |                     {post.title}
238 |                   </h4>
239 |                   <p className="text-zinc-500 dark:text-zinc-400">
240 |                     {post.description}
241 |                   </p>
242 |                 </div>
243 |               </Link>
244 |             ))}
245 |           </AnimatedBackground>
246 |         </div>
247 |       </motion.section>
248 | 
249 |       <motion.section
250 |         variants={VARIANTS_SECTION}
251 |         transition={TRANSITION_SECTION}
252 |       >
253 |         <h3 className="mb-5 text-lg font-medium">Connect</h3>
254 |         <p className="mb-5 text-zinc-600 dark:text-zinc-400">
255 |           Feel free to contact me at{' '}
256 |           <a className="underline dark:text-zinc-300" href={`mailto:${EMAIL}`}>
257 |             {EMAIL}
258 |           </a>
259 |         </p>
260 |         <div className="flex items-center justify-start space-x-3">
261 |           {SOCIAL_LINKS.map((link) => (
262 |             <MagneticSocialLink key={link.label} link={link.link}>
263 |               {link.label}
264 |             </MagneticSocialLink>
265 |           ))}
266 |         </div>
267 |       </motion.section>
268 |     </motion.main>
269 |   )
270 | }
271 | 


--------------------------------------------------------------------------------
/components/ui/morphing-dialog.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import React, {
  4 |   useCallback,
  5 |   useContext,
  6 |   useEffect,
  7 |   useId,
  8 |   useMemo,
  9 |   useRef,
 10 |   useState,
 11 | } from 'react'
 12 | import {
 13 |   motion,
 14 |   AnimatePresence,
 15 |   MotionConfig,
 16 |   Transition,
 17 |   Variant,
 18 | } from 'motion/react'
 19 | import { createPortal } from 'react-dom'
 20 | import { cn } from '@/lib/utils'
 21 | import { XIcon } from 'lucide-react'
 22 | import useClickOutside from '@/hooks/useClickOutside'
 23 | 
 24 | export type MorphingDialogContextType = {
 25 |   isOpen: boolean
 26 |   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
 27 |   uniqueId: string
 28 |   triggerRef: React.RefObject<HTMLDivElement>
 29 | }
 30 | 
 31 | const MorphingDialogContext =
 32 |   React.createContext<MorphingDialogContextType | null>(null)
 33 | 
 34 | function useMorphingDialog() {
 35 |   const context = useContext(MorphingDialogContext)
 36 |   if (!context) {
 37 |     throw new Error(
 38 |       'useMorphingDialog must be used within a MorphingDialogProvider',
 39 |     )
 40 |   }
 41 |   return context
 42 | }
 43 | 
 44 | export type MorphingDialogProviderProps = {
 45 |   children: React.ReactNode
 46 |   transition?: Transition
 47 | }
 48 | 
 49 | function MorphingDialogProvider({
 50 |   children,
 51 |   transition,
 52 | }: MorphingDialogProviderProps) {
 53 |   const [isOpen, setIsOpen] = useState(false)
 54 |   const uniqueId = useId()
 55 |   const triggerRef = useRef<HTMLDivElement>(null!)
 56 | 
 57 |   const contextValue = useMemo(
 58 |     () => ({
 59 |       isOpen,
 60 |       setIsOpen,
 61 |       uniqueId,
 62 |       triggerRef,
 63 |     }),
 64 |     [isOpen, uniqueId],
 65 |   )
 66 | 
 67 |   return (
 68 |     <MorphingDialogContext.Provider value={contextValue}>
 69 |       <MotionConfig transition={transition}>{children}</MotionConfig>
 70 |     </MorphingDialogContext.Provider>
 71 |   )
 72 | }
 73 | 
 74 | export type MorphingDialogProps = {
 75 |   children: React.ReactNode
 76 |   transition?: Transition
 77 | }
 78 | 
 79 | function MorphingDialog({ children, transition }: MorphingDialogProps) {
 80 |   return (
 81 |     <MorphingDialogProvider>
 82 |       <MotionConfig transition={transition}>{children}</MotionConfig>
 83 |     </MorphingDialogProvider>
 84 |   )
 85 | }
 86 | 
 87 | export type MorphingDialogTriggerProps = {
 88 |   children: React.ReactNode
 89 |   className?: string
 90 |   style?: React.CSSProperties
 91 |   triggerRef?: React.RefObject<HTMLDivElement>
 92 | }
 93 | 
 94 | function MorphingDialogTrigger({
 95 |   children,
 96 |   className,
 97 |   style,
 98 |   triggerRef,
 99 | }: MorphingDialogTriggerProps) {
100 |   const { setIsOpen, isOpen, uniqueId } = useMorphingDialog()
101 | 
102 |   const handleClick = useCallback(() => {
103 |     setIsOpen(!isOpen)
104 |   }, [isOpen, setIsOpen])
105 | 
106 |   const handleKeyDown = useCallback(
107 |     (event: React.KeyboardEvent) => {
108 |       if (event.key === 'Enter' || event.key === ' ') {
109 |         event.preventDefault()
110 |         setIsOpen(!isOpen)
111 |       }
112 |     },
113 |     [isOpen, setIsOpen],
114 |   )
115 | 
116 |   return (
117 |     <motion.div
118 |       ref={triggerRef}
119 |       layoutId={`dialog-${uniqueId}`}
120 |       className={cn('relative cursor-pointer', className)}
121 |       onClick={handleClick}
122 |       onKeyDown={handleKeyDown}
123 |       style={style}
124 |       role="button"
125 |       aria-haspopup="dialog"
126 |       aria-expanded={isOpen}
127 |       aria-controls={`motion-ui-morphing-dialog-content-${uniqueId}`}
128 |       aria-label={`Open dialog ${uniqueId}`}
129 |     >
130 |       {children}
131 |     </motion.div>
132 |   )
133 | }
134 | 
135 | export type MorphingDialogContentProps = {
136 |   children: React.ReactNode
137 |   className?: string
138 |   style?: React.CSSProperties
139 | }
140 | 
141 | function MorphingDialogContent({
142 |   children,
143 |   className,
144 |   style,
145 | }: MorphingDialogContentProps) {
146 |   const { setIsOpen, isOpen, uniqueId, triggerRef } = useMorphingDialog()
147 |   const containerRef = useRef<HTMLDivElement>(null!)
148 |   const [firstFocusableElement, setFirstFocusableElement] =
149 |     useState<HTMLElement | null>(null)
150 |   const [lastFocusableElement, setLastFocusableElement] =
151 |     useState<HTMLElement | null>(null)
152 | 
153 |   useEffect(() => {
154 |     const handleKeyDown = (event: KeyboardEvent) => {
155 |       if (event.key === 'Escape') {
156 |         setIsOpen(false)
157 |       }
158 |       if (event.key === 'Tab') {
159 |         if (!firstFocusableElement || !lastFocusableElement) return
160 | 
161 |         if (event.shiftKey) {
162 |           if (document.activeElement === firstFocusableElement) {
163 |             event.preventDefault()
164 |             lastFocusableElement.focus()
165 |           }
166 |         } else {
167 |           if (document.activeElement === lastFocusableElement) {
168 |             event.preventDefault()
169 |             firstFocusableElement.focus()
170 |           }
171 |         }
172 |       }
173 |     }
174 | 
175 |     document.addEventListener('keydown', handleKeyDown)
176 | 
177 |     return () => {
178 |       document.removeEventListener('keydown', handleKeyDown)
179 |     }
180 |   }, [setIsOpen, firstFocusableElement, lastFocusableElement])
181 | 
182 |   useEffect(() => {
183 |     if (isOpen) {
184 |       document.body.classList.add('overflow-hidden')
185 |       const focusableElements = containerRef.current?.querySelectorAll(
186 |         'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
187 |       )
188 |       if (focusableElements && focusableElements.length > 0) {
189 |         setFirstFocusableElement(focusableElements[0] as HTMLElement)
190 |         setLastFocusableElement(
191 |           focusableElements[focusableElements.length - 1] as HTMLElement,
192 |         )
193 |         ;(focusableElements[0] as HTMLElement).focus()
194 |       }
195 |     } else {
196 |       document.body.classList.remove('overflow-hidden')
197 |       triggerRef.current?.focus()
198 |     }
199 |   }, [isOpen, triggerRef])
200 | 
201 |   useClickOutside(containerRef, () => {
202 |     if (isOpen) {
203 |       setIsOpen(false)
204 |     }
205 |   })
206 | 
207 |   return (
208 |     <motion.div
209 |       ref={containerRef}
210 |       layoutId={`dialog-${uniqueId}`}
211 |       className={cn('overflow-hidden', className)}
212 |       style={style}
213 |       role="dialog"
214 |       aria-modal="true"
215 |       aria-labelledby={`motion-ui-morphing-dialog-title-${uniqueId}`}
216 |       aria-describedby={`motion-ui-morphing-dialog-description-${uniqueId}`}
217 |     >
218 |       {children}
219 |     </motion.div>
220 |   )
221 | }
222 | 
223 | export type MorphingDialogContainerProps = {
224 |   children: React.ReactNode
225 |   className?: string
226 |   style?: React.CSSProperties
227 | }
228 | 
229 | function MorphingDialogContainer({ children }: MorphingDialogContainerProps) {
230 |   const { isOpen, uniqueId } = useMorphingDialog()
231 |   const [mounted, setMounted] = useState(false)
232 | 
233 |   useEffect(() => {
234 |     setMounted(true)
235 |     return () => setMounted(false)
236 |   }, [])
237 | 
238 |   if (!mounted) return null
239 | 
240 |   return createPortal(
241 |     <AnimatePresence initial={false} mode="sync">
242 |       {isOpen && (
243 |         <>
244 |           <motion.div
245 |             key={`backdrop-${uniqueId}`}
246 |             className="fixed inset-0 h-full w-full bg-white/40 backdrop-blur-sm dark:bg-black/40"
247 |             initial={{ opacity: 0 }}
248 |             animate={{ opacity: 1 }}
249 |             exit={{ opacity: 0 }}
250 |           />
251 |           <div className="fixed inset-0 z-50 flex items-center justify-center">
252 |             {children}
253 |           </div>
254 |         </>
255 |       )}
256 |     </AnimatePresence>,
257 |     document.body,
258 |   )
259 | }
260 | 
261 | export type MorphingDialogTitleProps = {
262 |   children: React.ReactNode
263 |   className?: string
264 |   style?: React.CSSProperties
265 | }
266 | 
267 | function MorphingDialogTitle({
268 |   children,
269 |   className,
270 |   style,
271 | }: MorphingDialogTitleProps) {
272 |   const { uniqueId } = useMorphingDialog()
273 | 
274 |   return (
275 |     <motion.div
276 |       layoutId={`dialog-title-container-${uniqueId}`}
277 |       className={className}
278 |       style={style}
279 |       layout
280 |     >
281 |       {children}
282 |     </motion.div>
283 |   )
284 | }
285 | 
286 | export type MorphingDialogSubtitleProps = {
287 |   children: React.ReactNode
288 |   className?: string
289 |   style?: React.CSSProperties
290 | }
291 | 
292 | function MorphingDialogSubtitle({
293 |   children,
294 |   className,
295 |   style,
296 | }: MorphingDialogSubtitleProps) {
297 |   const { uniqueId } = useMorphingDialog()
298 | 
299 |   return (
300 |     <motion.div
301 |       layoutId={`dialog-subtitle-container-${uniqueId}`}
302 |       className={className}
303 |       style={style}
304 |     >
305 |       {children}
306 |     </motion.div>
307 |   )
308 | }
309 | 
310 | export type MorphingDialogDescriptionProps = {
311 |   children: React.ReactNode
312 |   className?: string
313 |   disableLayoutAnimation?: boolean
314 |   variants?: {
315 |     initial: Variant
316 |     animate: Variant
317 |     exit: Variant
318 |   }
319 | }
320 | 
321 | function MorphingDialogDescription({
322 |   children,
323 |   className,
324 |   variants,
325 |   disableLayoutAnimation,
326 | }: MorphingDialogDescriptionProps) {
327 |   const { uniqueId } = useMorphingDialog()
328 | 
329 |   return (
330 |     <motion.div
331 |       key={`dialog-description-${uniqueId}`}
332 |       layoutId={
333 |         disableLayoutAnimation
334 |           ? undefined
335 |           : `dialog-description-content-${uniqueId}`
336 |       }
337 |       variants={variants}
338 |       className={className}
339 |       initial="initial"
340 |       animate="animate"
341 |       exit="exit"
342 |       id={`dialog-description-${uniqueId}`}
343 |     >
344 |       {children}
345 |     </motion.div>
346 |   )
347 | }
348 | 
349 | export type MorphingDialogImageProps = {
350 |   src: string
351 |   alt: string
352 |   className?: string
353 |   style?: React.CSSProperties
354 | }
355 | 
356 | function MorphingDialogImage({
357 |   src,
358 |   alt,
359 |   className,
360 |   style,
361 | }: MorphingDialogImageProps) {
362 |   const { uniqueId } = useMorphingDialog()
363 | 
364 |   return (
365 |     <motion.img
366 |       src={src}
367 |       alt={alt}
368 |       className={cn(className)}
369 |       layoutId={`dialog-img-${uniqueId}`}
370 |       style={style}
371 |     />
372 |   )
373 | }
374 | 
375 | export type MorphingDialogCloseProps = {
376 |   children?: React.ReactNode
377 |   className?: string
378 |   variants?: {
379 |     initial: Variant
380 |     animate: Variant
381 |     exit: Variant
382 |   }
383 | }
384 | 
385 | function MorphingDialogClose({
386 |   children,
387 |   className,
388 |   variants,
389 | }: MorphingDialogCloseProps) {
390 |   const { setIsOpen, uniqueId } = useMorphingDialog()
391 | 
392 |   const handleClose = useCallback(() => {
393 |     setIsOpen(false)
394 |   }, [setIsOpen])
395 | 
396 |   return (
397 |     <motion.button
398 |       onClick={handleClose}
399 |       type="button"
400 |       aria-label="Close dialog"
401 |       key={`dialog-close-${uniqueId}`}
402 |       className={cn('absolute top-6 right-6', className)}
403 |       initial="initial"
404 |       animate="animate"
405 |       exit="exit"
406 |       variants={variants}
407 |     >
408 |       {children || <XIcon size={24} />}
409 |     </motion.button>
410 |   )
411 | }
412 | 
413 | export {
414 |   MorphingDialog,
415 |   MorphingDialogTrigger,
416 |   MorphingDialogContainer,
417 |   MorphingDialogContent,
418 |   MorphingDialogClose,
419 |   MorphingDialogTitle,
420 |   MorphingDialogSubtitle,
421 |   MorphingDialogDescription,
422 |   MorphingDialogImage,
423 | }
424 | 


--------------------------------------------------------------------------------