Skip to content

My personal website ☻ – Built using Next.js, TypeScript, Tailwind CSS and MDX

License

Notifications You must be signed in to change notification settings

jahirfiquitiva/jahir.dev

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

GitHub Sponsor

Website preview

Stack

Project Structure

.
|____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

Running Locally

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
    bun
    bun run 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:

    bun run dev
Note

Some things might be broken or not found because the bun run 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 bun run 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