Arya Setia Pratama

🌌 Personal Web Portfolio — Next.js & Sanity

A premium, high-performance personal portfolio built with the modern Jamstack architecture.
Decoupled presentation layer from content management — fast, scalable, and always in sync.

---

✨ Features

• 🏎️ Ultra Fast Performance: Static Site Generation (SSG) + Incremental Static Regeneration (ISR) via Sanity Webhooks.
• 🎨 Premium UI/UX: Dark mode (slate/zinc palette), glassmorphism navbar, and bento grid layouts.
• 🛠️ Headless CMS: Real-time content management via Sanity.io — no redeployment needed on content changes.
• 🎭 Smooth Animations: Hero fade-in, staggered project card reveals, and micro-interactions via Framer Motion.
• 📱 Fully Responsive: Optimized for all devices from mobile to ultra-wide desktops.
• 🔍 SEO Optimized: Best practices for search engine visibility and accessibility baked in.

---

🛠️ Tech Stack

Layer	Technology	Purpose
Framework	Next.js (App Router)	Routing, SSG, ISR, API Routes
Language	TypeScript	Static typing, compile-time safety
Styling	Tailwind CSS	Dark mode, glassmorphism, bento grid
Animations	Framer Motion	Micro-interactions, page transitions
CMS	Sanity.io	Headless content management
Deployment	Vercel	CI/CD, auto-deploy on push

---

🏗️ Architecture & Data Flow

The system uses a modern decoupled (Jamstack) architecture with three main layers:

1. Sanity Studio (CMS): A React-based workspace where the admin manages project entries, author profile, and articles. Data is stored on Sanity’s cloud.
2. GROQ Query Layer: Next.js fetches structured JSON data from Sanity using GROQ (Graph-Relational Object Queries).
3. Next.js Frontend: Renders data into optimized static HTML at build time (SSG), or updates pages on-demand via ISR when a Sanity Webhook fires on content publish.

---

📂 Project Structure

src/
├── app/
│   ├── layout.tsx          # Root layout (Navbar, Footer, Dark Mode init)
│   ├── page.tsx            # Homepage (Hero, Skills, Project Highlights)
│   ├── projects/
│   │   ├── page.tsx        # All Projects page (Bento grid layout)
│   │   └── [slug]/
│   │       └── page.tsx    # Dynamic Project Detail page
│   ├── about/
│   │   └── page.tsx        # About page (Full profile + CV download)
│   └── api/
│       └── revalidate/     # ISR Webhook handler from Sanity
├── components/
│   ├── ui/                 # Buttons, Cards, Inputs (glassmorphism styles)
│   └── sanity/             # Portable Text renderer for Sanity content
└── sanity/
    ├── schemas/            # Data model definitions (project.ts, author.ts)
    └── lib/                # Sanity client, GROQ query configs

---

🗄️ Content Model (Sanity Schema)

project — Portfolio Projects

| Field | Type | Description | |—|—|—| | title | String | Project or research name | | slug | Slug | Unique URL identifier (e.g. sistem-pakar-diagnosa) | | summary | Text | Short project summary | | coverImage | Image | Main screenshot / banner | | techStack | String[] | Technologies used (e.g. "Python", "React") | | repositoryUrl | URL | GitHub repository link | | content | Portable Text | Deep-dive: background, methodology, test results |

author — Owner Profile

| Field | Type | Description | |—|—|—| | name | String | Full name | | bio | Block Content | Education background and expertise (AI & SE) | | resume | File | PDF Curriculum Vitae | | socialLinks | Object[] | LinkedIn, GitHub, Email links |

---

🚀 Getting Started

Prerequisites

• Node.js 18.x or later
• A Sanity.io account

Installation

1. Clone the repository:

   git clone https://github.com/aryasetiap/aryasetiap.github.io.git
   cd aryasetiap.github.io
   

2. Install dependencies:

   npm install
   

3. Environment Setup: Create a .env.local file at the root:

   NEXT_PUBLIC_SANITY_PROJECT_ID=your_project_id
   NEXT_PUBLIC_SANITY_DATASET=production
   SANITY_API_TOKEN=your_api_token
   

4. Run the development server:

   npm run dev
   

   Open http://localhost:3000.

---

🚢 Deployment (CI/CD)

This project uses a zero-downtime, fully automated deployment pipeline:

1. GitHub holds the main branch as source of truth.
2. Vercel listens on main — every git push triggers an automatic build.
3. Sanity Webhook fires a POST to /api/revalidate every time a project or author document is published, triggering ISR to refresh only the affected pages — keeping the site fast and data always in sync.

---

🌐 Connect with Me

Made with ❤️ by Arya Setia Pratama