Status: Active

Timeline: January 2022 - present

Visit site: samueledusa.com

Technologies: Next.js 12, React 17, TypeScript, Styled-Components, Netlify

---

My personal website and portfolio, built to showcase both my medical career and software engineering work. The site serves as a living resume, blog platform, and project showcase.

Purpose

As a physician who also builds software, I needed a single platform that could present both sides of my professional life. This site bridges medicine and technology in a way that reflects my dual expertise.

Technical Details

Architecture

A Next.js 12 application using static site generation (SSG) for performance. The project is structured as:

• src/pages/ — Route-based pages (medicine, software, blog, presentations, projects, contact)
• src/components/ — Reusable UI components (layout, header, resume sections, icons)
• src/posts/ — Markdown blog posts with YAML front matter
• src/styles/ — Global CSS and syntax highlighting theme
• src/utils/ — Theme configuration, breakpoints, RSS generation
• src/data/ — Site metadata and configuration
• siteconfig.json — Centralized content configuration for all resume data, projects, and navigation

Frontend Stack

• React 17 with TypeScript 5.9
• Styled-Components 5.3 for CSS-in-JS with full theme provider
• next/image for optimized image loading
• react-icons for iconography

Content & Markdown

• gray-matter for parsing YAML front matter from markdown files
• react-markdown with rehype-raw for rendering markdown to React components
• react-syntax-highlighter with a custom dark theme for code blocks
• reading-time for estimated reading time on blog posts
• Feed library for RSS feed generation (/feed.xml)

Theming

• Full light/dark mode toggle with theme persistence
• Light theme: warm cream background (#fff1e5) with dark text
• Dark theme: pure black background (#111) with off-white text
• Accent color: tropical rainforest teal (#0a5e66)
• Fonts: Lora (serif titles), Lato (sans-serif body), Yellowtail (script header)

Additional Features

• PDF Viewer — Built-in viewer using @react-pdf-viewer for presentation slides and certificates
• Telegram Integration — Serverless functions (Netlify Functions) for sending messages and files to Telegram
• Progressive Web App — PWA support via next-pwa
• Analytics — Privacy-focused tracking with next-plausible

Hosting & Deployment

• Netlify with continuous deployment from Bitbucket
• Static export via next export for CDN delivery
• Serverless functions for Telegram API integration

Key Features

• Light and dark theme toggle
• Markdown-powered blog with syntax highlighting and reading time
• Medical and software resume sections with expandable content
• Presentation slides gallery with PDF viewer
• Dedicated projects page with individual project detail pages
• Progressive Web App support
• RSS feed generation
• Telegram integration tools
• Responsive design across all device sizes