jahir.dev

Stack

• Framework: Next.js
• Styling: Tailwind CSS
• Content: MDX and contentlayer
• Database: PlanetScale
• Analytics: Vercel Analytics
• Deployment: Vercel

Project Structure

.
|____config
|____content
|____public
|____scripts
|____src
| |____app
| |____assets
| |____components
| | |____core
| | |____icons
| | |____molecules
| | |____og
| | |____views
| |____data
| |____hooks
| |____lib
| |____providers
| |____styles
| |____types
| |____utils

• config/* - Includes all the custom configuration for contentlayer, Tailwind CSS and Next.js
• content/* - MDX blog posts and the content for the about and donate pages
• public/* - Static assets including images, fonts, audios, files, etc.
• scripts/* - Utilities to setup the project
• src/app/* - Every page and api route in the website. Uses the new App Router from Next.js 13.+
• src/assets/* - Fonts and static images used in different components
• src/components/core/* - The simplest components. Most of them are stateless
• src/components/icons/* - SVG icon paths. Icons come from Material Design Icons Lucide
• src/components/molecules/* - The main blocks for the website: toolbar, footer, main layout, back-to-top button and social links
• src/components/og/* - The code that powers dynamic open-graph images generation
• src/components/views/* - More complex components to build the different pages of my website. (They're here to keep src/app/ as clean as possible)
• src/data/* - JSON files containing data for projects and the uses page
• src/hooks/* - A couple hooks used throughout the app
• src/lib/* - Short for "library", a collection of helpful utilities or code for external services
• src/providers/* - React Contexts for storing the current theme and blog post reactions
• src/styles/* - Global styles with scss. Mostly use tailwind classes
• src/types/* - Some types definitions
• src/utils/* - More utilities functions but less complex than the ones in lib

Running Locally

This application requires Node.js v16.20+.

git clone https://github.com/jahirfiquitiva/jahir.dev.git
cd jahir.dev
yarn
yarn setup # Remove all of my personal content and files

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 content and files (resume, blog posts, images, etc.) by running yarn setup and please 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 really intended to be a template.

Previous versions

All the previous versions of this website can be found at jahirfiquitiva/prev-websites