B R.io

Overview

My Personal Website is a portfolio website designed to be simplistic and clean, while incorporating various features to enhance functionality. This website includes features such as MDX blog posts with view counts, a dark mode toggle, a gear list, an about page, and more. The website is built using a tech stack that includes Next.js, TypeScript, MDX, Contentlayer, PlanetScale, Prisma, Tailwind CSS, Radix Primitives, Radix UI Colors, and Framer Motion.

Features

• MDX blog posts with view counts: The website allows for the creation of blog posts using MDX syntax and tracks the number of views for each post.
• Dark mode toggle: Users can switch between light and dark modes to customize their viewing experience.
• Gear list: The website provides a list of gear or tools used by the website owner, allowing visitors to see the resources and tools that contribute to the website’s development.
• About page: The website includes an about page that provides information about the website owner, showcasing their skills, experience, and achievements.

Installation

To install and run the My Personal Website project, follow these steps:

1. Make sure you have Node.js v18.17.0+ installed on your machine.
2. Install the project dependencies by running the command npm install.
3. Set up the environment variables by copying the .env.example file to a new .env.local file.
4. Set up the database by following the steps outlined in the “Database Setup” section.
5. Set up Prisma by running the command npm install @prisma/client (if not already installed) and then running npx prisma generate.
6. Start the development server by running the command npm run dev. This will create the .contentlayer files and launch the Next.js development server.

Database Setup

To set up the database for My Personal Website, follow these steps:

1. Sign up for a PlanetScale account.
2. Create a new database in PlanetScale.
3. Update the DATABASE_URL environment variable in your project’s .env.local file with the connection string provided by PlanetScale.

Summary

My Personal Website is a clean and simplistic portfolio website that provides a range of features to enhance usability and functionality. With features such as MDX blog posts, dark mode toggle, gear list, and an about page, the website caters to both visitors and the website owner. The installation process is straightforward and involves setting up the necessary dependencies, database, and environment variables. Overall, My Personal Website is a comprehensive and well-designed portfolio website solution.