Halo, Nama Saya

Refan Setiawan

Saya seorang manusia Makan Nasi.

Hubungi Saya Lihat Proyek

Foto Profil

Tentang Saya

Saya memiliki pengalaman dalam membangun situs web yang responsif dan ramah pengguna. Saya menguasai HTML, CSS, JavaScript, serta beberapa kerangka kerja modern seperti React dan Tailwind CSS.

Selain coding, saya juga memiliki ketertarikan mendalam pada desain grafis dan tata letak UI/UX untuk memastikan pengalaman pengguna yang optimal.

Proyek Unggulan

Proyek 1

Website E-Commerce

Platform toko online lengkap dengan sistem keranjang belanja dan desain responsif.

Lihat Detail
Proyek 2

Aplikasi Manajemen Tugas

Aplikasi web interaktif untuk membantu produktivitas harian dan pengelolaan tim.

Lihat Detail
Proyek 3

Dashboard Analitik

Antarmuka dasbor visualisasi data modern menggunakan kerangka kerja frontend.

Lihat Detail

Hubungi Saya

Tertarik untuk bekerja sama atau ingin sekadar berdiskusi? Jangan ragu untuk menghubungi saya melalui platform di bawah ini.

Kirim Email
text-transform: uppercase; } .hero-meta { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 16px; } .match-score { color: #46d369; font-weight: 700; } .rating-box { border: 1px solid var(--text-muted); padding: 1px 5px; font-size: 0.75rem; } .hero-desc { font-size: 0.95rem; color: #d2d2d2; margin-bottom: 20px; } .hero-btns { display: flex; gap: 12px; } .btn-play { background-color: var(--text-main); color: black; border: none; padding: 10px 24px; font-size: 1rem; font-weight: 700; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.2s; } .btn-play:hover { background-color: rgba(255, 255, 255, 0.75); } .main-container { padding: 0 5% 60px; margin-top: -20px; position: relative; z-index: 10; } .row-header { font-size: 1.3rem; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } .poster-card { background-color: var(--card-bg); border-radius: 6px; overflow: hidden; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; border: 1px solid var(--border-color); } .poster-card:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(0,0,0,0.8); z-index: 20; } .poster-img-wrapper { position: relative; width: 100%; padding-top: 130%; } .poster-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .poster-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%); padding: 12px; } .poster-title { font-size: 0.95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .poster-role { font-size: 0.75rem; color: var(--accent-red); font-weight: 600; } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 1000; padding: 20px; } .modal-overlay.active { opacity: 1; visibility: visible; } .modal-box { background-color: var(--card-bg); width: 100%; max-width: 650px; border-radius: 8px; overflow: hidden; position: relative; transform: scale(0.9); transition: transform 0.3s ease; box-shadow: 0 20px 40px rgba(0,0,0,0.9); border: 1px solid var(--border-color); } .modal-overlay.active .modal-box { transform: scale(1); } .modal-close-btn { position: absolute; top: 15px; right: 15px; background: #181818; border: 1px solid rgba(255,255,255,0.2); color: white; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 1.1rem; z-index: 10; display: flex; align-items: center; justify-content: center; } .modal-banner { position: relative; height: 220px; background-size: cover; background-position: center; } .modal-banner-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(24,24,24,0) 40%, rgba(24,24,24,1) 100%); display: flex; align-items: flex-end; padding: 20px; } .modal-body { padding: 0 24px 24px; } .modal-header-info { margin-bottom: 16px; } .modal-name { font-size: 1.8rem; font-weight: 800; } .modal-role-badge { color: var(--accent-red); font-size: 0.9rem; font-weight: 700; margin-bottom: 8px; } .modal-stats { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 16px; } .modal-bio { font-size: 0.95rem; color: #cccccc; margin-bottom: 20px; line-height: 1.6; } .skills-heading { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 10px; font-weight: 700; } .skills-container { display: flex; flex-wrap: wrap; gap: 8px; } .skill-tag { background-color: rgba(255, 255, 255, 0.1); color: var(--text-main); font-size: 0.8rem; padding: 5px 12px; border-radius: 4px; font-weight: 600; border: 1px solid var(--border-color); } footer { text-align: center; padding: 30px; border-top: 1px solid var(--border-color); color: var(--text-muted); font-size: 0.8rem; } @media (max-width: 600px) { .hero-title { font-size: 2.1rem; } .hero-banner { height: 60vh; } .cast-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .modal-banner { height: 160px; } } .cs-float-btn { position: fixed; bottom: 25px; right: 25px; background: #e50914; color: white; padding: 12px 20px; border-radius: 50px; display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 0.9rem; box-shadow: 0 4px 15px rgba(0,0,0,0.5); z-index: 999; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid rgba(255,255,255,0.2); } .cs-float-btn:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 8px 25px rgba(229, 9, 20, 0.4); } .cs-float-btn i { font-size: 1.3rem; } @media (max-width: 600px) { .cs-float-btn span { display: none; } .cs-float-btn { padding: 14px; border-radius: 50%; bottom: 20px; right: 20px; } } .top-announcement { position: fixed; top: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); color: var(--text-main); padding: 8px 0; font-size: 0.85rem; font-weight: 700; z-index: 1000; border-bottom: 1px solid var(--border-color); box-shadow: 0 2px 10px rgba(0,0,0,0.8); overflow: hidden; white-space: nowrap; } .top-announcement p { display: inline-block; padding-left: 100%; animation: marquee 10s linear infinite; } @keyframes marquee { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

Website di update setiap malam Kalau Inget

A PORTOFLIX ORIGINAL

Sixty-seven

67% Match 21+ 7 Anggota Kelompok HD / 4K

Selamat datang di PortoFlix! Platform interaktif untuk menjelajahi profil serta Hobby dari setiap anggota Kelompok 3.

Anggota Kelompok
Kritik & Saran