Digital Resume

This is a professional and high-performance resume featuring real-time analytics and a print-optimized engine.

Key Idea

This project was designed as a real-world resume system, inspired by early web analytics concepts and modernized with serverless architecture and optional backend integration.

It demonstrates how a resume can evolve into a full-stack interactive application, combining UI, performance, and backend analytics.

Tech Stack

• Frontend: Next.js 15 (App Router), TypeScript, Tailwind CSS v4
• Backend (optional): Supabase (PostgreSQL) used for lightweight analytics
• Deployment: Vercel

Backend Architecture

The project uses:

• RPC functions for secure server-side operations (view counter increment)
• Row-level queries for retrieving aggregated metrics
• Environment-based configuration to safely enable/disable backend features

Design

• Typography: Geist Sans (headings), Inter (body text)
• Colors: Slate-900 (base), Blue-600 (accent), Slate-50 (background)
• Style: Minimalist, responsive, SaaS-inspired UI

Live View Counter

Real-time metrics tracked via Supabase.

Inspired by early web analytics systems, modernized using secure RPC calls and serverless patterns.

Print Optimization

Custom print engine using CSS @media print ensures:

• Clean A4 layout
• No visual shifts
• PDF-ready export
• Print-safe UI structure

Security Features

• SQL Injection protection via PostgreSQL RPC calls
• XSS-safe rendering via React escaping
• Server-side increment logic ensures data integrity

Supabase Integration (Optional)

This project includes an optional backend layer powered by Supabase.

Features:

• Tracks resume views in real time
• Executes secure RPC (increment_views)
• Stores aggregated metrics in PostgreSQL

Fallback Mode

If Supabase is not configured:

• Backend requests are safely skipped
• App runs in mock mode
• No crashes or runtime errors occur

This allows the project to function as a fully static portfolio.

Getting Started

Requirements

• Node.js 18+
• npm / yarn / pnpm
• Supabase account (optional)

Installation

npm install

Environment variables

Create a .env.local file based on .env.example:

NEXT_PUBLIC_SUPABASE_URL=your_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key

Database Setup

Run the SQL script in Supabase to create:

metrics table

increment_views function

Run Development Server

npm run dev

License

This project is licensed under the MIT License.