Portofolio 2.0

Situs web portofolio kedua saya yang menunjukkan perkembangan keterampilan pengembangan web dengan desain modern dan pengalaman pengguna yang ditingkatkan

htmlcssjavascriptportofolioresponsifdesain-modern

Bagikan proyek ini:

Tentang Proyek

Portofolio 2.0

image

Situs web portofolio kedua saya, mewakili pertumbuhan dan evolusi dalam keterampilan pengembangan web. Iterasi ini menampilkan desain yang lebih baik, pengalaman pengguna yang lebih mulus, dan menampilkan proyek-proyek dengan presentasi yang ditingkatkan.

📋 Ringkasan

Portofolio 2.0 adalah iterasi kedua dari situs web portofolio pribadi saya. Dibangun setelah mendapatkan lebih banyak pengalaman dalam pengembangan web, versi ini mendemonstrasikan peningkatan signifikan dalam prinsip desain, kualitas kode, dan pengalaman pengguna secara keseluruhan dibandingkan dengan portofolio pertama saya.

✨ Fitur

Desain & UI

  • Tata Letak Modern: Desain yang bersih dan profesional.
  • Desain Responsif: Dioptimalkan untuk semua perangkat (ponsel, tablet, desktop).
  • Animasi Halus: Interaksi pengguna yang menarik.
  • Tipografi Profesional: Font yang estetis dan mudah dibaca.
  • Skema Warna: Palet warna yang dipilih dengan cermat.
  • Hierarki Visual: Struktur informasi yang jelas.

Bagian Konten

  • Bagian Hero: Pengenalan yang menarik perhatian.
  • Tentang Saya: Latar belakang profesional dan keterampilan.
  • Showcase Proyek: Portofolio hasil karya.
  • Keterampilan & Teknologi: Kompetensi teknis.
  • Informasi Kontak: Cara untuk terhubung.
  • Resume/CV: Resume PDF yang dapat diunduh.

Elemen Interaktif

  • Smooth Scrolling: Navigasi halaman yang mulus.
  • Efek Hover: Komponen UI yang interaktif.
  • Validasi Formulir: Formulir kontak dengan validasi.
  • Konten Dinamis: Fitur-fitur yang ditenagai JavaScript.
  • Menu Seluler: Navigasi responsif untuk perangkat mobile.

🛠️ Teknologi yang Digunakan

  • HTML5: Markup semantik.
  • CSS3: Styling tingkat lanjut (Flexbox, Grid, Animasi, Variabel CSS).
  • JavaScript: Fitur interaktif menggunakan Vanilla JS (tanpa framework).
  • Docker: Kontainerisasi (termasuk dockerfile).

📁 Struktur Proyek

portofolio-2/
├── index.html              # File HTML utama
├── css/
│   ├── style.css          # Stylesheet utama
│   ├── responsive.css     # Gaya khusus mobile
│   └── ...
├── js/
│   ├── main.js           # JavaScript inti
│   └── ...
├── images/                # Aset gambar dan ikon
├── CV.pdf                # Resume PDF (2.4 MB)
├── dockerfile            # Konfigurasi Docker
└── README.md

🚀 Memulai

Prasyarat

  • Browser web modern (Chrome, Firefox, Safari, Edge).
  • (Opsional) Docker untuk deployment dengan kontainer.

Menjalankan Secara Lokal

Opsi 1: Buka Langsung Cukup buka file index.html di browser Anda.

Opsi 2: Docker

# Build image Docker
docker build -t portfolio-2 .

# Jalankan kontainer
docker run -p 8080:80 portfolio-2

Akses di: http://localhost:8080

🎨 Peningkatan Desain dari Portofolio 1.0

Apa yang Lebih Baik

  • Desain Visual: Penampilan yang lebih dipoles dan profesional.
  • Kualitas Kode: Kode yang lebih terorganisir dan berkomentar.
  • Performa: Gambar dan aset yang dioptimalkan.
  • Aksesibilitas: Perbaikan HTML semantik.
  • Responsivitas: Pengalaman mobile yang lebih baik.

🎓 Hasil Pembelajaran

Membangun portofolio kedua ini mengajarkan saya:

  • Teknik CSS tingkat lanjut.
  • Praktik JavaScript yang lebih baik.
  • Rasa desain (design sense) yang meningkat.
  • Optimalisasi performa web.
  • Penguasaan desain responsif.

Evolusi Portofolio 💼✨
Menampilkan pertumbuhan, satu situs web pada satu waktu!