Rajiv Singh

Added Tailwind Box Shadows - Get a curated list of box shadows - Click to copy and paste to enable box shadows on your cards seamlessly! Comes with a feature to convert vanilla CSS code to Tailwind JIT code.

iamrajiv.github.io

This is my personal website. Here I write blogs, add code snippets, code live demos, and add resources for everybody else to look and refer.

The application is built with Next.js/React/MDX

Overview

• pages/api/* - API routes for the Dashboard. Contains Twitter, Spotify, and Google Analytics APIs.

• pages/blog/* - Static pages rendered using MDX

• pages/resources - Resources page

• pages/snippets - Snippets page to see all the ready to use code snippets.

• pages/* - All other static pages.

Installation

git clone https://github.com/iamrajiv/portfolio-website.git

cd iamrajiv.github.io

yarn

yarn dev

Running locally

To run the project locally, create a .env.local file and add the required API credentials there. Reference .env.example from the source for the list of API keys required.

Built Using

• Next.js
• Tailwindcss
• MDX
• Vercel
• Firebase
• Prisma
• Supabase
• Next Auth

---

Assets

All asstes are aligned in the public folder accordingly something like this:

➜  public git:(main) ✗ tree
.
├── fonts
│   └── inter-var-latin.woff2
├── robots.txt
├── sitemap.xml
└── static
    ├── data
    │   └── blog
    │       └── 2023-05-23-higher-order-functions-in-go.mdx
    ├── favicons
    │   ├── android-chrome-192x192.webp
    │   ├── android-chrome-512x512.webp
    │   ├── apple-touch-icon.webp
    │   ├── favicon-16x16.webp
    │   ├── favicon-32x32.webp
    │   ├── favicon.ico
    │   └── site.webmanifest
    ├── images
    │   ├── blog
    │   │   └── 2023-05-23-higher-order-functions-in-go
    │   │       └── 1.svg
    │   └── talks
    │       └── 1.jpg
    └── miscellaneous
        └── avatar.jpg

---

Components

All components are aligned in the components folder accordingly something like this:

Pages

All pages are aligned in the pages folder accordingly something like this:

---

• using only https://react-icons.github.io/react-icons/ icons

MDXComponents.js file holds all the react compoenents that are used in the markdown files.

• LinkPreview componenet is used to generate the preview of the links that are added in the markdown files.(not used as of now anywhere).

• Step, StepCheck, StepLarge are components used to have nice UI for lists in the markdown files.

• The IconTextRow is a React component that takes a title, icon name, and color as props to display a row with a specified icon from the react-icons library next to a text label, styled according to the provided color class.

• Whenver you make design component like how we made IconTextRow, StepLarge etc so if you want o use these components in the markdown files then you have to add them in the MDXComponents.js file and then you can use them in the markdown files.

• run yarn format and yarn lint to format and lint the code before pushing to the repo.

• summarize.js file is used to generate the summary of files changed when we run yarn format.