bonabrian.com

My Own Digital Home on the Internet

This is my personal website built with Next.js, Tailwind CSS, and hosted on Vercel

Features

• 🔥 Next.js with app router directory structure
• ⚛️ React
• ⚡️ Typescript
• 💅 Tailwind CSS
• 🧩 Contentlayer with MDX plugins
• ⚙️ SEO metadata
• 📏 ESLint — Find and fix problems in your code
• 💖 Prettier — Format your code consistently
• 🐶 Husky & Lint Staged — Run scripts on your staged files before they are committed
• 🤖 Conventional Commit Lint

Running Locally

1. Clone this repository

   git clone https://github.com/bonabrian/bonabrian.com.git

2. Change directory

   cd bonabrian.com

3. Install dependencies

   yarn install

4. Create a .env file similar to .env.example and input environment variables

    # Client
   
    NEXT_PUBLIC_APP_URL=http://localhost:3000
    NEXT_PUBLIC_GOOGLE_ANALYTICS=
    NEXT_PUBLIC_SENTRY_DSN=
    NEXT_PUBLIC_AVAILABLE_FOR_HIRE=true
   
    # Server
   
    # database
    DATABASE_URL=
   
    # next-auth
    NEXTAUTH_URL=http://localhost:3000
    NEXTAUTH_SECRET=
   
    # sentry
    SENTRY_DSN=
    SENTRY_AUTH_TOKEN=
   
    # google
    GOOGLE_ID=
    GOOGLE_SECRET=
   
    # github
    GITHUB_ID=
    GITHUB_SECRET=
    GITHUB_READ_USER_TOKEN_PERSONAL=
   
    # spotify
    SPOTIFY_CLIENT_ID=
    SPOTIFY_CLIENT_SECRET=
    SPOTIFY_CLIENT_REFRESH_TOKEN=
   
    # wakatime
    WAKATIME_API_KEY=

5. Start hacking

   yarn dev

Deployment

Deploy to Vercel, Netlify, etc

Files to customize

• constants/site.ts - update site with yours.
• constants/experiences.ts - update with your cool experiences.
• app/about/page.tsx - update with yours.
• app/resume/page.tsx - (optional) update with your resume or you can remove it.
• public/share/resume.pdf - (optional) replace with your best resume.
• public/media/* - store assets such as images and favicons.
• tailwind.config.js - contains the tailwind styles, and modify as you like to change overall look and feel to the site.
• content - replace with your blog posts, projects, and snippets.
• next.config.js - configuration related to Next.js. You need to adapt the Content Security Policy if you want to load scripts, images etc. from other domains.

Stack

• Framework: Next.js
• Styling: Tailwind CSS
• Database: PlanetScale
• ORM: Prisma
• Authentication: NextAuth.js
• Deployment: Vercel
• Content: MDX, contentlayer
• Monitoring: Sentry

License

Licensed under the MIT License.