Website Portofolio Pribadi
Website portofolio interaktif & responsif berbasis Astro 5 dan Google Sheets CMS yang memamerkan prestasi Juara 1 LKS, keahlian IT Network System Administration, serta otomatisasi AI.
Background / Problem Statement
Sebagai seorang Spesialis Administrasi Jaringan & AI Prompt Engineering sekaligus pemenang Juara 1 LKS (Lomba Kompetensi Siswa) Bidang IT Network System Administration Kabupaten Purworejo 2026, menyajikan kredensial keahlian teknis yang mencakup infrastruktur fisik (hardware/cabling), jaringan (Cisco, MikroTik), administrasi server (Linux, Windows Server), hingga integrasi AI secara profesional membutuhkan platform yang modern, super cepat, dan mudah diakses.
Website portofolio ini dibangun untuk menggantikan daftar riwayat hidup konvensional menjadi sebuah antarmuka interaktif bilingual (ID/EN) yang sangat ringan. Fokus utamanya adalah memamerkan empat pilar kompetensi utama dan rekam jejak proyek lab secara terstruktur tanpa mengorbankan kecepatan aksesibilitas maupun performa rendering.
Architecture / Tech Stack
Website ini dirancang menggunakan pendekatan Static Site Generation (SSG) modern yang mengutamakan performa ekstrem (skor 100/100 di Google PageSpeed Insights) dan nol kelebihan overhead JavaScript:
- Framework Core: Astro 5 untuk performa zero-JS by default, pengorganisasian komponen modular, preloading font (DM Sans, DM Serif Display, JetBrains Mono), dan kompilasi statis cepat.
- Headless CMS / Data Source: Google Sheets API (endpoint
gviz/tq) sebagai Headless CMS publik untuk update data proyek & laboratorium secara real-time langsung dari lembar kerja tanpa memerlukan redeployment. - Styling & Design System: Custom Vanilla CSS dengan variabel warna HSL (
global.css), kartu glass-morphism (.glass-card), indikator glowing gradient scroll progress bar, mikro-animasifadeSlideUp, anti-FOUC script, serta tata letak responsif penuh. - Internationalization (i18n): Client-side DOM translation (
src/i18n/ui.ts&FloatingLang.astro) yang tersimpan dilocalStorage.langtanpa perantara reload halaman. - Aksesibilitas & SEO: Skip-to-content link, ARIA live region, penanganan fokus menu mobile, metadata dinamis, serta otomasi XML Sitemap via
@astrojs/sitemap. - Deployment & Hosting: Cloudflare Pages untuk distribusi edge network global (
https://fatahmr.my.id), dengan Vercel digunakan untuk staging/testing (https://redesign-portfolio.vercel.app/).
Key Features & Competency Pillars
- Comprehensive Technical Skills Showcase: Mengelompokkan kompetensi teknis secara mendalam ke dalam pilar-pilar utama:
- Network Administration: Routing, Switching, VLAN, BGP/OSPF, Cisco IOS, MikroTik RouterOS, Network Troubleshooting, dan Firewall Rules.
- System & Server Management: Linux (Debian 12/13, Ubuntu, CentOS), Windows Server 2022, Active Directory (ADDS), Bind9 DNS, DHCP, Web Server (Apache/Nginx), Nftables, VRRP Redundancy, dan HAProxy Load Balancing.
- AI Prompt Engineering & Automation: LLM Prompt Design, System Prompts, Chain-of-Thought (CoT), Automated Diagnostics, dan AI-Assisted Shell Scripting.
- Perangkat Keras & Pengkabelan: Perakitan PC, UTP Crimping, Fiber Optic Splicing, Fast Connector, OPM & VFL Testing, hingga Manajemen Rack Server.
- Web Development & CMS: HTML5, Vanilla CSS, JavaScript, Astro 5 Framework, Git Version Control, serta Integrasi Google Sheets Headless CMS.
- Highlight Prestasi LKS 2026: Menampilkan pencapaian Juara 1 Lomba Kompetensi Siswa (LKS) Bidang IT Network System Administration.
- Bilingual Internationalization (ID/EN): Fitur pengalihan bahasa instan untuk menjangkau perekrut lokal maupun internasional.
- Integrated Project Lab & Certifications: Galeri pengujian topologi jaringan, sertifikasi teknis terverifikasi, dan transkrip interaktif.
Outcomes / Lessons Learned
- Performa Maksimal: Penggunaan Astro 5 bersama Vanilla CSS murni menghasilkan skor 100/100 pada pengujian Google PageSpeed Insights dengan load time di bawah 1 detik.
- Manajemen Konten Tanpa Deploy: Integrasi Google Sheets API terbukti memudahkan pembaruan proyek laboratorium secara fleksibel tanpa perlu memicu rebuild aplikasi.
- Otomatisasi Workflow AI: Penerapan AI Prompt Engineering berhasil mempercepat proses otomatisasi skrip administrasi server dan efisiensi troubleshooting jaringan.