jahir.dev

Stack

• Framework: Next.js
• Styling: Stitches (CSS-in-JS)
• Content: MDX, contentlayer and Notion API
• Database: PlanetScale
• ORM: Prisma
• Deployment: Vercel

Project Structure

.
|____content
|____public
|____src
| |____icons
| |____styles
| |____components
| | |____atoms
| | |____compounds
| | |____molecules
| | |____sections
| | |____mdx
| |____hooks
| |____providers
| |____pages
| | |____api
| | |____blog
| |____lib
| |____utils
| |____types
|____scripts
|____tailwind

• content/* - MDX blog posts and projects
• public/* - Static assets including images, fonts, audios and files
• src/icons/* - Custom SVG icon paths. Mostly based on Lucide
• src/styles/* - Some global styles. Built using tailwind classes
• src/components/atoms/* - The simplest components. Most of them are stateless
• src/components/compounds/* - Slightly more complex components. Some use or extend atoms
• src/components/molecules/* - The main blocks for the website: metatags, toolbar, footer and Layout
• src/components/sections/* - The different sections or pages of my website. (They're here to keep src/pages/ as clean as possible)
• src/components/mdx/* - Components built specifically for MDX content
• src/hooks/* - A couple hooks used throughout the app
• src/providers/* - React Contexts for different purposes such as: current theme, blog post reactions, sponsors data.
• src/pages/api/* - API routes powering /dashboard, blog post reactions and views, and a page to download github releases assets
• src/pages/blog/* - Static pre-rendered blog pages using MDX
• src/pages/projects/* - Static pre-rendered projects pages using MDX
• src/pages/* - All other static pages
• src/lib/* - Short for "library", a collection of helpful utilities or code for external services
• src/utils/* - Almost the same as lib just with code built to be used in components
• src/stitches/* - Setup for stitches themes including colors, spaces, fonts and more

Running Locally

git clone https://github.com/jahirfiquitiva/jahir.dev.git
cd jahir.dev
yarn

Create a .env file similar to .env.example.

yarn dev

Cloning / Forking

Please review the license, do not copy it directly, remove all of my personal information (resume, blog posts, images, etc.) and change the styling and colors to match your personal brand. You are free to use this code as inspiration or learning reference but this is not a template.