BrianRuizy / b-r.io

My personal website made with Next.js, Tailwind, MDX, Radix Primitives, Framer Motion, all on Vercel.

My Personal Website

My personal portfolio website designed to be simplistic and clean while including features like MDX blog posts with view counts, a dark mode toggle, gear list, an about page, and more.

Tech Stack

backend:

• Next.js / TypeScript
• MDX / Contentlayer (Blog Posts)
• Vercel Postgres (Database)

frontend:

• Tailwind CSS (Styling)
• Radix Primitives (Headless UI components)
• Radix UI Colors (Color system)
• Framer Motion (Animations)

Getting Started

Make sure you have Node.js v18.17.0+ installed on your machine.

1. Install Dependencies: npm install
2. Environment variables: Copy .env.example to a new .env.local
3. Database Setup: See Database Setup
4. Start Developing: npm run dev, this will automatically create the .contentlayer files and start the Next.js development server.

Database Setup

• Vercel Postgres https://vercel.com/docs/storage/vercel-postgres/quickstart

-- Create blog views table
CREATE TABLE IF NOT EXISTS blog_views (
    slug VARCHAR(255) PRIMARY KEY,
    count INT DEFAULT 0
)

-- crete topics table
CREATE TABLE topics (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) NOT NULL
)

-- Create CommunityPosts table
CREATE TABLE community_posts (
    id SERIAL PRIMARY KEY,
    content TEXT NOT NULL,
    clerk_user_id VARCHAR(255) NOT NULL,
    created_at TIMESTAMP NOT NULL DEFAULT NOW(),
    topic_id INTEGER REFERENCES Topics(id)
)

Deployment

This project can be quickly deployed to Vercel. Simply connect your Vercel account to your GitHub repository, and Vercel will automatically build and deploy your application with each new push to the main branch.

Add the project .env variables to your Vercel project settings.