✦ aan.my.id

Website portfolio & personal Annasirat

"Tampilan yang baik bukan hanya soal estetika, tapi juga struktur, performa, dan detail interaksi yang bikin pengguna betah."

---

Tentang Proyek

Website personal yang dibangun dari nol — tanpa framework besar, tanpa build tool, murni Vanilla HTML/CSS/JavaScript. Fokus pada desain modern, performa cepat, dan pengalaman pengguna yang nyaman di semua perangkat.

---

Fitur Utama

Fitur	Deskripsi
5 Tema	Dark, Light, Dim (Yellow), Ramadan, Valentine
Bilingual	Bahasa Indonesia & English, bisa beralih kapan saja
2 Layout	Sidebar (default) & Topbar — tersimpan di localStorage
Command Palette	Navigasi cepat via Ctrl+K
Responsive	Mobile-first, drawer menu khusus HP
Performa	Tanpa framework berat, lazy loading gambar
SEO Ready	Meta OG, Twitter Card, JSON-LD Structured Data

---

Halaman

/  ── Beranda      → Hero section + skill stack
     Tentang       → Bio, karier, pendidikan
     Pencapaian    → Galeri sertifikat & lencana (filter + search)
     Proyek        → Showcase project (filter tipe & kategori)
     Kegunaan      → Setup hardware, editor, tech stack
     Kontak        → Link media sosial
     Links         → Kumpulan tautan penting

---

Tech Stack

• Bahasa: HTML5, CSS3, Vanilla JavaScript (ES2021+)
• Font: Plus Jakarta Sans + JetBrains Mono
• Icon: Devicon CDN + SVG inline custom
• Storage: localStorage untuk tema, layout, bahasa
• Tanpa bundler, tanpa framework, tanpa dependensi npm

---

Struktur Folder

aan.my.id/
├── index.html              # Entry point utama
├── css/
│   ├── style.css           # Stylesheet utama (variabel tema, komponen)
│   └── enhancements.css    # Efek hover, animasi, glow
├── js/
│   ├── icons.js            # SVG icon registry
│   ├── data.js             # Data konten (profil, proyek, sertifikat, dll.)
│   └── app.js              # Logic utama (render, routing, i18n, state)
└── img/
    ├── avatar.webp
    ├── proyek/             # Screenshot proyek
    └── sertifikat/         # Gambar sertifikat

---

Cara Jalankan

Tidak perlu build step apapun. Cukup:

# Clone repo
git clone https://github.com/aan-HTML/aan.my.id.git

# Buka langsung di browser
open index.html

Atau gunakan Live Server di VS Code untuk development:

Klik kanan index.html → Open with Live Server

---

Kustomisasi

Semua konten dikelola di js/data.js — tidak perlu menyentuh HTML sama sekali.

// Ganti profil
DATA.profile.name = "Nama Kamu"
DATA.profile.avatar = "img/foto-kamu.webp"

// Tambah proyek baru
DATA.projects.items.push({
  title: "Nama Proyek",
  desc: "Deskripsi singkat.",
  tech: ["React", "Tailwind"],
  type: "Web",
  category: "Proyek Pribadi",
  featured: false,
  links: [{ label: "Live", url: "https://..." }]
})

// Tambah sertifikat
DATA.achievements.push({
  id: "ach-10",
  code: "KODE123",
  title: "Nama Sertifikat",
  org: "Lembaga",
  type: "Course",
  category: "Frontend",
  date: "April 2026",
  image: "img/sertifikat/nama.png",
  credentialUrl: "https://..."
})

Terjemahan (Indonesia ↔ English) dikelola di objek I18N dalam js/app.js.

---

Kostumisasi Spotify

Konten Halaman Spotify dikelola di js/spotify-data.js

 //Ganti Profile
profile: {
    name: "NamaKamu",
    image: "img/profilKamu.webp",
    url: "https://open.spotify.com/user/urlSPotifyKamu",
  },

//Statistik Spotify
stats: {
    playlists:  JumlahPlaylist,
    likedSongs: JumlahLaguDisukai,
    topArtists: JumlahArtisDisukai,
  },

//Playlist
playlists: [
    {
      id:    "playlist-1",
      name:  "My playlist",
      total: TotalLagu,
      image: "img/thumbnail.webp",
      url:   "https://open.spotify.com/playlist/UrlPlaylist",
    },
 ]

//Lagu Yang Disukai
likedSongs: [
    {
      id:       "track-1",
      title:    "Strong",
      artist:   "One Direction",
      image:    "img/spotify-lagu/one-direction-strong.webp",
      url:      "https://open.spotify.com/intl-id/track/3cKM7UXBZmgjEgEBTkaIlU?si=567585ac47cd4b46",
      duration: "3:04",
    },
 ]

//Artis Favorit
topArtists: [
    {
      id:    "artist-1",
      name:  "One Direction",
      genre: "Pop",
      image: "img/spotify-artis/one-direction-profil.webp",
      url:   "https://open.spotify.com/artist/4AK6F7OLvEQ5QYCBNiQWHq",
    },
 ]

---

Kontak

Punya pertanyaan, feedback, atau mau kolaborasi?

---

Bima, Nusa Tenggara Barat · 2025 – 2026