• Framework: Next.js
• Styling: Tailwind CSS
• Content: MDX and velite
• Database: Neon and Drizzle ORM
• Analytics: Umami
• Deployment: Vercel

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

• config/* - Includes all the custom configuration for MDX, velite and Next.js
• content/* - MDX blog posts and the content for the 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/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/components/icons.ts - SVG icon paths. Icons come from Material Design Icons and Lucide
• 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

This application requires Node.js v18.18+.

1. Clone the project, install dependencies and run initial setup

   git clone https://github.com/jahirfiquitiva/jahir.dev.git
   cd jahir.dev
   yarn
   yarn setup # You can skip this if you're contributing to this repository. It removes all of my personal content and files

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

3. (Optional) This project uses a postgres database to store the views and reactions count.

   CREATE TABLE counters (
     slug VARCHAR(255) PRIMARY KEY NOT NULL,
     views INTEGER NOT NULL DEFAULT 0,
     likes INTEGER NOT NULL DEFAULT 0,
     loves INTEGER NOT NULL DEFAULT 0,
     awards INTEGER NOT NULL DEFAULT 0,
     bookmarks INTEGER NOT NULL DEFAULT 0
   );

4. Run the project locally:

   yarn dev

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.

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