Data Analyst & Researcher
Mengubah data mentah menjadi insight bermakna
Website portfolio pribadi buat Adinda Salsa Aryadi Putri — mahasiswi Sosiologi FISIP UNAS yang fokus di bidang Data Analysis dan Riset Kuantitatif. Dibangun pake Next.js 14 dengan TypeScript, Tailwind CSS buat styling, dan Framer Motion buat animasi smooth.
Desainnya pake tema pink pastel soft yang feminin dengan glass morphism effect, blob morphing, sparkle cursor trail, dan berbagai micro-interactions lucu — berdasarkan feedback langsung dari pemilik portfolio.
Live di salsa.tams.codes.
| Teknologi | Versi | Kegunaan |
|---|---|---|
| Next.js | 14 | Framework React dengan SSR dan App Router |
| TypeScript | 5.7 | Static typing buat keamanan kode |
| Tailwind CSS | 3.4 | Utility-first CSS framework |
| Framer Motion | 11 | Library animasi dan transisi |
| canvas-confetti | 1.9 | Efek confetti easter egg |
| Jest | 29 | Unit testing framework |
| GitHub Actions | — | CI/CD pipeline otomatis |
web-porto-salsa/
├── .github/
│ └── workflows/
│ └── main.yml # CI/CD: test → build → release otomatis
├── __mocks__/
│ └── framer-motion.js # Mock framer-motion buat unit test
├── src/
│ ├── app/
│ │ ├── layout.tsx # Root layout + ScrollProgress + SparkleTrail
│ │ ├── page.tsx # Halaman utama (compose semua section)
│ │ ├── globals.css # Global styles + animasi keyframes
│ │ ├── not-found.tsx # Custom 404 page (FuzzyText)
│ │ └── error.tsx # Custom 500 page (FuzzyText)
│ ├── components/
│ │ ├── Navbar.tsx # Navigasi responsive + glass effect
│ │ ├── Hero.tsx # Hero + ShuffleText + LaserFlow + FloatingElements + Confetti
│ │ ├── About.tsx # Tentang saya + highlight cards
│ │ ├── Skills.tsx # Skill tags/chips per kategori
│ │ ├── Projects.tsx # Project cards + ShimmerCard hover effect
│ │ ├── Experience.tsx # Timeline pengalaman & pendidikan (alternating)
│ │ ├── Contact.tsx # Form kontak + info sosial
│ │ ├── VisitorCounter.tsx # Stats counter animasi (CountUp)
│ │ ├── Footer.tsx # Footer + social links
│ │ └── effects/ # Efek visual & animasi interaktif
│ │ ├── ShuffleText.tsx # Animasi shuffle/random teks
│ │ ├── FuzzyText.tsx # Animasi glitch teks (error pages)
│ │ ├── CountUp.tsx # Animasi count up angka
│ │ ├── LaserFlow.tsx # Canvas laser beam background
│ │ ├── PixelBackground.tsx # Pixel background effect
│ │ ├── ScrollProgress.tsx # Progress bar gradient di atas halaman
│ │ ├── SparkleTrail.tsx # Sparkle cursor trail (desktop only)
│ │ ├── ShimmerCard.tsx # Hover shimmer/gloss effect pada cards
│ │ ├── FloatingElements.tsx# Elemen dekoratif melayang
│ │ └── useConfettiEgg.ts # Hook easter egg confetti (klik 5x)
│ ├── data/
│ │ └── portfolio.json # Data konten portfolio (single source of truth)
│ └── __tests__/ # Unit tests (44 tests, 15 suites)
│ ├── components/ # Test setiap komponen
│ └── effects/ # Test setiap efek visual
├── tailwind.config.js # Konfigurasi tema pink pastel
├── jest.config.ts # Konfigurasi Jest
├── tsconfig.json # TypeScript config
└── package.json # Dependencies & scripts
┌──────────────────────────────────────────────────────────────┐
│ layout.tsx │
│ ┌─────────────────┐ ┌──────────────────┐ │
│ │ ScrollProgress │ │ SparkleTrail │ ← global effects │
│ └─────────────────┘ └──────────────────┘ │
│ │
│ ┌────────────────── page.tsx ──────────────────┐ │
│ │ │ │
│ │ ┌──────────┐ │ │
│ │ │ Navbar │ ← glass morphism, responsive │ │
│ │ └──────────┘ │ │
│ │ ↓ │ │
│ │ ┌──────────────────────────────────┐ │ │
│ │ │ Hero Section │ │ │
│ │ │ ┌────────────┐ ┌─────────────┐ │ │ │
│ │ │ │ LaserFlow │ │FloatingElems│ │ │ │
│ │ │ │ (canvas) │ │ (shapes) │ │ │ │
│ │ │ └────────────┘ └─────────────┘ │ │ │
│ │ │ ┌────────────┐ ┌─────────────┐ │ │ │
│ │ │ │ShuffleText │ │ConfettiEgg │ │ │ │
│ │ │ │ (typing) │ │ (5x click) │ │ │ │
│ │ │ └────────────┘ └─────────────┘ │ │ │
│ │ │ + Blob Morphing BG (CSS) │ │ │
│ │ └──────────────────────────────────┘ │ │
│ │ ↓ │ │
│ │ ┌──────────┐ │ │
│ │ │ About │ ← highlight cards │ │
│ │ └──────────┘ │ │
│ │ ↓ │ │
│ │ ┌──────────┐ │ │
│ │ │ Skills │ ← tag chips per kategori │ │
│ │ └──────────┘ │ │
│ │ ↓ │ │
│ │ ┌──────────────────────────────────┐ │ │
│ │ │ Projects Section │ │ │
│ │ │ ┌────────────┐ │ │ │
│ │ │ │ShimmerCard │ ← hover glow │ │ │
│ │ │ └────────────┘ │ │ │
│ │ └──────────────────────────────────┘ │ │
│ │ ↓ │ │
│ │ ┌────────────┐ │ │
│ │ │ Experience │ ← alternating timeline │ │
│ │ └────────────┘ │ │
│ │ ↓ │ │
│ │ ┌──────────┐ │ │
│ │ │ Contact │ ← form + social links │ │
│ │ └──────────┘ │ │
│ │ ↓ │ │
│ │ ┌────────────────┐ │ │
│ │ │VisitorCounter │ ← CountUp animasi │ │
│ │ └────────────────┘ │ │
│ │ ↓ │ │
│ │ ┌──────────┐ │ │
│ │ │ Footer │ │ │
│ │ └──────────┘ │ │
│ └──────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘
| Fitur | Deskripsi | Tipe |
|---|---|---|
| ShuffleText | Teks "Salsa" acak random lalu settle ke nama asli | Component |
| LaserFlow | Canvas laser beam pink melayang di background hero | Canvas |
| FloatingElements | Shapes dekoratif (✦ ◇ ○ ✿ ⬡) melayang perlahan | Framer Motion |
| SparkleTrail | Bintang pink ikutin cursor mouse (desktop only) | Canvas |
| ScrollProgress | Progress bar gradient di atas halaman saat scroll | Framer Motion |
| ShimmerCard | Efek glossy/holographic saat hover project cards | CSS + State |
| Blob Morphing | Background blob berubah bentuk terus-menerus | CSS Keyframes |
| Gradient Shift | Teks gradient bergerak shimmer pink→lavender→teal | CSS Keyframes |
| Confetti Burst | Easter egg — klik nama "Salsa" 5x = confetti meledak | canvas-confetti |
| CountUp | Angka statistik count dari 0 ke target saat masuk viewport | Component |
# clone repo
git clone https://github.com/el-pablos/web-porto-salsa.git
cd web-porto-salsa
# install dependencies
npm install
# jalanin development server
npm run dev
# buka di browser
# http://localhost:3000# jalanin semua test
npm test
# jalanin test dengan watch mode
npm run test:watch
# jalanin test dengan coverage report
npm run test:coverageStatus test saat ini: 44 tests, 15 suites — 100% passed
Setiap push ke branch master:
Push → Test & Lint → Build → Create Tag → Create Release (latest + versioned)
Pipeline otomatis:
- Install dependencies
- Jalanin linter
- Jalanin semua unit test dengan coverage
- Build production
- Buat git tag (
v2.0.0-abc1234) - Buat GitHub Release
latest(selalu update ke commit terbaru) - Buat GitHub Release versioned (history semua release)
portfolio.json (single source of truth)
│
├──→ Hero.tsx → nama, title, tagline
├──→ About.tsx → deskripsi, highlights
├──→ Skills.tsx → skill categories & tags
├──→ Projects.tsx → project cards + tech tags
├──→ Experience.tsx → timeline pengalaman & pendidikan
├──→ Contact.tsx → social links & lokasi
├──→ VisitorCounter → stats counter
└──→ Footer.tsx → nama, social links
| Nama | Peran | |
|---|---|---|
| 🧑💻 | el-pablos | Developer & maintainer |
| 🤖 | Claude Opus 4.6 | AI pair programmer |
| 🤖 | Gemini CLI | AI redesign assistant |
| 🎨 | Adinda Salsa Aryadi Putri | Pemilik portfolio & design feedback |
Dibuat oleh el-pablos
