bjornmelin-platform-io

Cloud-native portfolio platform powering bjornmelin.io. Static site built with React 18, Next.js 14, and AWS CDK infrastructure. Deployed to S3 with CloudFront CDN. Requires Node.js 24.x LTS.

Table of Contents

• Features
• Documentation
• Architecture
• Project Structure
• Getting Started
• Tech Stack
• AWS Services
• Development Scripts
• Docker
• Releasing
• Infrastructure Tests
• Author
• License

Features

Platform

• AWS Infrastructure: S3, CloudFront, Route 53, ACM, Lambda via AWS CDK
• CI/CD: GitHub Actions with OIDC-based AWS role assumption
• Multi-Environment: Development, staging, and production configurations
• Static Export: Pre-rendered HTML with optimized assets

Frontend

• Next.js 14 App Router: Server Components, static export (output: 'export')
• React 18: Concurrent features, Suspense boundaries
• TypeScript: Strict mode with Zod runtime validation
• Tailwind CSS: Utility-first styling with shadcn/ui components

Performance Optimization

• LazyMotion: Framer Motion lazy-loaded feature set (32KB to 5KB reduction)
• Image Optimization: WebP conversion via next-export-optimize-images
• Bundle Analysis: @next/bundle-analyzer for size monitoring
• Modern Targets: Browserslist configured for ES6 module support

Documentation

Development

• Getting Started
• Development Overview
• Testing Strategies
• Releasing

Deployment

• Overview
• CI/CD Pipeline
• Environments

Architecture

• Overview
• Frontend

Architecture

System Architecture

graph TB
    subgraph "Global Edge Network"
        CF[CloudFront Distribution]
    end

    subgraph "Frontend"
        S3[S3 Bucket]
        CF --> S3
    end

    subgraph "API Layer"
        LAMBDA[Contact Form Lambda]
        RESEND[Resend API]
    end

    subgraph "DNS & SSL"
        R53[Route 53]
        ACM[ACM Certificate]
    end

    CF --> LAMBDA
    LAMBDA --> RESEND
    R53 --> CF
    ACM --> CF

Loading

Contact Form Flow

sequenceDiagram
    participant User
    participant Frontend
    participant Lambda
    participant Resend

    User->>Frontend: Submit Contact Form
    Frontend->>Lambda: POST /api/contact
    Lambda->>Resend: Send Email
    Resend-->>Lambda: Email Sent
    Lambda-->>Frontend: Success Response
    Frontend-->>User: Show Success Message

Loading

DNS and CDN Setup

graph LR
    subgraph "DNS Management"
        R53[Route 53]
        ZONE[Hosted Zone]
    end

    subgraph "Content Delivery"
        CF[CloudFront]
        S3[S3 Origin]
        ACM[SSL Certificate]
    end

    R53 --> CF
    CF --> S3
    ACM --> CF

Loading

Project Structure

bjornmelin-platform-io/
├── .github/                # GitHub Actions workflows
├── docs/                   # Project documentation
│   ├── api/               # API documentation
│   ├── architecture/      # Architecture docs
│   ├── deployment/        # Deployment guides
│   └── development/       # Development guides
├── infrastructure/         # CDK infrastructure code
│   ├── bin/               # CDK app entry
│   └── lib/               # Infrastructure code
│       ├── functions/     # Lambda functions
│       ├── stacks/        # CDK stacks
│       └── types/         # Stack types
├── public/                # Static assets
│   ├── certifications/    # AWS certifications
│   ├── headshot/          # Profile images
│   └── projects/          # Project images
├── src/                   # Application source
│   ├── app/               # Next.js 14 App Router
│   │   ├── api/           # API routes (dev only)
│   │   └── fonts/         # Custom fonts
│   ├── components/        # React components
│   ├── data/              # Static data
│   ├── hooks/             # Custom hooks
│   ├── lib/               # Utilities
│   └── types/             # TypeScript types
├── export-images.config.js # Image optimization config
└── next.config.mjs        # Next.js configuration

Core Components

• Frontend: Next.js 14 static export with App Router
• Infrastructure: AWS CDK for resource provisioning
• CI/CD: GitHub Actions for automated deployments
• CDN: CloudFront with Route 53 DNS
• API: Lambda function with Resend for contact form (infrastructure-deployed)

Getting Started

Prerequisites

Node.js >= 24.0.0 (LTS)
pnpm (via Corepack)
AWS CLI configured

Enable Corepack and activate the pinned pnpm version from package.json:

corepack enable
corepack use $(node -p "require('./package.json').packageManager")

Initial Setup

# Clone repository
git clone https://github.com/bjornmelin/bjornmelin-platform-io.git
cd bjornmelin-platform-io

# Install dependencies
pnpm install

# Configure AWS credentials
aws configure

# Configure local environment (local-only values)
cp .env.example .env.local
# Note: Production configuration is provided by the GitHub Environment (vars)
# and AWS SSM/Secrets. No .env.production is used.

Infrastructure Deployment

# Deploy infrastructure (from repo root)
pnpm -C infrastructure install
pnpm -C infrastructure cdk deploy

Local Development

# Start development server
pnpm dev

Tech Stack

Frontend:
  Core:
    - React 18.3.1
    - Next.js 14.2.35
    - TypeScript 5.8

  UI:
    - Tailwind CSS
    - shadcn/ui
    - Framer Motion (LazyMotion)
    - GeistVF Font

  Build:
    - next-export-optimize-images (WebP conversion)
    - @next/bundle-analyzer
    - Browserslist (ES6 module targets)

Infrastructure:
  AWS:
    - CDK
    - CloudFront
    - S3
    - Route 53
    - ACM
    - Lambda
  Email:
    - Resend

Development:
  Tools:
    - pnpm 10.18.3 (Corepack)
    - Biome (lint + format)
    - Vitest (unit tests)
    - Playwright (E2E tests)

AWS Services

Content Delivery

• CloudFront: CDN distribution with custom domain
• Route 53: DNS management and domain routing
• ACM: SSL/TLS certificate management
• S3: Static asset hosting

Compute and Email

• Lambda: Contact form handler
• Resend: Email delivery (via API)

Operations

• CDK: Infrastructure as code
• CloudWatch: Logging and monitoring
• IAM: Role-based access control

Development Scripts

# Development
pnpm dev          # Start development server
pnpm build        # Build and optimize images
pnpm start        # Serve static export
pnpm serve        # Serve static export (alternative)

# Quality
pnpm lint         # Run Biome lint/format checks
pnpm type-check   # TypeScript type checking

# Testing
pnpm test         # Run unit tests
pnpm test:e2e     # Run E2E tests

# Analysis
pnpm analyze      # Build with bundle analyzer

# Infrastructure
pnpm -C infrastructure cdk deploy   # Deploy AWS infrastructure

Docker

Build the production image (requires Docker Desktop/daemon running):

docker build -t platform-io:node24 .

Run the container and serve the exported site on port 8080:

docker run --rm -p 8080:80 platform-io:node24

Open http://localhost:8080 in your browser. Use Ctrl+C to stop the container.

Releasing

Releases are automated using release-please. Push commits with Conventional Commits format to main, and release-please will open a Release PR. Merge it to create a tagged GitHub Release.

See docs/development/releasing.md for full details.

Infrastructure Tests

CDK assertions are available under infrastructure/test/ using Vitest. See infrastructure/README.md#tests for commands.

Author

Bjorn Melin

AWS-certified Solutions Architect, Developer, SysOps Administrator, and Machine Learning Engineer. Connect on:

• GitHub
• LinkedIn
• Coursera
• Medium

License

This project is licensed under the MIT License. See the LICENSE file for details.

Star History

Citation

If you use this project in your research or work:

@misc{melin2026portfolio,
  author = {Melin, Bjorn},
  title = {bjornmelin-platform-io: Portfolio Platform},
  year = {2026},
  publisher = {GitHub},
  journal = {GitHub repository},
  howpublished = {\url{https://github.com/bjornmelin/bjornmelin-platform-io}},
  commit = {main}
}

Acknowledgments

• AWS Documentation
• AWS CDK Patterns Community
• Next.js Documentation

---

Built with React 18 + Next.js 14 by Bjorn Melin.