├── .env.local.example
├── .eslintrc.json
├── .gitignore
├── .prettierrc.json
├── .vscode
    └── settings.json
├── README.md
├── app
    ├── about
    │   └── page.tsx
    ├── api
    │   ├── disable-draft
    │   │   └── route.ts
    │   ├── draft
    │   │   └── route.ts
    │   └── revalidate
    │   │   └── route.ts
    ├── contact
    │   └── page.tsx
    ├── favicon.ico
    ├── globals.css
    ├── layout.tsx
    ├── not-found.tsx
    ├── page.tsx
    └── work
    │   ├── [slug]
    │       └── page.tsx
    │   └── page.tsx
├── components.json
├── components
    ├── about-promo.tsx
    ├── animated-text.tsx
    ├── contact-details.tsx
    ├── footer.tsx
    ├── hero-alt.tsx
    ├── hero.tsx
    ├── image-list.tsx
    ├── intro-promo.tsx
    ├── menu.tsx
    ├── mode-toggle.tsx
    ├── preview.tsx
    ├── project-card.tsx
    ├── project-list.tsx
    ├── scroll-behavior.tsx
    ├── theme-provider.tsx
    ├── ui
    │   └── aspect-ratio.tsx
    └── work-promo.tsx
├── lib
    ├── api.ts
    ├── contentful-image.tsx
    ├── markdown.tsx
    └── utils.ts
├── next-sitemap.config.js
├── next.config.mjs
├── package.json
├── postcss.config.js
├── tailwind.config.ts
├── tsconfig.json
└── yarn.lock


/.env.local.example:
--------------------------------------------------------------------------------
1 | SITE_URL=
2 | CONTENTFUL_SPACE_ID=
3 | CONTENTFUL_PREVIEW_SECRET=
4 | CONTENTFUL_REVALIDATE_SECRET=
5 | CONTENTFUL_ACCESS_TOKEN=
6 | CONTENTFUL_PREVIEW_ACCESS_TOKEN=
7 | CONTENTFUL_ENVIRONMENT=


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "plugins": ["@typescript-eslint"],
 3 |   "extends": [
 4 |     "next/core-web-vitals",
 5 |     "plugin:@typescript-eslint/recommended",
 6 |     "prettier"
 7 |   ],
 8 |   "rules": {
 9 |     "@typescript-eslint/no-unused-vars": "off",
10 |     "@typescript-eslint/no-explicit-any": "off"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/.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 | /public
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |     "semi": false,
3 |     "trailingComma": "es5",
4 |     "singleQuote": true,
5 |     "tabWidth": 2,
6 |     "useTabs": false
7 |   }


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "editor.codeActionsOnSave": {
3 |     "source.fixAll.eslint": "explicit"
4 |   },
5 |   "editor.formatOnSave": true,
6 |   "editor.defaultFormatter": "esbenp.prettier-vscode"
7 | }
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # README
 2 | 
 3 | Ryan Wiemer's personal website. This repo is really only intended for me but feel free to look around.
 4 | 
 5 | Technology used:
 6 | 
 7 | - Next.js
 8 | - Contentful
 9 | - Tailwind CSS
10 | - Framer Motion
11 | 


--------------------------------------------------------------------------------
/app/about/page.tsx:
--------------------------------------------------------------------------------
 1 | import { draftMode } from 'next/headers'
 2 | import { getPageBySlug } from '@/lib/api'
 3 | import HeroAlt from '@/components/hero-alt'
 4 | import { Markdown } from '@/lib/markdown'
 5 | import { getPlaiceholder } from 'plaiceholder'
 6 | 
 7 | export async function generateMetadata() {
 8 |   const { isEnabled } = draftMode()
 9 |   const page = await getPageBySlug('about', isEnabled)
10 |   return {
11 |     title: page.title,
12 |     description: page.description,
13 |     openGraph: {
14 |       images: [page.cover.url],
15 |     },
16 |   }
17 | }
18 | 
19 | export default async function Page() {
20 |   const { isEnabled } = draftMode()
21 |   const page = await getPageBySlug('about', isEnabled)
22 | 
23 |   // Generate the base64 for the blur-up effect for each image
24 |   await Promise.all(
25 |     page.imagesCollection.items.map(async (image: any) => {
26 |       if (!image.url.endsWith('.mp4')) {
27 |         const buffer = await fetch(image.url).then(async (res) => {
28 |           return Buffer.from(await res.arrayBuffer())
29 |         })
30 |         const { base64 } = await getPlaiceholder(buffer, { size: 10 })
31 |         image.base64 = base64
32 |       }
33 |     })
34 |   )
35 | 
36 |   return (
37 |     <>
38 |       <HeroAlt
39 |         heading={page.heading}
40 |         subheading={page.subheading}
41 |         images={page.imagesCollection.items} // Use the updated images array
42 |       />
43 |       <div className="grid grid-cols-12 gap-6 container">
44 |         <div className="col-span-12 md:col-span-10 md:col-start-2 lg:col-span-8 lg:col-start-3 my-24">
45 |           <Markdown content={page.content} />
46 |         </div>
47 |       </div>
48 |     </>
49 |   )
50 | }
51 | 


--------------------------------------------------------------------------------
/app/api/disable-draft/route.ts:
--------------------------------------------------------------------------------
 1 | import { draftMode } from 'next/headers'
 2 | import { redirect } from 'next/navigation'
 3 | 
 4 | export async function GET(request: Request) {
 5 |   const { searchParams } = new URL(request.url)
 6 | 
 7 |   draftMode().disable()
 8 | 
 9 |   redirect(searchParams.get('redirect') || '/')
10 | }
11 | 


--------------------------------------------------------------------------------
/app/api/draft/route.ts:
--------------------------------------------------------------------------------
 1 | import { draftMode } from 'next/headers'
 2 | import { redirect } from 'next/navigation'
 3 | import { getPreviewProjectBySlug } from '../../../lib/api'
 4 | import { getPreviewPageBySlug } from '../../../lib/api'
 5 | 
 6 | export async function GET(request: Request) {
 7 |   const { searchParams } = new URL(request.url)
 8 |   const secret = searchParams.get('secret')
 9 |   const slug = searchParams.get('slug')
10 | 
11 |   if (secret !== process.env.CONTENTFUL_PREVIEW_SECRET) {
12 |     return new Response('Invalid token', { status: 401 })
13 |   }
14 | 
15 |   const project = await getPreviewProjectBySlug(slug)
16 |   const page = await getPreviewPageBySlug(slug)
17 | 
18 |   draftMode().enable()
19 | 
20 |   if (project) {
21 |     redirect(`/work/${project.slug}`)
22 |   }
23 |   if (page) {
24 |     redirect(`/${page.slug}`)
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/app/api/revalidate/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from 'next/server'
 2 | import { revalidateTag } from 'next/cache'
 3 | 
 4 | export async function POST(request: NextRequest) {
 5 |   const requestHeaders = new Headers(request.headers)
 6 |   const secret = requestHeaders.get('x-vercel-reval-key')
 7 | 
 8 |   if (secret !== process.env.CONTENTFUL_REVALIDATE_SECRET) {
 9 |     return NextResponse.json({ message: 'Invalid secret' }, { status: 401 })
10 |   }
11 | 
12 |   // Revalidate the cache for all of the data pulled from Contentful in lib/api.ts
13 |   revalidateTag('contentfulData')
14 |   return NextResponse.json({ revalidated: true, now: Date.now() })
15 | }
16 | 


--------------------------------------------------------------------------------
/app/contact/page.tsx:
--------------------------------------------------------------------------------
 1 | import { draftMode } from 'next/headers'
 2 | import { getPageBySlug } from '@/lib/api'
 3 | import AnimatedText from '@/components/animated-text'
 4 | import ContactDetails from '@/components/contact-details'
 5 | 
 6 | export async function generateMetadata() {
 7 |   const { isEnabled } = draftMode()
 8 |   const page = await getPageBySlug('contact', isEnabled)
 9 |   return {
10 |     title: page.title,
11 |     description: page.description,
12 |     openGraph: {
13 |       images: [page.cover.url],
14 |     },
15 |   }
16 | }
17 | 
18 | export default async function Page() {
19 |   const { isEnabled } = draftMode()
20 |   const page = await getPageBySlug('contact', isEnabled)
21 | 
22 |   return (
23 |     <section className="container pt-[25vh] pb-24 md:grid grid-cols-12 gap-6 items-center">
24 |       <div className="col-span-6">
25 |         <div className="text-4xl md:text-6xl font-extrabold tracking-tight relative">
26 |           <div className="relative inline-block">
27 |             <AnimatedText el="h1" text={page.heading} />
28 |           </div>
29 |         </div>
30 |         <div className="mb-10 col-span-12 text-lg md:text-xl text-muted-foreground">
31 |           <AnimatedText word el="h2" text={page.subheading} />
32 |         </div>
33 |         <div className="md:grid grid-cols-12 col-span-12 gap-6 ">
34 |           <div className="col-span-12 text-lg mb-10">
35 |             <ContactDetails />
36 |           </div>
37 |         </div>
38 |       </div>
39 |     </section>
40 |   )
41 | }
42 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ryanwiemer/rw/d1997ddb25494bdebd1823b387d5404c09a53a5a/app/favicon.ico


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @layer utilities {
  6 |   .writing-vertical-rl {
  7 |     writing-mode: vertical-rl;
  8 |   }
  9 | }
 10 | 
 11 | @media (max-width: 767px) {
 12 |   .contain {
 13 |     overflow: hidden;
 14 |   }
 15 | }
 16 | 
 17 | .no-scroll {
 18 |   overflow: hidden;
 19 | }
 20 | 
 21 | .no-mix-blend header.closed a,
 22 | .no-mix-blend header.closed button,
 23 | .no-mix-blend header {
 24 |   mix-blend-mode: normal !important;
 25 | }
 26 | 
 27 | .gradient-mask-custom {
 28 |   mask-image: linear-gradient(
 29 |     to left,
 30 |     rgba(0, 0, 0, 0) 0%,
 31 |     rgba(0, 0, 0, 1) 10%,
 32 |     rgba(0, 0, 0, 1) 90%,
 33 |     rgba(0, 0, 0, 0) 100%
 34 |   );
 35 | }
 36 | 
 37 | @layer base {
 38 |   :root {
 39 |     --background: 0 0% 100%;
 40 |     --foreground: 240 10% 3.9%;
 41 | 
 42 |     --card: 0 0% 100%;
 43 |     --card-foreground: 240 10% 3.9%;
 44 | 
 45 |     --popover: 0 0% 100%;
 46 |     --popover-foreground: 240 10% 3.9%;
 47 | 
 48 |     --primary: 240 5.9% 10%;
 49 |     --primary-foreground: 0 0% 98%;
 50 | 
 51 |     --secondary: 240 4.8% 95.9%;
 52 |     --secondary-foreground: 240 5.9% 10%;
 53 | 
 54 |     --muted: 240 4.8% 95.9%;
 55 |     --muted-foreground: 240 3.8% 46.1%;
 56 | 
 57 |     --accent: 240 4.8% 95.9%;
 58 |     --accent-foreground: 240 5.9% 10%;
 59 | 
 60 |     --destructive: 0 84.2% 60.2%;
 61 |     --destructive-foreground: 0 0% 98%;
 62 | 
 63 |     --border: 240 5.9% 90%;
 64 |     --input: 240 5.9% 90%;
 65 |     --ring: 240 10% 3.9%;
 66 | 
 67 |     --radius: 0.5rem;
 68 |   }
 69 | 
 70 |   .dark {
 71 |     --background: 240 10% 3.9%;
 72 |     --foreground: 0 0% 98%;
 73 | 
 74 |     --card: 240 10% 3.9%;
 75 |     --card-foreground: 0 0% 98%;
 76 | 
 77 |     --popover: 240 10% 3.9%;
 78 |     --popover-foreground: 0 0% 98%;
 79 | 
 80 |     --primary: 0 0% 98%;
 81 |     --primary-foreground: 240 5.9% 10%;
 82 | 
 83 |     --secondary: 240 3.7% 15.9%;
 84 |     --secondary-foreground: 0 0% 98%;
 85 | 
 86 |     --muted: 240 3.7% 15.9%;
 87 |     --muted-foreground: 240 5% 64.9%;
 88 | 
 89 |     --accent: 240 3.7% 15.9%;
 90 |     --accent-foreground: 0 0% 98%;
 91 | 
 92 |     --destructive: 0 62.8% 30.6%;
 93 |     --destructive-foreground: 0 0% 98%;
 94 | 
 95 |     --border: 240 3.7% 15.9%;
 96 |     --input: 240 3.7% 15.9%;
 97 |     --ring: 240 4.9% 83.9%;
 98 |   }
 99 | }
100 | 
101 | @layer base {
102 |   * {
103 |     @apply border-border;
104 |   }
105 |   body {
106 |     @apply bg-background text-foreground;
107 |   }
108 | }
109 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import './globals.css'
 2 | import { Inter } from 'next/font/google'
 3 | import { Analytics } from '@vercel/analytics/react'
 4 | import { SpeedInsights } from '@vercel/speed-insights/next'
 5 | import Footer from '../components/footer'
 6 | import Menu from '../components/menu'
 7 | import { ThemeProvider } from '@/components/theme-provider'
 8 | import ScrollBehavior from '@/components/scroll-behavior'
 9 | 
10 | export const metadata = {
11 |   metadataBase: new URL('https://rw-poc.vercel.app/'),
12 |   title: {
13 |     template: '%s | Ryan Wiemer',
14 |     default: 'Ryan Wiemer',
15 |   },
16 |   description: `Client engagement director, project manager, and occasional open source developer. I help companies build and launch digital products.`,
17 | }
18 | 
19 | const inter = Inter({
20 |   variable: '--font-inter',
21 |   subsets: ['latin'],
22 |   display: 'swap',
23 | })
24 | 
25 | export default async function RootLayout({
26 |   children,
27 | }: {
28 |   children: React.ReactNode
29 | }) {
30 |   return (
31 |     <html lang="en" className={inter.variable}>
32 |       <body>
33 |         <ScrollBehavior />
34 |         <ThemeProvider
35 |           attribute="class"
36 |           defaultTheme="system"
37 |           enableSystem
38 |           disableTransitionOnChange
39 |         >
40 |           <Menu />
41 |           <main className="min-h-[calc(100svh-81px)] relative z-10">
42 |             {children}
43 |           </main>
44 |           <Footer />
45 |         </ThemeProvider>
46 |         <Analytics />
47 |         <SpeedInsights />
48 |       </body>
49 |     </html>
50 |   )
51 | }
52 | 


--------------------------------------------------------------------------------
/app/not-found.tsx:
--------------------------------------------------------------------------------
 1 | export default function NotFound() {
 2 |   return (
 3 |     <div className="text-center container flex justify-center items-center min-h-[100svh] ">
 4 |       <div className="my-24 flex align-baseline items-baseline">
 5 |         <div>
 6 |           <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight">
 7 |             404
 8 |           </h1>
 9 |           <p className="mt-4">Page not found.</p>
10 |         </div>
11 |       </div>
12 |     </div>
13 |   )
14 | }
15 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import { draftMode } from 'next/headers'
 2 | import { getAllProjects, getPageBySlug } from '@/lib/api'
 3 | import IntroPromo from '@/components/intro-promo'
 4 | import AboutPromo from '@/components/about-promo'
 5 | import WorkPromo from '@/components/work-promo'
 6 | import { getPlaiceholder } from 'plaiceholder'
 7 | 
 8 | export async function generateMetadata() {
 9 |   const { isEnabled } = draftMode()
10 |   const page = await getPageBySlug('home', isEnabled)
11 |   return {
12 |     description: page.description,
13 |     openGraph: {
14 |       images: [page.cover.url],
15 |       videos: [page.videosCollection.items[0].url],
16 |     },
17 |   }
18 | }
19 | 
20 | export default async function Page() {
21 |   const { isEnabled } = draftMode()
22 |   const page = await getPageBySlug('home', isEnabled)
23 |   const allProjects = await getAllProjects(isEnabled)
24 | 
25 |   // Generate the base64 for the blur-up effect for each project
26 |   await Promise.all(
27 |     allProjects.map(async (project) => {
28 |       const buffer = await fetch(project.screenshot.url).then(async (res) => {
29 |         return Buffer.from(await res.arrayBuffer())
30 |       })
31 |       const { base64 } = await getPlaiceholder(buffer, { size: 10 })
32 |       project.screenshot.base64 = base64
33 |     })
34 |   )
35 | 
36 |   return (
37 |     <>
38 |       <IntroPromo
39 |         heading={page.heading}
40 |         subheading={page.subheading}
41 |         videos={page.videosCollection.items}
42 |       />
43 |       <WorkPromo projects={allProjects} />
44 |       <AboutPromo content={page.content} />
45 |     </>
46 |   )
47 | }
48 | 


--------------------------------------------------------------------------------
/app/work/[slug]/page.tsx:
--------------------------------------------------------------------------------
  1 | import { Markdown } from '@/lib/markdown'
  2 | import { draftMode } from 'next/headers'
  3 | import { getPlaiceholder } from 'plaiceholder'
  4 | import Hero from '../../../components/hero'
  5 | import { getAllProjects, getProjectAndNextProject } from '@/lib/api'
  6 | import ImageList from '@/components/image-list'
  7 | import Preview from '@/components/preview'
  8 | import { MousePointerClick } from 'lucide-react'
  9 | 
 10 | export async function generateStaticParams() {
 11 |   const allProjects = await getAllProjects(false)
 12 | 
 13 |   return allProjects.map((project) => ({
 14 |     slug: project.slug,
 15 |   }))
 16 | }
 17 | 
 18 | export async function generateMetadata({
 19 |   params,
 20 | }: {
 21 |   params: { slug: string }
 22 | }) {
 23 |   const { isEnabled } = draftMode()
 24 |   const { project } = await getProjectAndNextProject(params.slug, isEnabled)
 25 | 
 26 |   return {
 27 |     title: project.title,
 28 |     description: project.description,
 29 |     openGraph: {
 30 |       images: [project.cover.url],
 31 |     },
 32 |   }
 33 | }
 34 | 
 35 | export default async function PostPage({
 36 |   params,
 37 | }: {
 38 |   params: { slug: string }
 39 | }) {
 40 |   const { isEnabled } = draftMode()
 41 |   const { project, nextProject } = await getProjectAndNextProject(
 42 |     params.slug,
 43 |     isEnabled
 44 |   )
 45 | 
 46 |   // Generate the base64 for the blur-up effect for the cover image
 47 |   const coverBuffer = await fetch(project.cover.url).then(async (res) => {
 48 |     return Buffer.from(await res.arrayBuffer())
 49 |   })
 50 |   const { base64: coverBase64 } = await getPlaiceholder(coverBuffer, {
 51 |     size: 10,
 52 |   })
 53 |   project.cover.base64 = coverBase64
 54 | 
 55 |   // Generate the base64 for the blur-up effect for each image
 56 |   await Promise.all(
 57 |     project.imagesCollection.items.map(async (image: any) => {
 58 |       if (!image.url.endsWith('.mp4')) {
 59 |         const buffer = await fetch(image.url).then(async (res) => {
 60 |           return Buffer.from(await res.arrayBuffer())
 61 |         })
 62 |         const { base64 } = await getPlaiceholder(buffer, { size: 10 })
 63 |         image.base64 = base64
 64 |       }
 65 |     })
 66 |   )
 67 |   // Generate the base64 for the blur-up effect for the next project's cover image
 68 |   if (nextProject) {
 69 |     const nextCoverBuffer = await fetch(nextProject.cover.url).then(
 70 |       async (res) => {
 71 |         return Buffer.from(await res.arrayBuffer())
 72 |       }
 73 |     )
 74 |     const { base64: nextCoverBase64 } = await getPlaiceholder(nextCoverBuffer, {
 75 |       size: 10,
 76 |     })
 77 |     nextProject.cover.base64 = nextCoverBase64
 78 |   }
 79 | 
 80 |   return (
 81 |     <>
 82 |       <Hero heading={project.heading} image={project.cover} />
 83 |       <section className="z-20 bg-background">
 84 |         <div className="min-h-[50vh] py-24">
 85 |           <div className="container lg:grid lg:grid-cols-12">
 86 |             <div className="md:grid grid-cols-12 col-span-10 col-start-2">
 87 |               <h2 className="col-span-4 text-2xl text-muted-foreground pb-4 md:pb-0">
 88 |                 Overview
 89 |               </h2>
 90 |               <div className="col-span-8 text-lg">
 91 |                 {project.content && <Markdown content={project.content} />}
 92 |                 <ul className="mt-12">
 93 |                   {project.role && (
 94 |                     <li className="grid grid-cols-2 gap-4 justify-between py-4 border-t border-b">
 95 |                       <span className="text-muted-foreground">My Role</span>
 96 |                       <h3 className="inline-block text-right">
 97 |                         {project.role}
 98 |                       </h3>
 99 |                     </li>
100 |                   )}
101 |                   {project.client && (
102 |                     <li className="grid grid-cols-2 gap-4 justify-between py-4 border-b">
103 |                       <span className="text-muted-foreground">Client</span>
104 |                       <h3 className="inline-block text-right">
105 |                         {project.client}
106 |                       </h3>
107 |                     </li>
108 |                   )}
109 |                   {project.category && (
110 |                     <li className="grid grid-cols-2 gap-4 justify-between py-4 border-b">
111 |                       <span className="text-muted-foreground">Category</span>
112 |                       <h3 className="inline-block text-right">
113 |                         {project.category} Project
114 |                       </h3>
115 |                     </li>
116 |                   )}
117 |                   {project.year && (
118 |                     <li className="grid grid-cols-2 gap-4 justify-between py-4 border-b">
119 |                       <span className="text-muted-foreground">Year</span>
120 |                       <h3 className="inline-block text-right">
121 |                         {project.year}
122 |                       </h3>
123 |                     </li>
124 |                   )}
125 |                   {project.technology && (
126 |                     <li className="grid grid-cols-2 gap-4 justify-between py-4 border-b">
127 |                       <span className="text-muted-foreground">Technology</span>
128 |                       <h3 className="inline-block text-right">
129 |                         {project.technology}
130 |                       </h3>
131 |                     </li>
132 |                   )}
133 |                   {project.url && (
134 |                     <li className="grid grid-cols-2 gap-4 justify-between py-4 border-b">
135 |                       <span className="text-muted-foreground">Website</span>
136 |                       <a
137 |                         href={project.url}
138 |                         className="text-right underline text-lg hover:opacity-70 transition-opacity duration-300"
139 |                         target="_blank"
140 |                         rel="noreferrer"
141 |                       >
142 |                         View Live{' '}
143 |                         <MousePointerClick
144 |                           size={18}
145 |                           className="ml-2 inline-block relative -top-[2px]"
146 |                         />
147 |                       </a>
148 |                     </li>
149 |                   )}
150 |                 </ul>
151 |               </div>
152 |             </div>
153 |           </div>
154 |         </div>
155 |         <div className="relative grid grid-cols-12 gap-4 pb-24 container">
156 |           <div className="col-span-12 lg:col-start-2 lg:col-span-10">
157 |             <ImageList images={project.imagesCollection} />
158 |           </div>
159 |         </div>
160 |       </section>
161 |       {nextProject && (
162 |         <Preview
163 |           heading={nextProject.heading}
164 |           url={nextProject.slug}
165 |           image={nextProject.cover}
166 |         />
167 |       )}
168 |     </>
169 |   )
170 | }
171 | 


--------------------------------------------------------------------------------
/app/work/page.tsx:
--------------------------------------------------------------------------------
 1 | import { draftMode } from 'next/headers'
 2 | import { getAllProjects, getPageBySlug } from '@/lib/api'
 3 | import ProjectList from '@/components/project-list'
 4 | import { getPlaiceholder } from 'plaiceholder'
 5 | 
 6 | export async function generateMetadata() {
 7 |   const { isEnabled } = draftMode()
 8 |   const page = await getPageBySlug('work', isEnabled)
 9 |   return {
10 |     title: page.title,
11 |     description: page.description,
12 |     openGraph: {
13 |       images: [page.cover.url],
14 |     },
15 |   }
16 | }
17 | 
18 | export default async function ProjectPage() {
19 |   const { isEnabled } = draftMode()
20 |   const allProjects = await getAllProjects(isEnabled)
21 |   const page = await getPageBySlug('work', isEnabled)
22 | 
23 |   // Generate the base64 for the blur-up effect for each project
24 |   await Promise.all(
25 |     allProjects.map(async (project) => {
26 |       const buffer = await fetch(project.screenshot.url).then(async (res) => {
27 |         return Buffer.from(await res.arrayBuffer())
28 |       })
29 |       const { base64 } = await getPlaiceholder(buffer, { size: 10 })
30 |       project.screenshot.base64 = base64
31 |     })
32 |   )
33 | 
34 |   return (
35 |     <>
36 |       <section className="pt-[25vh] pb-24 container min-h-screen">
37 |         <ProjectList
38 |           heading={page.heading}
39 |           subheading={page.subheading}
40 |           items={allProjects}
41 |         />
42 |       </section>
43 |     </>
44 |   )
45 | }
46 | 


--------------------------------------------------------------------------------
/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.ts",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "zinc",
10 |     "cssVariables": true
11 |   },
12 |   "aliases": {
13 |     "components": "@/components",
14 |     "utils": "@/lib/utils"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/components/about-promo.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import { motion } from 'framer-motion'
 3 | import Link from 'next/link'
 4 | import { Markdown } from '@/lib/markdown'
 5 | 
 6 | export default function AboutPromo({ content }: { content?: any }) {
 7 |   return (
 8 |     <motion.section className="min-h-[100svh] grid items-center">
 9 |       <div className="container grid grid-cols-12 gap-6 items-baseline">
10 |         <h3 className="col-span-12 md:col-span-3 lg:col-start-2 text-2xl text-muted-foreground">
11 |           About
12 |         </h3>
13 |         <div className="col-span-12 md:col-span-9 lg:col-span-7 text-2xl md:text-3xl">
14 |           <div className="mb-10">
15 |             {content && <Markdown content={content} />}
16 |           </div>
17 |           <Link
18 |             className="underline hover:opacity-70 transition-opacity duration-300"
19 |             href="/about"
20 |           >
21 |             Get to know me
22 |           </Link>
23 |         </div>
24 |       </div>
25 |     </motion.section>
26 |   )
27 | }
28 | 


--------------------------------------------------------------------------------
/components/animated-text.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import React from 'react'
 4 | import { motion, useInView } from 'framer-motion'
 5 | import { useRef } from 'react'
 6 | 
 7 | const defaultVariants = {
 8 |   hidden: { opacity: 1, y: '200%' },
 9 |   visible: {
10 |     opacity: 1,
11 |     y: 0,
12 |     transition: {
13 |       duration: 0.75,
14 |       ease: [0.2, 0.65, 0.3, 0.9],
15 |     },
16 |   },
17 | }
18 | 
19 | export default function AnimatedText({
20 |   text,
21 |   el: Wrapper = 'span',
22 |   className,
23 |   word,
24 | }: {
25 |   text: string | string[]
26 |   el?: keyof JSX.IntrinsicElements
27 |   className?: string
28 |   word?: boolean
29 | }) {
30 |   const textArray = Array.isArray(text) ? text : [text]
31 |   const ref = useRef(null)
32 |   const isInView = useInView(ref, { amount: 0.5, once: true })
33 | 
34 |   return (
35 |     <Wrapper className={className}>
36 |       <span className="sr-only">{text}</span>
37 |       <motion.span
38 |         ref={ref}
39 |         initial="hidden"
40 |         animate={isInView ? 'visible' : 'hidden'}
41 |         transition={{ staggerChildren: 0.025 }}
42 |         aria-hidden
43 |       >
44 |         {word ? (
45 |           <>
46 |             {textArray.map((line, index) => (
47 |               <span className="inline-block py-1 overflow-hidden" key={index}>
48 |                 {line.split(' ').map((word, index) => (
49 |                   <span className="inline-block" key={index}>
50 |                     <motion.span
51 |                       className="inline-block"
52 |                       variants={defaultVariants}
53 |                       key={index}
54 |                     >
55 |                       {word}
56 |                     </motion.span>
57 |                     <span className="inline-block">&nbsp;</span>
58 |                   </span>
59 |                 ))}
60 |               </span>
61 |             ))}
62 |           </>
63 |         ) : (
64 |           <>
65 |             {textArray.map((line, index) => (
66 |               <span className="inline-block py-1 overflow-hidden" key={index}>
67 |                 {line.split(' ').map((word, index) => (
68 |                   <span className=" inline-block" key={index}>
69 |                     {word.split('').map((char, index) => (
70 |                       <motion.span
71 |                         className="inline-block"
72 |                         variants={defaultVariants}
73 |                         key={index}
74 |                       >
75 |                         {char}
76 |                       </motion.span>
77 |                     ))}
78 |                     <span className="inline-block">&nbsp;</span>
79 |                   </span>
80 |                 ))}
81 |               </span>
82 |             ))}
83 |           </>
84 |         )}
85 |       </motion.span>
86 |     </Wrapper>
87 |   )
88 | }
89 | 


--------------------------------------------------------------------------------
/components/contact-details.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | import { motion, useInView } from 'framer-motion'
  3 | import { useRef } from 'react'
  4 | import { ArrowUpRight } from 'lucide-react'
  5 | 
  6 | export default function ContactDetails() {
  7 |   const defaultVariants = {
  8 |     hidden: { y: '100%', opacity: 0 },
  9 |     visible: {
 10 |       opacity: 1,
 11 |       y: 0,
 12 |       transition: {
 13 |         duration: 0.5,
 14 |         ease: [0.2, 0.65, 0.3, 0.9],
 15 |       },
 16 |     },
 17 |   }
 18 |   const ref = useRef(null)
 19 |   const isInView = useInView(ref, { amount: 0.5, once: true })
 20 |   return (
 21 |     <motion.ul
 22 |       ref={ref}
 23 |       initial="hidden"
 24 |       animate={isInView ? 'visible' : 'hidden'}
 25 |       transition={{ staggerChildren: 0.15 }}
 26 |     >
 27 |       <motion.li className="overflow-hidden flex justify-between py-4 border-t border-b">
 28 |         <motion.span
 29 |           variants={defaultVariants}
 30 |           className="text-muted-foreground"
 31 |         >
 32 |           Location
 33 |         </motion.span>
 34 |         <motion.h3 variants={defaultVariants} className="">
 35 |           Oakland, CA
 36 |         </motion.h3>
 37 |       </motion.li>
 38 |       <motion.li className="overflow-hidden flex justify-between py-4 border-b">
 39 |         <motion.span
 40 |           variants={defaultVariants}
 41 |           className="text-muted-foreground"
 42 |         >
 43 |           Email
 44 |         </motion.span>
 45 |         <motion.h3 variants={defaultVariants} className="">
 46 |           <a
 47 |             className="underline hover:opacity-70 transition-opacity duration-300"
 48 |             href="mailto:ryan@ryanwiemer.com"
 49 |           >
 50 |             ryan@ryanwiemer.com
 51 |             <ArrowUpRight
 52 |               className="inline-block relative ml-1 opacity-50"
 53 |               size={16}
 54 |             />
 55 |           </a>
 56 |         </motion.h3>
 57 |       </motion.li>
 58 |       <motion.li className="overflow-hidden flex justify-between py-4 border-b">
 59 |         <motion.span
 60 |           variants={defaultVariants}
 61 |           className="text-muted-foreground"
 62 |         >
 63 |           LinkedIn
 64 |         </motion.span>
 65 |         <motion.h3 variants={defaultVariants}>
 66 |           <a
 67 |             className="underline hover:opacity-70 transition-opacity duration-300"
 68 |             href="https://www.linkedin.com/in/ryanwiemer/"
 69 |             target="_blank"
 70 |             rel="noopener noreferrer"
 71 |           >
 72 |             ryanwiemer
 73 |             <ArrowUpRight
 74 |               className="inline-block relative ml-1 opacity-50"
 75 |               size={16}
 76 |             />
 77 |           </a>
 78 |         </motion.h3>
 79 |       </motion.li>
 80 |       <motion.li className="overflow-hidden flex justify-between py-4 border-b">
 81 |         <motion.span
 82 |           variants={defaultVariants}
 83 |           className="text-muted-foreground"
 84 |         >
 85 |           GitHub
 86 |         </motion.span>
 87 |         <motion.h3 variants={defaultVariants}>
 88 |           <a
 89 |             className="underline hover:opacity-70 transition-opacity duration-300"
 90 |             href="https://github.com/ryanwiemer"
 91 |             target="_blank"
 92 |             rel="noopener noreferrer"
 93 |           >
 94 |             @ryanwiemer
 95 |             <ArrowUpRight
 96 |               className="inline-block relative ml-1 opacity-50"
 97 |               size={16}
 98 |             />
 99 |           </a>
100 |         </motion.h3>
101 |       </motion.li>
102 |     </motion.ul>
103 |   )
104 | }
105 | 


--------------------------------------------------------------------------------
/components/footer.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import Link from 'next/link'
 4 | import { usePathname } from 'next/navigation'
 5 | 
 6 | export default function Footer() {
 7 |   const pathname = usePathname()
 8 |   if (pathname.startsWith('/work/')) {
 9 |     return null
10 |   }
11 |   return (
12 |     <footer className="container z-30 pb-10 flex flex-col justify-center text-muted-foreground">
13 |       <div className="border-t pt-4 grid grid-cols-2 gap-4 items-center">
14 |         <a href="#" className="col-span-2 md:col-span-1">
15 |           &copy;{new Date().getFullYear()}
16 |         </a>
17 |         <ul className="col-span-2 md:col-span-1 md:justify-end md:text-right flex gap-4">
18 |           <li>
19 |             <Link href="/">Home</Link>
20 |           </li>
21 |           <li>
22 |             <Link href="/about">About</Link>
23 |           </li>
24 |           <li>
25 |             <Link href="/work">Work</Link>
26 |           </li>
27 |           <li>
28 |             <Link href="/contact">Contact</Link>
29 |           </li>
30 |         </ul>
31 |       </div>
32 |     </footer>
33 |   )
34 | }
35 | 


--------------------------------------------------------------------------------
/components/hero-alt.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import { motion } from 'framer-motion'
  4 | import ContentfulImage from '../lib/contentful-image'
  5 | import AnimatedText from './animated-text'
  6 | import { AspectRatio } from './ui/aspect-ratio'
  7 | 
  8 | export default function HeroAlt({
  9 |   heading,
 10 |   subheading,
 11 |   images,
 12 | }: {
 13 |   heading: string
 14 |   subheading?: string
 15 |   images?: any
 16 | }) {
 17 |   //Marquee effect on the images
 18 |   const marqueeVariants = {
 19 |     animate: {
 20 |       x: ['0%', '-100%'],
 21 |       transition: {
 22 |         x: {
 23 |           repeat: Infinity,
 24 |           repeatType: 'loop',
 25 |           duration: 100,
 26 |           ease: 'linear',
 27 |         },
 28 |       },
 29 |     },
 30 |   }
 31 | 
 32 |   return (
 33 |     <>
 34 |       <motion.div className="relative pt-[25vh]">
 35 |         <div className="grid container">
 36 |           <motion.div>
 37 |             {heading && (
 38 |               <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight">
 39 |                 <AnimatedText text={heading} />
 40 |               </h1>
 41 |             )}
 42 |             {subheading && (
 43 |               <h2 className="text-lg md:text-xl text-muted-foreground">
 44 |                 <AnimatedText text={subheading} word />
 45 |               </h2>
 46 |             )}
 47 |           </motion.div>
 48 |         </div>
 49 | 
 50 |         <motion.div className="relative gap-x-4 max-w-[1400px] mx-auto flex mt-10 overflow-hidden gradient-mask-custom">
 51 |           <motion.ul
 52 |             initial={{ opacity: 0 }}
 53 |             whileInView={{
 54 |               opacity: 1,
 55 |               transition: { duration: 1 },
 56 |             }}
 57 |             viewport={{ once: true }}
 58 |             className="gap-x-4 min-w-full flex flex-shrink-0 justify-around user-select-none"
 59 |             variants={marqueeVariants}
 60 |             animate="animate"
 61 |           >
 62 |             {images?.map((image: any, index: number) => (
 63 |               <motion.li key={index} className="min-w-[50vw] lg:min-w-[600px]">
 64 |                 <AspectRatio className="rounded-lg relative" ratio={1 / 1}>
 65 |                   {image.url && image.url.endsWith('.mp4') ? (
 66 |                     <video
 67 |                       preload="auto"
 68 |                       loop
 69 |                       autoPlay
 70 |                       muted
 71 |                       playsInline
 72 |                       className="object-cover z-2 rounded-lg h-full w-full"
 73 |                     >
 74 |                       <source src={image.url} type="video/mp4" />
 75 |                     </video>
 76 |                   ) : (
 77 |                     <ContentfulImage
 78 |                       alt={image.title}
 79 |                       priority
 80 |                       fill
 81 |                       blurDataURL={image.base64}
 82 |                       placeholder="blur"
 83 |                       sizes="100vw"
 84 |                       className="object-cover z-2 rounded-lg"
 85 |                       src={image.url!}
 86 |                     />
 87 |                   )}
 88 |                 </AspectRatio>
 89 |               </motion.li>
 90 |             ))}
 91 |           </motion.ul>
 92 |           <motion.ul
 93 |             initial={{ opacity: 0 }}
 94 |             whileInView={{
 95 |               opacity: 1,
 96 |               transition: { duration: 1 },
 97 |             }}
 98 |             viewport={{ once: true }}
 99 |             className="gap-x-4 min-w-full flex flex-shrink-0 justify-around user-select-none"
100 |             variants={marqueeVariants}
101 |             animate="animate"
102 |           >
103 |             {images?.map((image: any, index: number) => (
104 |               <motion.li key={index} className="min-w-[50vw] lg:min-w-[600px]">
105 |                 <AspectRatio className="rounded-lg relative" ratio={1 / 1}>
106 |                   <ContentfulImage
107 |                     alt={image.title}
108 |                     priority
109 |                     fill
110 |                     sizes="100vw"
111 |                     className="object-cover z-2 rounded-lg"
112 |                     src={image.url!}
113 |                   />
114 |                 </AspectRatio>
115 |               </motion.li>
116 |             ))}
117 |           </motion.ul>
118 |         </motion.div>
119 |       </motion.div>
120 |     </>
121 |   )
122 | }
123 | 


--------------------------------------------------------------------------------
/components/hero.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { useRef, useEffect } from 'react'
 4 | import { motion, useScroll, useTransform, useInView } from 'framer-motion'
 5 | import ContentfulImage from '../lib/contentful-image'
 6 | import AnimatedText from './animated-text'
 7 | 
 8 | export default function Hero({
 9 |   heading,
10 |   image,
11 | }: {
12 |   heading: string
13 |   image?: any
14 | }) {
15 |   // Subtle effect on scroll
16 |   const ref = useRef(null)
17 |   const { scrollYProgress } = useScroll({
18 |     target: ref,
19 |     offset: ['start start', 'end start'],
20 |   })
21 |   const slow = useTransform(scrollYProgress, [0, 1], ['0%', '20%'])
22 | 
23 |   // Add or remove class on body element to disable mix-blend-mode when the Hero is visible
24 |   const isInView = useInView(ref, {
25 |     once: false,
26 |   })
27 | 
28 |   useEffect(() => {
29 |     const body = document.querySelector('body')
30 |     if (isInView && body) {
31 |       body.classList.add('no-mix-blend')
32 |     } else if (body) {
33 |       body.classList.remove('no-mix-blend')
34 |     }
35 |   }, [isInView])
36 | 
37 |   return (
38 |     <>
39 |       <motion.div
40 |         ref={ref}
41 |         className="relative block h-[100svh] overflow-hidden"
42 |       >
43 |         <motion.div
44 |           className="w-full h-full absolute top-0 left-0 right-0 bottom-0"
45 |           style={{
46 |             y: slow,
47 |           }}
48 |         >
49 |           <ContentfulImage
50 |             alt={image?.title}
51 |             priority
52 |             fill
53 |             placeholder="blur"
54 |             blurDataURL={image?.base64}
55 |             className="object-cover z-2"
56 |             src={image?.url}
57 |           />
58 |         </motion.div>
59 |         <div className="w-full h-full absolute top-0 left-0 right-0 bottom-0 bg-black bg-opacity-30" />
60 |         <div className="grid items-end container py-10 absolute top-0 bottom-0 left-0 right-0 text-white">
61 |           <motion.div>
62 |             {heading && (
63 |               <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight">
64 |                 <AnimatedText text={heading} />
65 |               </h1>
66 |             )}
67 |           </motion.div>
68 |         </div>
69 |       </motion.div>
70 |     </>
71 |   )
72 | }
73 | 


--------------------------------------------------------------------------------
/components/image-list.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import ContentfulImage from '@/lib/contentful-image'
 4 | import { motion } from 'framer-motion'
 5 | 
 6 | export default function ImageList({ images }: { images: any }) {
 7 |   return (
 8 |     <ul className="-mb-8">
 9 |       {images.items.map((image: any) => {
10 |         const isVideo = image.url.endsWith('.mp4')
11 |         const isLeft = image.description?.includes('left')
12 |         const isRight = image.description?.includes('right')
13 |         const isFull = image.description?.includes('full')
14 |         const liClass = `rounded-xl mb-4 mx-auto clear-right ${
15 |           isLeft
16 |             ? 'bg-muted w-[calc(50%-.5rem)] float-left'
17 |             : isRight
18 |               ? 'bg-muted w-[calc(50%-.5rem)] float-right clear-right'
19 |               : isFull
20 |                 ? ''
21 |                 : 'bg-muted w-full'
22 |         }`
23 |         return (
24 |           <motion.li
25 |             initial={{ opacity: 0, y: 50 }}
26 |             whileInView={{ opacity: 1, y: 0 }}
27 |             viewport={{ once: true }}
28 |             transition={{
29 |               ease: 'linear',
30 |               duration: 0.5,
31 |               y: { duration: 0.5 },
32 |             }}
33 |             key={image.title}
34 |             className={liClass}
35 |           >
36 |             <div
37 |               className={`rounded-xl ${
38 |                 image.description?.includes('full') ? '' : 'p-[10%]'
39 |               }`}
40 |             >
41 |               {isVideo ? (
42 |                 <video
43 |                   className={`w-full h-auto rounded-xl ${
44 |                     image.description?.includes('full') ? '' : 'border-2'
45 |                   }`}
46 |                   preload="auto"
47 |                   loop
48 |                   autoPlay
49 |                   muted
50 |                   playsInline
51 |                 >
52 |                   <source src={image.url} type="video/mp4" />
53 |                 </video>
54 |               ) : (
55 |                 <ContentfulImage
56 |                   alt={image.title}
57 |                   height={800}
58 |                   width={1600}
59 |                   blurDataURL={image.base64}
60 |                   placeholder="blur"
61 |                   src={image.url}
62 |                   className={`rounded-xl ${
63 |                     image.description?.includes('full') ? '' : 'border-2'
64 |                   }`}
65 |                 />
66 |               )}
67 |             </div>
68 |           </motion.li>
69 |         )
70 |       })}
71 |     </ul>
72 |   )
73 | }
74 | 


--------------------------------------------------------------------------------
/components/intro-promo.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import { useRef, useState } from 'react'
  4 | import { motion, useScroll, useTransform } from 'framer-motion'
  5 | import AnimatedText from './animated-text'
  6 | import { AspectRatio } from './ui/aspect-ratio'
  7 | import { MicOffIcon, XIcon, MonitorOffIcon } from 'lucide-react'
  8 | import { useWindowSize } from '@uidotdev/usehooks'
  9 | 
 10 | export default function IntroPromo({
 11 |   heading,
 12 |   subheading,
 13 |   videos,
 14 | }: {
 15 |   heading: string
 16 |   subheading: string
 17 |   videos?: any
 18 | }) {
 19 |   // Subtle effect on scroll
 20 |   const ref = useRef(null)
 21 |   const { scrollYProgress } = useScroll({
 22 |     offset: [0, '100vh'],
 23 |   })
 24 | 
 25 |   const screen = useWindowSize()
 26 |   const isMobile = screen?.width && screen.width < 768
 27 |   const fade = useTransform(scrollYProgress, [0, 0.5], [1, isMobile ? 1 : 0])
 28 | 
 29 |   // Tile interactions
 30 |   const [isClosed, setIsClosed] = useState(false)
 31 |   const [currentVideo, setCurrentVideo] = useState(videos[0].url)
 32 | 
 33 |   const constraintsRef = useRef(null)
 34 | 
 35 |   function close() {
 36 |     setIsClosed(true)
 37 |     setTimeout(() => {
 38 |       setCurrentVideo(
 39 |         currentVideo === videos[0].url ? videos[1].url : videos[0].url
 40 |       )
 41 |     }, 300)
 42 |   }
 43 | 
 44 |   function open() {
 45 |     setIsClosed(false)
 46 |   }
 47 | 
 48 |   const tileVariants = {
 49 |     hidden: {
 50 |       opacity: 0,
 51 |     },
 52 |     visible: {
 53 |       opacity: 1,
 54 |       transition: {
 55 |         duration: 1,
 56 |         ease: 'linear',
 57 |       },
 58 |     },
 59 |   }
 60 | 
 61 |   return (
 62 |     <motion.section
 63 |       className="relative container min-h-[100svh] grid grid-cols-12 gap-6 place-content-between md:items-end md:place-content-end pt-[25vh] pb-10 overflow-hidden"
 64 |       style={{ opacity: fade }}
 65 |     >
 66 |       <div className="grid col-span-12 md:col-span-8">
 67 |         <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight mb-4">
 68 |           <AnimatedText text={heading} />
 69 |         </h1>
 70 |         <h2 className="text-2xl md:text-3xl font-base tracking-tight text-muted-foreground">
 71 |           <AnimatedText word text={subheading} />
 72 |         </h2>
 73 |       </div>
 74 |       <div className="col-span-8 md:col-start-10 md:col-span-4 rounded-lg inner-border relative">
 75 |         {isClosed && (
 76 |           <button
 77 |             onClick={open}
 78 |             className="absolute w-full h-full top-0 right-0 bottom-0 left-0 text-foreground text-sm grid items-center justify-center"
 79 |             aria-label="Click to reconnect"
 80 |           >
 81 |             <span>
 82 |               <MonitorOffIcon className="inline mr-1 text-red-600" size={14} />{' '}
 83 |               Click to reconnect
 84 |             </span>
 85 |           </button>
 86 |         )}
 87 |         <motion.div
 88 |           variants={tileVariants}
 89 |           initial="hidden"
 90 |           whileInView={isClosed ? 'hidden' : 'visible'}
 91 |           viewport={{ once: true }}
 92 |           className={`grid items-end md:hover:cursor-grab md:active:cursor-grabbing shadow-xl rounded-lg ${
 93 |             isClosed ? 'pointer-events-none' : ''
 94 |           }`}
 95 |           drag={isMobile ? false : true}
 96 |           dragSnapToOrigin
 97 |           whileDrag={{ scale: 1.03 }}
 98 |           dragElastic={0.1}
 99 |           dragConstraints={constraintsRef}
100 |         >
101 |           <motion.div
102 |             ref={constraintsRef}
103 |             className="w-full h-full scale-125 absolute top-0 left-0 rounded-lg"
104 |           />
105 |           <AspectRatio ratio={3 / 2} className="relative">
106 |             <video
107 |               className="object-cover h-full w-full rounded-lg border-4 border-[#efefef] pointer-events-none"
108 |               preload="auto"
109 |               loop
110 |               autoPlay
111 |               muted
112 |               playsInline
113 |               key={currentVideo}
114 |             >
115 |               <source src={currentVideo} type="video/mp4" />
116 |             </video>
117 |             <button
118 |               onClick={close}
119 |               className="absolute top-0 right-0 text-black bg-[#efefef] p-2 rounded-bl-lg rounded-tr-lg"
120 |               aria-label="Click to close video"
121 |             >
122 |               <XIcon size={18} />
123 |             </button>
124 |             <span className="rounded-bl-lg rounded-tr-lg text-sm absolute bottom-0 left-0 bg-[#efefef] p-1 text-black">
125 |               <MicOffIcon
126 |                 className="inline-block relative -top-[2px] text-red-600 mr-1"
127 |                 size={14}
128 |               />
129 |               Ryan Wiemer
130 |             </span>
131 |           </AspectRatio>
132 |         </motion.div>
133 |       </div>
134 |     </motion.section>
135 |   )
136 | }
137 | 


--------------------------------------------------------------------------------
/components/menu.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | import { useState, useEffect } from 'react'
  3 | import Link from 'next/link'
  4 | import { stagger, useAnimate, motion } from 'framer-motion'
  5 | import { ModeToggle } from './mode-toggle'
  6 | import { usePathname } from 'next/navigation'
  7 | import { ArrowUpRight } from 'lucide-react'
  8 | 
  9 | function useMenuAnimation(isOpen: boolean) {
 10 |   const [scope, animate] = useAnimate()
 11 | 
 12 |   useEffect(() => {
 13 |     const menuAnimations = isOpen
 14 |       ? [
 15 |           [
 16 |             'nav',
 17 |             { opacity: 1, x: 0 },
 18 |             {
 19 |               ease: [0.08, 0.65, 0.53, 0.96],
 20 |             },
 21 |           ],
 22 |           [
 23 |             'li',
 24 |             { transform: 'scale(1)', opacity: 1, filter: 'blur(0px)' },
 25 |             { delay: stagger(0.05), at: '-0.1' },
 26 |           ],
 27 |         ]
 28 |       : [
 29 |           [
 30 |             'li',
 31 |             { transform: 'scale(0.5)', opacity: 0, filter: 'blur(10px)' },
 32 |             { delay: stagger(0.05, { from: 'last' }), at: '<' },
 33 |           ],
 34 |           ['nav', { x: '100%' }, { at: '-0.3' }],
 35 |         ]
 36 |     // @ts-expect-error - TODO: Fix this
 37 |     animate([...menuAnimations])
 38 |   }, [animate, isOpen])
 39 | 
 40 |   return scope
 41 | }
 42 | 
 43 | export default function Menu() {
 44 |   const pathname = usePathname()
 45 | 
 46 |   const [isOpen, setIsOpen] = useState(false)
 47 | 
 48 |   function toggle() {
 49 |     setIsOpen(!isOpen)
 50 |     document.documentElement.classList.toggle('contain')
 51 |   }
 52 | 
 53 |   function close() {
 54 |     setIsOpen(false)
 55 |     document.documentElement.classList.remove('contain')
 56 |   }
 57 | 
 58 |   const scope = useMenuAnimation(isOpen)
 59 | 
 60 |   useEffect(() => {
 61 |     if (pathname !== '/projects/*') {
 62 |       const body = document.querySelector('body')
 63 |       if (body) {
 64 |         body.classList.remove('no-mix-blend')
 65 |       }
 66 |     }
 67 |   }, [pathname])
 68 | 
 69 |   return (
 70 |     <>
 71 |       <header
 72 |         ref={scope}
 73 |         className={`${
 74 |           isOpen ? 'open' : 'closed'
 75 |         } md:fixed md:z-50 md:top-0 md:left-0 md:right-0 md:container md:flex md:justify-between md:items-baseline md:mix-blend-difference`}
 76 |       >
 77 |         <Link
 78 |           href="/"
 79 |           onClick={close}
 80 |           className={`${
 81 |             isOpen ? '' : ''
 82 |           } z-50 fixed left-[1.4rem] top-6 md:relative md:left-0 md:top-0 uppercase text-white font-semibold mix-blend-difference text-xl md:text-base`}
 83 |         >
 84 |           Ryan
 85 |         </Link>
 86 |         <motion.button
 87 |           onClick={toggle}
 88 |           className="fixed right-[1.4rem] top-6 z-50 h-7 w-14 text-xl text-white mix-blend-difference md:!hidden"
 89 |           aria-label="Toggle menu"
 90 |         >
 91 |           <span className="absolute left-0 right-0 top-0 bottom-0 overflow-hidden">
 92 |             <motion.span
 93 |               initial={false}
 94 |               animate={
 95 |                 isOpen
 96 |                   ? { y: '100%', skewY: '5deg', scale: 0.9 }
 97 |                   : { y: 0, skewY: 0, scale: 1 }
 98 |               }
 99 |               transition={{ type: 'spring', bounce: 0.2, duration: 0.4 }}
100 |               className="absolute left-0 right-0 top-0"
101 |             >
102 |               Menu
103 |             </motion.span>
104 |             <motion.span
105 |               initial={false}
106 |               animate={
107 |                 isOpen
108 |                   ? { y: 0, skewY: 0, scale: 1 }
109 |                   : { y: '-100%', skewY: '5deg', scale: 0.9 }
110 |               }
111 |               transition={{ type: 'spring', bounce: 0.2, duration: 0.4 }}
112 |               className="absolute left-0 right-0 top-0"
113 |             >
114 |               Close
115 |             </motion.span>
116 |           </span>
117 |         </motion.button>
118 |         <nav
119 |           style={{
120 |             pointerEvents: isOpen ? 'auto' : 'none',
121 |           }}
122 |           className="z-40 opacity-0 will-change-transform grid items-end py-6 fixed md:relative top-0 right-0 left-0 bottom-0 text-left bg-background md:!opacity-100 md:!translate-x-0 md:!pointer-events-auto md:!right-0 md:!bottom-auto md:!left-auto md:!bg-transparent md:mix-blend-difference"
123 |         >
124 |           <ul className="w-full grid gap-6 items-center px-6 text-foreground md:text-white text-4xl font-medium md:text-base md:flex md:font-normal md:gap-6 md:px-0">
125 |             <li className="md:!opacity-100 md:!filter-none md:!scale-100">
126 |               <Link
127 |                 href="/"
128 |                 className={`inline-block hover:opacity-70 transition-opacity duration-300 ease-in-out ${
129 |                   pathname === '/' ? 'underline' : ''
130 |                 }`}
131 |                 onClick={close}
132 |               >
133 |                 Home
134 |               </Link>
135 |             </li>
136 |             <li className="md:!opacity-100 md:!filter-none md:!scale-100">
137 |               <Link
138 |                 href="/about"
139 |                 className={`inline-block hover:opacity-70 transition-opacity duration-300 ease-in-out ${
140 |                   pathname === '/about' ? 'underline' : ''
141 |                 }`}
142 |                 onClick={close}
143 |               >
144 |                 About
145 |               </Link>
146 |             </li>
147 |             <li className="md:!opacity-100 md:!filter-none md:!scale-100">
148 |               <Link
149 |                 href="/work"
150 |                 className={`inline-block hover:opacity-70 transition-opacity duration-300 ease-in-out ${
151 |                   pathname === '/work' ? 'underline' : ''
152 |                 }`}
153 |                 onClick={close}
154 |               >
155 |                 Work
156 |               </Link>
157 |             </li>
158 |             <li className="md:!opacity-100 md:!filter-none md:!scale-100">
159 |               <Link
160 |                 href="/contact"
161 |                 className={`inline-block hover:opacity-70 transition-opacity duration-300 ease-in-out ${
162 |                   pathname === '/contact' ? 'underline' : ''
163 |                 }`}
164 |                 onClick={close}
165 |               >
166 |                 Contact
167 |               </Link>
168 |             </li>
169 |             <li className="hidden md:!opacity-100 md:inline-block md:!filter-none md:!scale-100">
170 |               <ModeToggle blend />
171 |             </li>
172 |           </ul>
173 |           <ul className="flex gap-6 px-6 text-foreground leading-1 md:!hidden">
174 |             <li>
175 |               <a
176 |                 className="text-base"
177 |                 href="https://www.linkedin.com/in/ryanwiemer/"
178 |                 target="_blank"
179 |                 rel="noopener noreferrer"
180 |               >
181 |                 LinkedIn
182 |                 <ArrowUpRight
183 |                   className="inline-block relative ml-1 opacity-50"
184 |                   size={16}
185 |                 />
186 |               </a>
187 |             </li>
188 |             <li>
189 |               <a
190 |                 className="text-base"
191 |                 href="https://github.com/ryanwiemer"
192 |                 target="_blank"
193 |                 rel="noopener noreferrer"
194 |               >
195 |                 GitHub
196 |                 <ArrowUpRight
197 |                   className="inline-block relative ml-1 opacity-50"
198 |                   size={16}
199 |                 />
200 |               </a>
201 |             </li>
202 |             <li className="ml-auto">
203 |               <ModeToggle />
204 |             </li>
205 |           </ul>
206 |         </nav>
207 |       </header>
208 |     </>
209 |   )
210 | }
211 | 


--------------------------------------------------------------------------------
/components/mode-toggle.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { useTheme } from 'next-themes'
 4 | 
 5 | interface ModeToggleProps {
 6 |   blend?: boolean
 7 | }
 8 | 
 9 | export function ModeToggle({ blend }: ModeToggleProps) {
10 |   const { setTheme, theme } = useTheme()
11 | 
12 |   return (
13 |     <button
14 |       className="hover:opacity-70 transition-opacity duration-300 relative top-[3px] h-[1.2rem] w-[1.2rem] mix-blend-difference dark:-rotate-180"
15 |       onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
16 |       aria-label="Toggle dark mode"
17 |     >
18 |       <svg
19 |         viewBox="0 0 440.926 440.926"
20 |         className={`${blend ? 'fill-white' : 'fill-foreground'}`}
21 |       >
22 |         <g>
23 |           <path
24 |             d="M321.004,100.539c-3.836,0-7.613,0.22-11.361,0.583H119.349C53.435,101.123,0,154.558,0,220.463
25 |   c0,65.904,53.435,119.34,119.349,119.34h190.293c3.748,0.354,7.525,0.584,11.361,0.584c66.125,0,119.922-53.789,119.922-119.924
26 |   S387.129,100.539,321.004,100.539z M321.004,298.264c-42.898,0-77.801-34.895-77.801-77.801c0-42.907,34.902-77.801,77.801-77.801
27 |   c42.896,0,77.801,34.894,77.801,77.801C398.805,263.369,363.891,298.264,321.004,298.264z"
28 |           />
29 |         </g>
30 |       </svg>
31 |     </button>
32 |   )
33 | }
34 | 


--------------------------------------------------------------------------------
/components/preview.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import { useRef, useState } from 'react'
  4 | import {
  5 |   motion,
  6 |   useMotionValueEvent,
  7 |   useScroll,
  8 |   useTransform,
  9 | } from 'framer-motion'
 10 | import ContentfulImage from '../lib/contentful-image'
 11 | import Link from 'next/link'
 12 | import { useRouter } from 'next/navigation'
 13 | import { useWindowSize } from '@uidotdev/usehooks'
 14 | import { ArrowRight } from 'lucide-react'
 15 | 
 16 | export default function Preview({
 17 |   heading,
 18 |   url,
 19 |   image,
 20 | }: {
 21 |   heading: string
 22 |   url: string
 23 |   image: any
 24 | }) {
 25 |   // Setup scroll watcher
 26 |   const ref = useRef(null)
 27 |   const { scrollYProgress } = useScroll({
 28 |     target: ref,
 29 |     offset: ['0 1', '1 1'],
 30 |   })
 31 | 
 32 |   const { scrollYProgress: pageScrollProgress } = useScroll()
 33 | 
 34 |   //Navigate to the next project once scrolled to the bottom (only on desktop screen sizes)
 35 |   /*
 36 |   const router = useRouter()
 37 |   const screen = useWindowSize()
 38 | 
 39 |   function handleLinkNavigation(url: string) {
 40 |     router.push(url)
 41 |     const body = document.querySelector('body')
 42 |     body?.classList.add('no-scroll')
 43 |     setTimeout(() => {
 44 |       body?.classList.remove('no-scroll')
 45 |     }, 500)
 46 |   }
 47 | 
 48 |   useMotionValueEvent(pageScrollProgress, 'change', (latest) => {
 49 |     latest >= 0.999 &&
 50 |       screen?.width &&
 51 |       screen.width >= 768 &&
 52 |       handleLinkNavigation(url)
 53 |   })
 54 |   */
 55 | 
 56 |   // Prefetch the next project (only on desktop screen sizes)
 57 |   const router = useRouter()
 58 |   const screen = useWindowSize()
 59 | 
 60 |   function handlePrefetch(url: string) {
 61 |     router.prefetch(url)
 62 |   }
 63 |   const [isPrefetched, setIsPrefetched] = useState(false)
 64 |   useMotionValueEvent(scrollYProgress, 'change', (latest) => {
 65 |     if (
 66 |       latest >= 0.1 &&
 67 |       screen?.width &&
 68 |       screen.width >= 768 &&
 69 |       !isPrefetched
 70 |     ) {
 71 |       handlePrefetch(url)
 72 |       setIsPrefetched(true)
 73 |     }
 74 |   })
 75 | 
 76 |   // Subtle visual effect on scroll
 77 |   const slide = useTransform(scrollYProgress, [0, 0.6], ['0%', '-100%'])
 78 |   const slide2 = useTransform(scrollYProgress, [0, 0.6], ['200%', '-100%'])
 79 | 
 80 |   return (
 81 |     <>
 82 |       <div className="container grid grid-cols-12 mb-24">
 83 |         <div className="col-start-2 col-span-10 md:flex items-baseline justify-between">
 84 |           <div className="overflow-hidden flex-grow relative text-lg mb-2 md:mb-0 md:text-xl text-muted-foreground">
 85 |             <motion.span style={{ y: slide }} className="block">
 86 |               Next up
 87 |             </motion.span>
 88 |             <motion.span style={{ y: slide2 }} className="block absolute">
 89 |               <span className="block">Click to view</span>
 90 |             </motion.span>
 91 |           </div>
 92 |           <motion.div className="text-4xl md:text-6xl font-extrabold tracking-tight group">
 93 |             <Link ref={ref} href={url}>
 94 |               {heading}
 95 |               <ArrowRight
 96 |                 size={40}
 97 |                 strokeWidth={2.5}
 98 |                 className="text-muted-foreground md:group-hover:translate-x-1 transition-all duration-500 inline-block align-middle ml-2 md:ml-4 relative -top-[1px]"
 99 |               />
100 |             </Link>
101 |           </motion.div>
102 |         </div>
103 |       </div>
104 |       <Link
105 |         ref={ref}
106 |         href={url}
107 |         className="md:hover:opacity-80 transition-all duration-300 relative z-20 h-[50vh] md:h-[50svh] grid items-center overflow-hidden"
108 |       >
109 |         <div className="absolute inset-0 bg-black" />
110 |         <motion.div className="absolute inset-0">
111 |           <ContentfulImage
112 |             alt={image.title}
113 |             priority
114 |             fill
115 |             sizes="100vw"
116 |             placeholder="blur"
117 |             blurDataURL={image.base64}
118 |             className="object-cover -z-2 opacity-70"
119 |             src={image.url}
120 |           />
121 |         </motion.div>
122 |       </Link>
123 |     </>
124 |   )
125 | }
126 | 


--------------------------------------------------------------------------------
/components/project-card.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import ContentfulImage from '@/lib/contentful-image'
 4 | import { motion } from 'framer-motion'
 5 | import Link from 'next/link'
 6 | import { AspectRatio } from './ui/aspect-ratio'
 7 | 
 8 | export default function ProjectCard({
 9 |   title,
10 |   slug,
11 |   screenshot,
12 |   role,
13 |   className,
14 |   style,
15 | }: {
16 |   title?: string
17 |   slug?: string
18 |   screenshot?: any
19 |   role?: string
20 |   className?: any
21 |   style?: any
22 | }) {
23 |   const defaultVariants = {
24 |     hidden: { opacity: 0, y: '110%' },
25 |     visible: {
26 |       opacity: 1,
27 |       y: 0,
28 |       transition: {
29 |         duration: 0.5,
30 |         ease: [0.2, 0.65, 0.3, 0.9],
31 |       },
32 |     },
33 |   }
34 | 
35 |   return (
36 |     <motion.li
37 |       initial={{ opacity: 0 }}
38 |       whileInView={{ opacity: 1, transition: { duration: 1 } }}
39 |       viewport={{ once: true }}
40 |       key={slug}
41 |       className={`group bg-muted rounded-lg relative ${className}`}
42 |       style={{ ...style }}
43 |     >
44 |       <Link href={`/work/${slug}`} key={slug}>
45 |         <AspectRatio
46 |           className="flex flex-col justify-center items-center w-full h-full"
47 |           ratio={1 / 1}
48 |         >
49 |           <motion.div
50 |             transition={{ duration: 0.25 }}
51 |             className="w-[70%] rounded-lg relative shadow-xl group-hover:shadow-2xl group-hover:-translate-y-2 transition-all transition-250"
52 |           >
53 |             <AspectRatio ratio={4 / 3}>
54 |               <ContentfulImage
55 |                 alt={title}
56 |                 fill
57 |                 sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
58 |                 src={screenshot.url}
59 |                 blurDataURL={screenshot.base64}
60 |                 placeholder="blur"
61 |                 className="object-cover rounded-lg"
62 |               />
63 |             </AspectRatio>
64 |           </motion.div>
65 |         </AspectRatio>
66 |         <div className="text-xs p-4 grid grid-cols-12 align-baseline">
67 |           <h3 className="font-semibold col-span-6">{title}</h3>
68 |           <h4 className="col-span-6 text-muted-foreground text-right">
69 |             {role}
70 |           </h4>
71 |         </div>
72 |       </Link>
73 |     </motion.li>
74 |   )
75 | }
76 | 


--------------------------------------------------------------------------------
/components/project-list.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import React, { useState, useRef } from 'react'
  4 | import { motion, useInView } from 'framer-motion'
  5 | import AnimatedText from './animated-text'
  6 | import ProjectCard from './project-card'
  7 | 
  8 | export default function ProjectList({
  9 |   heading,
 10 |   subheading,
 11 |   items,
 12 | }: {
 13 |   heading: string
 14 |   subheading?: string
 15 |   items: any
 16 | }) {
 17 |   //const defaultItems = items.filter((item: any) => item.category === 'Client')
 18 |   const defaultItems = items
 19 |   const [projects, setProjects] = useState(defaultItems)
 20 |   const [selected, setSelected] = useState('All')
 21 | 
 22 |   const filter = (value: any) => {
 23 |     setSelected(value)
 24 |     setProjects(items.filter((project: any) => project.category === value))
 25 | 
 26 |     value != 'All'
 27 |       ? setProjects(items.filter((project: any) => project.category === value))
 28 |       : setProjects(items)
 29 |   }
 30 | 
 31 |   const categories = [
 32 |     ...new Set(
 33 |       items
 34 |         .map((item: any) => {
 35 |           return item.category
 36 |         })
 37 |         .sort()
 38 |     ),
 39 |   ]
 40 | 
 41 |   const defaultVariants = {
 42 |     hidden: { opacity: 0, y: '110%' },
 43 |     visible: {
 44 |       opacity: 1,
 45 |       y: 0,
 46 |       transition: {
 47 |         duration: 0.5,
 48 |         ease: [0.2, 0.65, 0.3, 0.9],
 49 |       },
 50 |     },
 51 |   }
 52 | 
 53 |   const ref = useRef(null)
 54 |   const isInView = useInView(ref, { amount: 0.5, once: true })
 55 | 
 56 |   return (
 57 |     <section>
 58 |       <div className="grid grid-cols-12 items-baseline">
 59 |         <div className="col-span-12 text-4xl md:text-6xl font-extrabold tracking-tight relative">
 60 |           <div className="relative inline-block">
 61 |             <AnimatedText el="h1" text={heading} />
 62 |             <motion.span
 63 |               initial={{ opacity: 0 }}
 64 |               whileInView={{
 65 |                 opacity: 1,
 66 |                 transition: { duration: 1, delay: 0.75 },
 67 |               }}
 68 |               viewport={{ once: true }}
 69 |               className="absolute top-0 -right-2 text-sm font-normal text-muted-foreground"
 70 |             >
 71 |               {projects.length}
 72 |             </motion.span>
 73 |           </div>
 74 |         </div>
 75 |         {subheading && (
 76 |           <div className="mb-10 col-span-12 text-lg md:text-xl text-muted-foreground">
 77 |             <AnimatedText word el="h2" text={subheading} />
 78 |           </div>
 79 |         )}
 80 |         <motion.div
 81 |           ref={ref}
 82 |           initial="hidden"
 83 |           animate={isInView ? 'visible' : 'hidden'}
 84 |           transition={{ staggerChildren: 0.25 }}
 85 |           className="col-span-12 flex gap-8 mb-6 overflow-hidden"
 86 |         >
 87 |           <motion.button
 88 |             className={`text-muted-foreground${
 89 |               selected === 'All' ? 'text-foreground underline' : ''
 90 |             }`}
 91 |             onClick={() => filter('All')}
 92 |             variants={defaultVariants}
 93 |             aria-label="Show everything"
 94 |           >
 95 |             Everything
 96 |           </motion.button>
 97 |           {categories.map((category: any, index) => (
 98 |             <motion.button
 99 |               className={`text-muted-foreground ${
100 |                 selected === category ? 'text-foreground underline' : ''
101 |               }`}
102 |               onClick={() => filter(category)}
103 |               key={index}
104 |               variants={defaultVariants}
105 |               aria-label={`Show ${category} projects`}
106 |             >
107 |               {category}
108 |             </motion.button>
109 |           ))}
110 |         </motion.div>
111 |       </div>
112 |       <ul className="md:grid grid-cols-12 gap-4">
113 |         {projects.map((project: any) => (
114 |           <ProjectCard
115 |             className="mb-8 md:mb-0 md:col-span-6 lg:col-span-4"
116 |             key={project.slug}
117 |             {...project}
118 |           />
119 |         ))}
120 |       </ul>
121 |     </section>
122 |   )
123 | }
124 | 


--------------------------------------------------------------------------------
/components/scroll-behavior.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import { useEffect } from 'react'
 3 | 
 4 | //Hacky fix for always scrolling to top even on page refresh or back button
 5 | export default function ScrollBehavior() {
 6 |   useEffect(() => {
 7 |     window.history.scrollRestoration = 'manual'
 8 |     window.scrollTo(0, 0)
 9 |   }, [])
10 |   return null
11 | }
12 | 


--------------------------------------------------------------------------------
/components/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | 
3 | import { ThemeProvider as NextThemesProvider } from 'next-themes'
4 | import { type ThemeProviderProps } from 'next-themes/dist/types'
5 | 
6 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
7 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>
8 | }
9 | 


--------------------------------------------------------------------------------
/components/ui/aspect-ratio.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | 
3 | import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
4 | 
5 | const AspectRatio = AspectRatioPrimitive.Root
6 | 
7 | export { AspectRatio }
8 | 


--------------------------------------------------------------------------------
/components/work-promo.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import { useState, useRef } from 'react'
  4 | import { motion, useScroll, useTransform, MotionValue } from 'framer-motion'
  5 | import Link from 'next/link'
  6 | import ContentfulImage from '@/lib/contentful-image'
  7 | import { AspectRatio } from './ui/aspect-ratio'
  8 | import { ArrowRight } from 'lucide-react'
  9 | 
 10 | export default function WorkPromo({ projects }: { projects?: any }) {
 11 |   // Animate the columns on scroll
 12 |   const ref = useRef(null)
 13 |   const { scrollYProgress } = useScroll({
 14 |     target: ref,
 15 |     offset: ['start end', 'end start'],
 16 |   })
 17 | 
 18 |   function useParallax(value: MotionValue<number>, distance: number) {
 19 |     return useTransform(value, [0, 1], [-distance, distance])
 20 |   }
 21 | 
 22 |   const y = useParallax(scrollYProgress, 125)
 23 |   const y2 = useParallax(scrollYProgress, 350)
 24 |   const y3 = useParallax(scrollYProgress, 250)
 25 | 
 26 |   // Control grid animation on button hover
 27 |   const [mutedGrid, setMutedGrid] = useState(false)
 28 |   const gridVariants = {
 29 |     muted: {
 30 |       opacity: 0.75,
 31 |       transition: {
 32 |         duration: 0.5,
 33 |       },
 34 |     },
 35 |     regular: {
 36 |       opacity: 1,
 37 |       transition: {
 38 |         duration: 0.5,
 39 |       },
 40 |     },
 41 |   }
 42 | 
 43 |   return (
 44 |     <motion.section className="px-6 relative bg-muted">
 45 |       <motion.div
 46 |         ref={ref}
 47 |         variants={gridVariants}
 48 |         animate={mutedGrid ? 'muted' : 'regular'}
 49 |         className="grid grid-cols-12 gap-4 overflow-hidden h-[75svh] -mb-[100px]"
 50 |       >
 51 |         <motion.div
 52 |           className="relative -top-[0%] flex flex-col gap-4 col-span-6 md:col-span-4"
 53 |           style={{ y: y }}
 54 |         >
 55 |           {projects.slice(0, 5).map((project: any) => (
 56 |             <div key={project.slug} className="relative w-full">
 57 |               <AspectRatio ratio={4 / 3}>
 58 |                 <ContentfulImage
 59 |                   src={project.screenshot.url}
 60 |                   className="object-cover rounded-lg"
 61 |                   alt={project.title}
 62 |                   fill
 63 |                   placeholder="blur"
 64 |                   blurDataURL={project.screenshot.base64}
 65 |                   sizes="600px"
 66 |                 />
 67 |               </AspectRatio>
 68 |             </div>
 69 |           ))}
 70 |         </motion.div>
 71 |         <motion.div
 72 |           style={{ y: y2 }}
 73 |           className="hidden relative -top-[10%] md:flex flex-col gap-4 col-span-6 md:col-span-4"
 74 |         >
 75 |           {projects.slice(5, 10).map((project: any) => (
 76 |             <div key={project.slug} className="relative w-full">
 77 |               <AspectRatio ratio={4 / 3}>
 78 |                 <ContentfulImage
 79 |                   src={project.screenshot.url}
 80 |                   className="object-cover rounded-lg"
 81 |                   alt={project.title}
 82 |                   fill
 83 |                   placeholder="blur"
 84 |                   blurDataURL={project.screenshot.base64}
 85 |                   sizes="600px"
 86 |                 />
 87 |               </AspectRatio>
 88 |             </div>
 89 |           ))}
 90 |         </motion.div>
 91 |         <motion.div
 92 |           className="relative md:-top-[15%] flex flex-col gap-4 col-span-6 md:col-span-4"
 93 |           style={{ y: y3 }}
 94 |         >
 95 |           {projects.slice(10, 15).map((project: any) => (
 96 |             <div key={project.slug} className="relative w-full">
 97 |               <AspectRatio ratio={4 / 3}>
 98 |                 <ContentfulImage
 99 |                   src={project.screenshot.url}
100 |                   className="object-cover rounded-lg"
101 |                   alt={project.title}
102 |                   fill
103 |                   placeholder="blur"
104 |                   blurDataURL={project.screenshot.base64}
105 |                   sizes="600px"
106 |                 />
107 |               </AspectRatio>
108 |             </div>
109 |           ))}
110 |         </motion.div>
111 |       </motion.div>
112 |       <motion.div className="z-20 sticky bottom-0 left-0 right-0 col-span-12 grid justify-center items-center">
113 |         <motion.div
114 |           onHoverStart={() => setMutedGrid(true)}
115 |           onHoverEnd={() => setMutedGrid(false)}
116 |           whileHover={{ scale: 1.03, transition: { duration: 0.5 } }}
117 |           className="group"
118 |         >
119 |           <Link
120 |             href="/work"
121 |             className="shadow-xl backdrop-blur-lg bg-foreground/80 group-hover:bg-foreground/100 transition-all duration-500 text-background inline-block text-lg md:text-xl my-6 py-3 px-6 rounded-full"
122 |           >
123 |             Explore work
124 |             <ArrowRight
125 |               size={20}
126 |               className="group-hover:translate-x-1 transition-all duration-500 inline-block align-middle ml-2 relative -top-[1px]"
127 |             />
128 |           </Link>
129 |         </motion.div>
130 |       </motion.div>
131 |     </motion.section>
132 |   )
133 | }
134 | 


--------------------------------------------------------------------------------
/lib/api.ts:
--------------------------------------------------------------------------------
  1 | const PROJECT_GRAPHQL_FIELDS = `
  2 |   slug
  3 |   title
  4 |   heading
  5 |   description
  6 |   cover {
  7 |     url
  8 |     title
  9 |     description
 10 |   }
 11 |   screenshot {
 12 |     url
 13 |     title
 14 |     description
 15 |   }
 16 |   date
 17 |   content {
 18 |     json
 19 |   }
 20 |   role
 21 |   client
 22 |   category
 23 |   year
 24 |   technology
 25 |   url
 26 |   imagesCollection {
 27 |     items {
 28 |       url
 29 |       title
 30 |       description
 31 |     }
 32 |   }
 33 | `
 34 | 
 35 | const PAGE_GRAPHQL_FIELDS = `
 36 |   slug
 37 |   title
 38 |   description
 39 |   heading
 40 |   subheading
 41 |   cover {
 42 |     url
 43 |     title
 44 |     description
 45 |   }
 46 |   videosCollection {
 47 |     items {
 48 |       url
 49 |       title
 50 |       description
 51 |     }
 52 |   }
 53 |   imagesCollection {
 54 |     items {
 55 |       url
 56 |       title
 57 |       description
 58 |     }
 59 |   }
 60 |   content {
 61 |     json
 62 |     links {
 63 |       assets {
 64 |         block {
 65 |           sys {
 66 |             id
 67 |           }
 68 |           title
 69 |           url
 70 |           description
 71 |         }
 72 |       }
 73 |     }
 74 |   }
 75 | `
 76 | 
 77 | async function fetchGraphQL(query: string, preview = false): Promise<any> {
 78 |   return fetch(
 79 |     `https://graphql.contentful.com/content/v1/spaces/${process.env.CONTENTFUL_SPACE_ID}/environments/${process.env.CONTENTFUL_ENVIRONMENT}`,
 80 |     {
 81 |       method: 'POST',
 82 |       headers: {
 83 |         'Content-Type': 'application/json',
 84 |         Authorization: `Bearer ${
 85 |           preview
 86 |             ? process.env.CONTENTFUL_PREVIEW_ACCESS_TOKEN
 87 |             : process.env.CONTENTFUL_ACCESS_TOKEN
 88 |         }`,
 89 |       },
 90 |       body: JSON.stringify({ query }),
 91 |       next: { tags: ['contentfulData'] },
 92 |     }
 93 |   ).then((response) => response.json())
 94 | }
 95 | 
 96 | //Projects
 97 | function extractProject(fetchResponse: any): any {
 98 |   return fetchResponse?.data?.projectCollection?.items?.[0]
 99 | }
100 | 
101 | function extractProjectEntries(fetchResponse: any): any[] {
102 |   return fetchResponse?.data?.projectCollection?.items
103 | }
104 | 
105 | export async function getPreviewProjectBySlug(
106 |   slug: string | null
107 | ): Promise<any> {
108 |   const entry = await fetchGraphQL(
109 |     `query {
110 |         projectCollection(where: { slug: "${slug}" }, preview: true, limit: 1) {
111 |           items {
112 |             ${PROJECT_GRAPHQL_FIELDS}
113 |           }
114 |         }
115 |       }`,
116 |     true
117 |   )
118 |   return extractProject(entry)
119 | }
120 | 
121 | export async function getAllProjects(isDraftMode: boolean): Promise<any[]> {
122 |   const entries = await fetchGraphQL(
123 |     `query {
124 |         projectCollection(where: { slug_exists: true }, order: date_DESC, preview: ${
125 |           isDraftMode ? 'true' : 'false'
126 |         }) {
127 |           items {
128 |             ${PROJECT_GRAPHQL_FIELDS}
129 |           }
130 |         }
131 |       }`,
132 |     isDraftMode
133 |   )
134 |   return extractProjectEntries(entries)
135 | }
136 | 
137 | export async function getProjectAndNextProject(
138 |   slug: string,
139 |   preview: boolean
140 | ): Promise<any> {
141 |   const project = await fetchGraphQL(
142 |     `query {
143 |         projectCollection(where: { slug: "${slug}" }, preview: ${
144 |           preview ? 'true' : 'false'
145 |         }, limit: 1) {
146 |           items {
147 |             ${PROJECT_GRAPHQL_FIELDS}
148 |           }
149 |         }
150 |       }`,
151 |     preview
152 |   )
153 | 
154 |   const allProjects = await fetchGraphQL(
155 |     `query {
156 |         projectCollection(where: { slug_exists: true }, order: date_DESC, preview: ${
157 |           preview ? 'true' : 'false'
158 |         }) {
159 |           items {
160 |             ${PROJECT_GRAPHQL_FIELDS}
161 |           }
162 |         }
163 |       }`,
164 |     preview
165 |   )
166 | 
167 |   const allProjectEntries = extractProjectEntries(allProjects)
168 |   const currentProjectDate = new Date(extractProject(project).date)
169 |   const nextProject =
170 |     allProjectEntries
171 |       .filter((project) => new Date(project.date) < currentProjectDate)
172 |       .sort((a, b) => +new Date(b.date) - +new Date(a.date))[0] || null
173 |   return {
174 |     project: extractProject(project),
175 |     nextProject,
176 |   }
177 | }
178 | 
179 | // Get Page by Slug
180 | function extractPage(fetchResponse: any): any {
181 |   return fetchResponse?.data?.pageCollection?.items?.[0]
182 | }
183 | 
184 | export async function getPreviewPageBySlug(slug: string | null): Promise<any> {
185 |   const entry = await fetchGraphQL(
186 |     `query {
187 |       pageCollection(where: { slug: "${slug}" }, preview: true, limit: 1) {
188 |           items {
189 |             ${PAGE_GRAPHQL_FIELDS}
190 |           }
191 |         }
192 |       }`,
193 |     true
194 |   )
195 |   return extractPage(entry)
196 | }
197 | 
198 | export async function getPageBySlug(
199 |   slug: string,
200 |   preview: boolean
201 | ): Promise<any> {
202 |   const entry = await fetchGraphQL(
203 |     `query {
204 |         pageCollection(where: { slug: "${slug}" }, preview: ${
205 |           preview ? 'true' : 'false'
206 |         }, limit: 1) {
207 |           items {
208 |             ${PAGE_GRAPHQL_FIELDS}
209 |           }
210 |         }
211 |       }`,
212 |     preview
213 |   )
214 |   return extractPage(entry)
215 | }
216 | 


--------------------------------------------------------------------------------
/lib/contentful-image.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import Image from 'next/image'
 4 | 
 5 | interface ContentfulImageProps {
 6 |   src: string
 7 |   width?: number
 8 |   quality?: number
 9 |   [key: string]: any // For other props that might be passed
10 | }
11 | 
12 | const contentfulLoader = ({ src, width, quality }: ContentfulImageProps) => {
13 |   return `${src}?w=${width}&q=${quality || 75}`
14 | }
15 | 
16 | export default function ContentfulImage(props: ContentfulImageProps) {
17 |   return <Image alt={props.alt} loader={contentfulLoader} {...props} />
18 | }
19 | 


--------------------------------------------------------------------------------
/lib/markdown.tsx:
--------------------------------------------------------------------------------
  1 | import { documentToReactComponents } from '@contentful/rich-text-react-renderer'
  2 | import { BLOCKS, MARKS, INLINES } from '@contentful/rich-text-types'
  3 | import ContentfulImage from './contentful-image'
  4 | import { FileText } from 'lucide-react'
  5 | import { ArrowUpRight } from 'lucide-react'
  6 | 
  7 | interface Asset {
  8 |   sys: {
  9 |     id: string
 10 |   }
 11 |   url: string
 12 |   description: string
 13 | }
 14 | 
 15 | interface AssetLink {
 16 |   block: Asset[]
 17 | }
 18 | 
 19 | interface Content {
 20 |   json: any
 21 |   links: {
 22 |     assets: AssetLink
 23 |   }
 24 | }
 25 | 
 26 | function RichTextAsset({
 27 |   id,
 28 |   assets,
 29 | }: {
 30 |   id: string
 31 |   assets: Asset[] | undefined
 32 | }) {
 33 |   const asset = assets?.find((asset) => asset.sys.id === id)
 34 | 
 35 |   if (asset?.url) {
 36 |     if (asset.url.endsWith('.pdf')) {
 37 |       // PDF Asset
 38 |       return (
 39 |         <a
 40 |           target="_blank"
 41 |           href={asset.url}
 42 |           rel="noopener noreferrer"
 43 |           className=" bg-muted py-10 px-5 rounded-xl border  inline-block hover:opacity-80 transition-opacity transition-duration-300 relative"
 44 |         >
 45 |           <div className="flex justify-center items-center mb-4">
 46 |             <FileText
 47 |               size={40}
 48 |               className="block align-middle relative -top-[1px]"
 49 |             />
 50 |           </div>
 51 |           <span className="font-semibold">{asset.description}</span>
 52 |           <div className="absolute top-0 right-0 mt-2 mr-2 text-muted-foreground">
 53 |             <ArrowUpRight size={16} />
 54 |           </div>
 55 |         </a>
 56 |       )
 57 |     } else {
 58 |       // Regular Image
 59 |       const isLeft = asset.description?.includes('left')
 60 |       const isRight = asset.description?.includes('right')
 61 |       const isFull = asset.description?.includes('full')
 62 |       const divClass = `rounded-xl mb-4 mx-auto clear-right ${
 63 |         isLeft
 64 |           ? 'w-[calc(50%-.5rem)] float-left'
 65 |           : isRight
 66 |             ? 'w-[calc(50%-.5rem)] float-right clear-right'
 67 |             : isFull
 68 |               ? ''
 69 |               : 'w-full'
 70 |       }`
 71 | 
 72 |       return (
 73 |         <div className={divClass}>
 74 |           <ContentfulImage
 75 |             src={asset.url}
 76 |             alt={asset.description}
 77 |             width={2000}
 78 |             height={1000}
 79 |             className="h-auto w-full rounded-xl"
 80 |           />
 81 |         </div>
 82 |       )
 83 |     }
 84 |   }
 85 | 
 86 |   return null
 87 | }
 88 | 
 89 | export function Markdown({ content }: { content: Content }) {
 90 |   return documentToReactComponents(content.json, {
 91 |     renderText: (text) => {
 92 |       return text.split('\n').reduce((children: any, textSegment, index) => {
 93 |         return [...children, index > 0 && <br key={index} />, textSegment]
 94 |       }, [])
 95 |     },
 96 |     renderMark: {
 97 |       [MARKS.BOLD]: (text) => <strong>{text}</strong>,
 98 |       [MARKS.CODE]: (text) => (
 99 |         <code className="bg-gray-200 rounded p-2">{text}</code>
100 |       ),
101 |       [MARKS.ITALIC]: (text) => <em className="italic">{text}</em>,
102 |       [MARKS.UNDERLINE]: (text) => <span className="underline">{text}</span>,
103 |     },
104 | 
105 |     renderNode: {
106 |       [BLOCKS.EMBEDDED_ASSET]: (node: any) => (
107 |         <RichTextAsset
108 |           id={node.data.target.sys.id}
109 |           assets={content.links.assets.block}
110 |         />
111 |       ),
112 |       [BLOCKS.PARAGRAPH]: (_, children: any) => (
113 |         <p className="mb-4 whitespace-pre-wrap">{children}</p>
114 |       ),
115 |       [BLOCKS.HEADING_1]: (_, children: any) => (
116 |         <h3 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tighter leading-tight md:leading-none mb-6">
117 |           {children}
118 |         </h3>
119 |       ),
120 |       [BLOCKS.HEADING_2]: (_, children: any) => (
121 |         <h3 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tighter leading-tight md:leading-none mb-6">
122 |           {children}
123 |         </h3>
124 |       ),
125 |       [BLOCKS.HEADING_3]: (_, children: any) => (
126 |         <h3 className="text-2xl md:text-3xl lg:text-4xl font-bold tracking-tighter leading-tight md:leading-none mb-6">
127 |           {children}
128 |         </h3>
129 |       ),
130 |       [BLOCKS.HEADING_4]: (_, children: any) => (
131 |         <h4 className="text-xl md:text-2xl lg:text-3xl font-bold tracking-tighter leading-tight md:leading-none mb-6">
132 |           {children}
133 |         </h4>
134 |       ),
135 |       [BLOCKS.HEADING_5]: (_, children: any) => (
136 |         <h5 className="text-lg md:text-xl lg:text-2xl font-bold tracking-tighter leading-tight md:leading-none mb-6">
137 |           {children}
138 |         </h5>
139 |       ),
140 |       [BLOCKS.HEADING_6]: (_, children: any) => (
141 |         <h6 className="text-base md:text-lg lg:text-xl font-bold tracking-tighter leading-tight md:leading-none mb-6">
142 |           {children}
143 |         </h6>
144 |       ),
145 |       [BLOCKS.UL_LIST]: (_, children: any) => (
146 |         <ul className="list-disc ml-4 mb-4">{children}</ul>
147 |       ),
148 |       [BLOCKS.OL_LIST]: (_, children: any) => (
149 |         <ol className="list-decimal ml-4 mb-4">{children}</ol>
150 |       ),
151 |       [BLOCKS.LIST_ITEM]: (_, children: any) => (
152 |         <li className="mb-2">{children}</li>
153 |       ),
154 |       [BLOCKS.QUOTE]: (_, children: any) => (
155 |         <blockquote className="border-l-4 border-gray-300 pl-4 mb-4">
156 |           {children}
157 |         </blockquote>
158 |       ),
159 |       [BLOCKS.HR]: (_) => <div className="block h-20" />,
160 |       [INLINES.HYPERLINK]: (node: any, children: any) => (
161 |         <a
162 |           href={node.data.uri}
163 |           target="_blank"
164 |           rel="noopener noreferrer"
165 |           className="underline hover:opacity-70 transition-opacity"
166 |         >
167 |           {children}
168 |         </a>
169 |       ),
170 |     },
171 |   })
172 | }
173 | 


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


--------------------------------------------------------------------------------
/next-sitemap.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next-sitemap').IConfig} */
 2 | 
 3 | const stagePolicies = [
 4 |   {
 5 |     userAgent: '*',
 6 |     disallow: '/',
 7 |   },
 8 | ]
 9 | 
10 | const prodPolicies = [
11 |   {
12 |     userAgent: '*',
13 |     allow: '/',
14 |   },
15 | ]
16 | 
17 | module.exports = {
18 |   siteUrl: process.env.SITE_URL || 'https://www.ryanwiemer.com',
19 |   generateIndexSitemap: false,
20 |   generateRobotsTxt: true,
21 |   robotsTxtOptions: {
22 |     policies:
23 |       process.env.CONTENTFUL_ENVIRONMENT === 'stage' ||
24 |       process.env.CONTENTFUL_ENVIRONMENT === 'dev'
25 |         ? stagePolicies
26 |         : prodPolicies,
27 |   },
28 | }
29 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | 
 3 | import withPlaiceholder from '@plaiceholder/next'
 4 | 
 5 | const nextConfig = {
 6 |   images: {
 7 |     loader: 'custom',
 8 |     formats: ['image/avif', 'image/webp'],
 9 |   },
10 | }
11 | 
12 | export default withPlaiceholder(nextConfig)
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "rw",
 3 |   "description": "Ryan Wiemer's online portfolio",
 4 |   "license": "UNLICENSED",
 5 |   "version": "3.0.4",
 6 |   "author": "Ryan Wiemer <ryan@ryanwiemer.com>",
 7 |   "keywords": [
 8 |     "rw"
 9 |   ],
10 |   "repository": "https://github.com/ryanwiemer/rw",
11 |   "homepage": "https://www.ryanwiemer.com/",
12 |   "scripts": {
13 |     "dev": "next dev",
14 |     "debug": "NODE_OPTIONS='--inspect' next dev",
15 |     "build": "next build",
16 |     "postbuild": "next-sitemap",
17 |     "start": "next start",
18 |     "lint": "next lint ."
19 |   },
20 |   "dependencies": {
21 |     "@contentful/rich-text-react-renderer": "^15.22.1",
22 |     "@contentful/rich-text-types": "^16.6.1",
23 |     "@plaiceholder/next": "^3.0.0",
24 |     "@radix-ui/react-aspect-ratio": "^1.1.0",
25 |     "@tailwindcss/typography": "0.5.13",
26 |     "@types/node": "^20.14.10",
27 |     "@types/react": "^18.3.3",
28 |     "@types/react-dom": "^18.3.0",
29 |     "@uidotdev/usehooks": "^2.4.1",
30 |     "@vercel/analytics": "^1.3.1",
31 |     "@vercel/speed-insights": "^1.0.12",
32 |     "autoprefixer": "10.4.19",
33 |     "class-variance-authority": "^0.7.0",
34 |     "clsx": "^2.1.1",
35 |     "date-fns": "3.6.0",
36 |     "framer-motion": "^11.2.13",
37 |     "lucide-react": "^0.401.0",
38 |     "next": "14.2.4",
39 |     "next-sitemap": "^4.2.3",
40 |     "next-themes": "^0.3.0",
41 |     "plaiceholder": "^3.0.0",
42 |     "postcss": "8.4.39",
43 |     "react": "^18.3.1",
44 |     "react-dom": "^18.3.1",
45 |     "sharp": "0.32.6",
46 |     "tailwind-gradient-mask-image": "^1.2.0",
47 |     "tailwind-merge": "^2.4.0",
48 |     "tailwindcss": "^3.4.4",
49 |     "tailwindcss-animate": "^1.0.7",
50 |     "tailwindcss-inner-border": "^0.2.0",
51 |     "typescript": "^5.5.3"
52 |   },
53 |   "devDependencies": {
54 |     "@typescript-eslint/eslint-plugin": "^7.15.0",
55 |     "eslint": "^9.6.0",
56 |     "eslint-config-next": "^14.2.4",
57 |     "eslint-config-prettier": "^9.1.0",
58 |     "prettier": "^3.3.2"
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import typography from '@tailwindcss/typography'
 2 | 
 3 | /** @type {import('tailwindcss').Config} */
 4 | module.exports = {
 5 |   future: {
 6 |     hoverOnlyWhenSupported: true,
 7 |   },
 8 |   darkMode: ['class'],
 9 |   content: [
10 |     './pages/**/*.{ts,tsx}',
11 |     './components/**/*.{ts,tsx}',
12 |     './app/**/*.{ts,tsx}',
13 |     './src/**/*.{ts,tsx}',
14 |     './lib/**/*.{ts,tsx}',
15 |   ],
16 |   theme: {
17 |     screens: {
18 |       sm: '480px',
19 |       md: '768px',
20 |       lg: '976px',
21 |       xl: '1440px',
22 |     },
23 |     container: {
24 |       center: true,
25 |       padding: '1.4rem',
26 |       screens: {
27 |         '2xl': '1400px',
28 |       },
29 |     },
30 |     extend: {
31 |       fontFamily: {
32 |         sans: ['var(--font-inter)'],
33 |       },
34 |       colors: {
35 |         border: 'hsl(var(--border))',
36 |         input: 'hsl(var(--input))',
37 |         ring: 'hsl(var(--ring))',
38 |         background: 'hsl(var(--background))',
39 |         foreground: 'hsl(var(--foreground))',
40 |         primary: {
41 |           DEFAULT: 'hsl(var(--primary))',
42 |           foreground: 'hsl(var(--primary-foreground))',
43 |         },
44 |         secondary: {
45 |           DEFAULT: 'hsl(var(--secondary))',
46 |           foreground: 'hsl(var(--secondary-foreground))',
47 |         },
48 |         destructive: {
49 |           DEFAULT: 'hsl(var(--destructive))',
50 |           foreground: 'hsl(var(--destructive-foreground))',
51 |         },
52 |         muted: {
53 |           DEFAULT: 'hsl(var(--muted))',
54 |           foreground: 'hsl(var(--muted-foreground))',
55 |         },
56 |         accent: {
57 |           DEFAULT: 'hsl(var(--accent))',
58 |           foreground: 'hsl(var(--accent-foreground))',
59 |         },
60 |         popover: {
61 |           DEFAULT: 'hsl(var(--popover))',
62 |           foreground: 'hsl(var(--popover-foreground))',
63 |         },
64 |         card: {
65 |           DEFAULT: 'hsl(var(--card))',
66 |           foreground: 'hsl(var(--card-foreground))',
67 |         },
68 |       },
69 |       borderRadius: {
70 |         lg: 'var(--radius)',
71 |         md: 'calc(var(--radius) - 2px)',
72 |         sm: 'calc(var(--radius) - 4px)',
73 |       },
74 |       keyframes: {
75 |         'accordion-down': {
76 |           from: { height: 0 },
77 |           to: { height: 'var(--radix-accordion-content-height)' },
78 |         },
79 |         'accordion-up': {
80 |           from: { height: 'var(--radix-accordion-content-height)' },
81 |           to: { height: 0 },
82 |         },
83 |       },
84 |       animation: {
85 |         'accordion-down': 'accordion-down 0.2s ease-out',
86 |         'accordion-up': 'accordion-up 0.2s ease-out',
87 |       },
88 |     },
89 |   },
90 |   plugins: [
91 |     typography,
92 |     require('tailwind-gradient-mask-image'),
93 |     require('tailwindcss-animate'),
94 |     require('tailwindcss-inner-border'),
95 |   ],
96 | }
97 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2015",
 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": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true,
17 |     "plugins": [
18 |       {
19 |         "name": "next"
20 |       }
21 |     ],
22 |     "paths": {
23 |       "@/*": ["./*"]
24 |     }
25 |   },
26 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 |   "exclude": ["node_modules"]
28 | }
29 | 


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