Logo
Published on

How I Built ramos.je

Authors

How I Built ramos.je

This document details the step-by-step process I followed to build my personal website and developer portfolio. I wanted a site that would showcase my GitHub contributions, host technical blog posts, and serve as a scalable platform for my personal brand.

Affiliate Notice: This article contains affiliate links. When you click on these links and sign up for the services mentioned, I may earn a commission at no additional cost to you. This helps support my work and allows me to continue creating content like this.

Starting Point: The Tech Stack

For this project, I chose:

  • Next.js - For React-based server-side rendering, static site generation, and routing
  • Tailwind CSS - For utility-first styling with a modern design system
  • Radix UI - For accessible, themeable UI components
  • ContentLayer - For managing MDX content
  • GitHub GraphQL API - For fetching my GitHub statistics

Step 1: Setting Up the Base Template

I started with the Tailwind NextJS Starter Blog template, which provided an excellent foundation with:

  • Next.js with TypeScript
  • Tailwind CSS configuration
  • MDX support
  • Blog post functionality
  • Light/dark theme toggle
# Clone the template
npx degit 'timlrx/tailwind-nextjs-starter-blog'

# Install dependencies
yarn install

Step 2: White-labeling the Project

I needed to make the template my own, so I:

  1. Updated package.json with my project details:

    • Changed the project name to "ramos-je"
    • Updated version to 1.0.0
    • Added Radix UI themes as a dependency

  2. Kept the existing Tailwind CSS v4 configuration which includes:

    • Typography plugin for content styling
    • Forms plugin for form elements
    • Custom theme with primary color customization

Step 3: Creating a Custom Radix UI Theme

To give my site a unique and consistent look, I created a custom Radix UI theme:

  1. Created a new CSS file (css/radix-theme.css) with:

    • Custom blue color scale for both light and dark modes
    • Custom gray color scale for both light and dark modes
    • Support for display-p3 color gamut via OKLCH values
    • Light mode with bright, vibrant blues
    • Dark mode with deep, rich blues

  2. Integrated the theme with Tailwind by:

    • Importing the Radix theme in css/tailwind.css
    • Updating the ThemeProviders component to wrap the app with Radix's Theme component
    • Setting appearance to "inherit" to respect system/user preferences

  3. Mapped the custom blues to primary colors for both themes:

    • Used CSS variables to connect the blue scale with Tailwind's primary colors
    • Set accent colors to blue for Radix UI components
    • Ensured consistent button, link, and interactive element styling

Step 4: Creating the Landing Page

I redesigned the main landing page to include:

  1. A hero section with:

    • A prominent headline "Engineering in public."
    • Brief introduction text
    • CTA buttons for GitHub stats and blog
    • Profile image placeholder

  2. A GitHub stats preview section:

    • Three cards showing key metrics (total contributions, top language, public repos)
    • Link to the full GitHub stats page

  3. Latest blog posts:

    • Showing the most recent 3 posts with:
    • Title, date, tags, and summary
    • Link to read more

  4. A call-to-action section:

    • Contact information and link to the contact page

Step 5: Building the GitHub Stats Page

The GitHub stats page was a key feature I wanted to implement:

  1. Created a dedicated /github route

  2. Designed a page to display:

    • Total contributions across accounts
    • Breakdown by personal and work accounts
    • Top programming languages with percentage bars
    • Pinned repositories with stars and descriptions

  3. Created a data fetching mechanism:

    • Wrote a Node.js script that uses the GitHub GraphQL API
    • Configured it to fetch stats from multiple accounts
    • Stored results in a local JSON file
// Sample from the GitHub stats fetching script
async function fetchGitHubStats() {
  // Fetch user data from GitHub GraphQL API
  const data = await executeQuery(getUserStatsQuery, { username: 'je-ramos' })

  // Process contributions, languages, and repos
  // ...

  // Write to JSON file for the website to consume
  fs.writeFileSync(outputPath, JSON.stringify(stats, null, 2))
}
  1. Added placeholder data for development and demonstration

Step 6: Implementing Accessible UI with Radix

I integrated Radix UI components to ensure accessibility:

  1. Added the Radix UI Themes package using yarn:

    yarn add @radix-ui/themes

  2. Used components like:

    • Dialog for modals
    • Tabs for content organization
    • Accordion for expandable sections
    • Progress bars for language statistics

  3. Customized the footer with carefully selected social links:

    • GitHub profile (@je-ramos)
    • LinkedIn profile
    • Twitter/X profile
    • Threads profile
    • Email contact

Step 7: Deploying to Vercel

Deployment was straightforward with Vercel:

  1. Pushed the code to GitHub
  2. Connected the repository to Vercel
  3. Configured build settings and environment variables
  4. Added custom domain ramos.je

Step 8: Integrating Third-Party Tools

Affiliate Notice: This article contains affiliate links. When you click on these links and sign up for the services mentioned, I may earn a commission at no additional cost to you. This helps support my work and allows me to continue creating content like this.

To enhance the site's functionality and monitor its performance, I integrated several third-party services:

  1. Beehiiv - For newsletter management:

    • Set up a newsletter subscription system using Beehiiv
    • Configured the subscription form to match my site's design
    • Integrated with the blog to promote newsletter signups

  2. Umami Analytics - For privacy-focused web analytics:

    • Implemented Umami to track site traffic and user behavior
    • Self-hosted the Umami instance for complete data ownership
    • Configured custom events to track engagement with key site features

  3. Better Stack - For monitoring and uptime alerts:

    • Set up Better Stack to monitor site availability
    • Configured alerts to notify me of any downtime via phone calls and Slack
    • Implemented status page for transparency with site reliability

These tools allow me to maintain a professional site experience while gathering insights to improve the platform over time.

Results and Next Steps

The site now has:

  • A fast, accessible, and responsive design
  • A consistent blue theme across light and dark modes
  • A landing page that immediately showcases my work
  • A GitHub stats page that pulls data from my accounts
  • A blog section for technical articles
  • Social media links to connect with me

Future plans include:

  • A Now page to show what I'm currently working on
  • Project showcase page with filterable tags
  • Authentication for admin access

Conclusion

Building this site was a great learning experience that allowed me to:

  • Deepen my understanding of Next.js
  • Master Tailwind CSS for rapid UI development
  • Implement accessibility best practices with Radix UI
  • Create custom themes that work in both light and dark modes
  • Work with the GitHub GraphQL API
  • Create a platform for my developer brand

I hope this walkthrough helps others looking to build something similar!

Discuss on Threads • View on GitHub