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

Note

Some things might be broken or not found because the yarn setup script will remove many files. Please double check the code and implementations.

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.

Additional changes

Make sure to set the IS_TEMPLATE environment variable to false. Otherwise, the colors in the website might be inverted. (See src/styles/globals.scss)

Previous versions

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