jahirfiquitiva / jahir.dev

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

jahir.dev

Stack

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

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

jahir.dev's Issues

Blog post link broken

Requirements

• I have verified there are no duplicate active or recent bugs, questions, or requests

URL

https://jahir.dev/blog/whats-in-my-raycast

Operating System

Android

Browser

Chrome

Browser Version

100+

What happened?

Blog post link broken

Reproduction Steps

Open this link whats-in-my-raycast in Android device chrome browser

Expected behavior

No response

Screenshots or videos

No response

Code and/or Logs

No response

Additional context or info

No response

Improve performance for mobile devices

Currently, performance for mobile devices go as low as ~82 ... would be great to improve the score to be green at least.

Before	Current

Ops! JSONViewer link has a typo!

Requirements

• I have verified there are no duplicate active or recent bugs, questions, or requests

URL

https://jahir.dev/uses

Operating System

MacOS

Browser

Chrome

Browser Version

ndr

What happened?

Hola! first of all, I wanted to congratulate you. you have done a superb job, I think it is one of the most beautiful I have seen lately.

I simply wanted to point out this typo, the link refers to the previous line.

Bye! :)

Reproduction Steps

JSON Viewer browser extension link on https://jahir.dev/uses page

Expected behavior

No response

Screenshots or videos

No response

Code and/or Logs

No response

Additional context or info

No response

Layout shifts when hovering projects cards

Requirements

• I have verified there are no duplicate active or recent bugs, questions, or requests

URL

https://jahir.dev/projects

Operating System

MacOS

Browser

Firefox

Browser Version

103.0

What happened?

When hovering projects cards, the layout shifts a bit

Reproduction Steps

Go to the given URL and move the mouse over the different cards.

Expected behavior

Layout should not move

Screenshots or videos

Shot.2022-07-28.at.12.43.48.mp4

Code and/or Logs

No response

Additional context or info

I think this issue is related to the Masonry component as it also happens with the dashboard page cards.

Broken link: "Edit on GItHub"

Requirements

• I have verified there are no duplicate active or recent bugs, questions, or requests

URL

https://jahir.dev/blog/a-fresh-start

Operating System

MacOS

Browser

Chrome

Browser Version

120.0.6099.129

What happened?

The "Edit on GitHub" link is broken. It should point to https://github.com/jahirfiquitiva/jahir.dev/edit/main/content/${slug}.mdx instead.

https://github.com/jahirfiquitiva/jahir.dev/blob/d9a88d5686cff3eb0d541238f6a19db030670b62/src/app/blog/%5Bslug%5D/layout.tsx#L69C60-L69C60

Reproduction Steps

Go to any posts on your blog. Click the "Edit on GitHub" link button.

Expected behavior

Redirect to the correct mdx edit page.

Screenshots or videos

No response

Code and/or Logs

No response

Additional context or info

No response

Reduce first load JS size

It's currently all red when running next build 😱

After Deployment on vercel, Styles are mess!!!!!

Requirements

• I have verified there are no duplicate active or recent bugs, questions, or requests

URL

https://github.com/jahirfiquitiva/jahir.dev

Operating System

Arch

Browser

Chrome

Browser Version

latest

What happened?

On localhost, It is Looking fine but after deployment in vercel, styles are different and app is broken. I don't know how to solve it.

Reproduction Steps

styles changed after deployment

Expected behavior

No response

Screenshots or videos

Code and/or Logs

No response

Additional context or info

No response

Theme selector has incorrect colors on Windows

Requirements

• I have verified there are no duplicate active or recent bugs, questions, or requests

URL

https://jahir.dev/blog

Operating System

Windows

Browser

Chrome

Browser Version

123.0.631

What happened?

Background of select is white, making the text hard to read.

Reproduction Steps

Expected behavior

No response

Screenshots or videos

video.mp4

Code and/or Logs

No response

Additional context or info

No response

Improve page speed performance and Vercel deployment build times

Requirements

• I have verified there are no duplicate active or recent bugs, questions, or requests

URL

https://jahir.dev

What happened?

1. Currently PageSpeed Insights Core Web Vitals Assessment fails, and the performance is ~86 on mobile

Diagnostics mention:

• First Contentful Paint: 2.0 s
• Largest Contentful Paint 3.2 s
• Total Blocking Time: 240 ms
• Speed Index: 3.4 s
• Minimize main-thread work (2.4 s)
• Reduce JavaScript execution time (1.7 s)
• Largest Contentful Paint element (3,230 ms)
• Reduce unused CSS (Potential savings of 10 KiB)

2. Deploying on Vercel currently takes about 2 mins and 30 secs. More context: https://x.com/jahirfiquitiva/status/1754983387641622716?s=20

Reproduction Steps

Deploy the project

Expected behavior

1. Core Web Vitals Assessment should pass with everything in green. Performance on mobile should be at least 90.

2. Deployment time should take less than 1 min and 30 secs, which is almost what it takes to run git pull ... && yarn && yarn build locally.

---

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Make animations smoother

Current	Expected

Fix custom fonts not being used in Android devices

Android	iOS