Portfolio Website
Engineering
Web DesignNext.jsPortfolio

Portfolio Website

The current MDCran portfolio website — built with Next.js, Tailwind v4, shadcn/ui, and framer-motion.

MDCranMDCran·Mar 2, 2026·1 min read

Live at mdcran.com

The application behind this site: a responsive portfolio with managed content, API integrations, streaming AI chat, voice features, and analytics.

Contribution & implementation

Designed, built, and maintain the Next.js application and its content, portfolio, analytics, and integration routes. The project record also documents the visitor experience through screenshots and a terminal-mode demo.

Engineering approach

  • Use server-rendered pages alongside interactive React components for browsing and live experiences.
  • Store editable portfolio content in MongoDB and expose public data through focused API routes.
  • Integrate streaming chat and speech services through server-side routes so provider credentials stay on the server.
  • Treat accessibility, screen-reader support, theme controls, and responsive layouts as part of the site experience.

Next.js · React · TypeScript · MongoDB · REST APIs · AI integrations · Accessibility

Architecture at a glance

Simplified from the public implementation notes. Select a component.

Server-rendered public pages and interactive browser features.

Guided case study & hands-on walkthrough

Six review steps grounded in the published implementation. Tradeoffs are architectural interpretation; next evaluations are suggestions.

Problem

Recruiters need a fast path to evidence while a broader portfolio also serves creative clients and interactive visitors.

Open supporting public evidence

Use the project filters to browse by area, choose a role, or search for a technology. Open a card to explore its implementation and demos.

Home Page

Homescreen Hero Section

Featured Work

Showcase of Featured Projects

AI Chat Bot

Context-Aware AI Chatbot (Site-Wide)

Clients

List of Clients

Resume

Up-to-date Resume w/ Experiences, Awards, Organizations, and more...

Screen Reader Support

Screen reader technology upon highlighting text.

Custom Themes

Custom themes toggled through bottom left theme selector.

Terminal Mode

“Hit ↑ ↑ ↓ ↓ ← → ← → on your Keyboard!”

Published Mar 2, 2026

Appreciate this project

AI guide

Share

Tags
Web DesignNext.jsPortfolioFrontend
Credits
Michael Cran
Developer / Designer