cindy
494 lines
27 KiB
HTML
494 lines
27 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="id">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Portfolio WebGIS – Cindy Dyra Islamay</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<style>
|
||
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
||
:root{
|
||
--mint:#2ECC8E;--mint-soft:#E6F9F2;--mint-mid:#A8EDD0;
|
||
--sky:#4FAAED;--sky-soft:#EAF4FD;
|
||
--coral:#FF7E6B;--coral-soft:#FFF0EE;
|
||
--amber:#F5A623;--amber-soft:#FEF5E7;
|
||
--white:#FFFFFF;--surface:#F7FAFA;--border:#E4EEF0;
|
||
--text-primary:#1A2B38;--text-secondary:#4A6274;--text-muted:#8AACBA;
|
||
--r-sm:10px;--r-md:16px;--r-lg:24px;--r-xl:32px
|
||
}
|
||
html{scroll-behavior:smooth}
|
||
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--white);color:var(--text-primary);overflow-x:hidden;line-height:1.6}
|
||
|
||
/* ── NAV ── */
|
||
nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:0 clamp(20px,5vw,80px)}
|
||
.nav-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:60px}
|
||
.nav-brand{font-size:15px;font-weight:700;color:var(--text-primary);text-decoration:none;display:flex;align-items:center;gap:8px}
|
||
.nav-dot{width:8px;height:8px;border-radius:50%;background:var(--mint)}
|
||
.nav-badge{font-size:12px;font-weight:600;color:var(--mint);background:var(--mint-soft);padding:4px 12px;border-radius:100px;border:1px solid var(--mint-mid)}
|
||
|
||
/* ── HERO ── */
|
||
.hero{background:var(--white);padding:80px clamp(20px,5vw,80px) 0;position:relative;overflow:hidden}
|
||
.hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(to bottom,transparent,var(--surface))}
|
||
.hero-bg-circle{position:absolute;border-radius:50%;pointer-events:none}
|
||
.hero-bg-circle.c1{width:480px;height:480px;background:radial-gradient(circle,#D4F5E8 0%,transparent 70%);top:-80px;right:-60px}
|
||
.hero-bg-circle.c2{width:320px;height:320px;background:radial-gradient(circle,#DFF0FC 0%,transparent 70%);bottom:40px;left:-80px}
|
||
.hero-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
|
||
.hero-text{}
|
||
.hero-pill{display:inline-flex;align-items:center;gap:8px;background:var(--mint-soft);color:#1A7A52;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:6px 14px;border-radius:100px;border:1px solid var(--mint-mid);margin-bottom:24px}
|
||
.hero-pill-dot{width:6px;height:6px;border-radius:50%;background:var(--mint);animation:blink 2s ease-in-out infinite}
|
||
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
|
||
.hero-title{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:800;line-height:1.1;color:var(--text-primary);margin-bottom:20px}
|
||
.hero-title em{font-style:normal;color:var(--mint)}
|
||
.hero-subtitle{font-size:1.05rem;color:var(--text-secondary);line-height:1.75;margin-bottom:36px;max-width:460px}
|
||
.hero-identity{display:flex;align-items:center;gap:14px}
|
||
.hero-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--mint),var(--sky));display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#fff;flex-shrink:0}
|
||
.hero-name{font-size:.95rem;font-weight:700;color:var(--text-primary)}
|
||
.hero-nim{font-size:.82rem;color:var(--text-muted);margin-top:2px}
|
||
.hero-visual{display:flex;justify-content:center;align-items:center;padding-bottom:40px}
|
||
.hero-globe-wrap{position:relative;width:360px;height:360px}
|
||
.globe-float{animation:float 6s ease-in-out infinite}
|
||
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
|
||
.globe-ring{position:absolute;border-radius:50%;border:1.5px dashed}
|
||
.globe-ring.r1{width:420px;height:420px;top:50%;left:50%;transform:translate(-50%,-50%);border-color:rgba(46,204,142,.15);animation:spin 24s linear infinite}
|
||
.globe-ring.r2{width:500px;height:500px;top:50%;left:50%;transform:translate(-50%,-50%);border-color:rgba(79,170,237,.1);animation:spin 36s linear infinite reverse}
|
||
@keyframes spin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
|
||
|
||
/* ── SECTION BRIDGE ── */
|
||
.section-bridge{background:var(--surface);padding:48px clamp(20px,5vw,80px)}
|
||
.bridge-inner{max-width:1120px;margin:0 auto;display:flex;gap:24px;flex-wrap:wrap}
|
||
.bridge-card{flex:1;min-width:200px;background:var(--white);border-radius:var(--r-md);border:1px solid var(--border);padding:24px;display:flex;align-items:flex-start;gap:16px;transition:transform .25s,box-shadow .25s}
|
||
.bridge-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,80,60,.07)}
|
||
.bridge-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
|
||
.bridge-icon svg{width:22px;height:22px}
|
||
.bridge-label{font-size:.8rem;color:var(--text-muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px}
|
||
.bridge-value{font-size:1.1rem;font-weight:700;color:var(--text-primary)}
|
||
|
||
/* ── PROJECTS SECTION ── */
|
||
.projects{background:var(--white);padding:80px clamp(20px,5vw,80px)}
|
||
.section-head{text-align:center;margin-bottom:60px}
|
||
.section-eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);margin-bottom:12px}
|
||
.section-title{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;color:var(--text-primary);line-height:1.2}
|
||
.section-desc{font-size:.98rem;color:var(--text-secondary);margin-top:12px;max-width:480px;margin-left:auto;margin-right:auto;line-height:1.7}
|
||
|
||
/* ── CARDS ── */
|
||
.cards{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px}
|
||
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.25,.8,.25,1),box-shadow .3s;opacity:0;transform:translateY(32px)}
|
||
.card.in{opacity:1;transform:translateY(0);transition:opacity .55s ease,transform .55s ease,box-shadow .3s,border-color .3s}
|
||
.card:hover{transform:translateY(-8px)!important;box-shadow:0 24px 56px rgba(0,0,0,.1)}
|
||
.card-thumb{height:180px;position:relative;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center}
|
||
.card-thumb-dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.5) 1px,transparent 1px);background-size:20px 20px}
|
||
.card-number{position:absolute;top:16px;left:16px;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--text-primary)}
|
||
.card-icon-wrap{width:80px;height:80px;border-radius:24px;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:transform .3s}
|
||
.card:hover .card-icon-wrap{transform:scale(1.08) rotate(-3deg)}
|
||
.card-icon-wrap svg{width:40px;height:40px}
|
||
.card-body{padding:28px;flex:1;display:flex;flex-direction:column}
|
||
.card-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:100px;margin-bottom:14px}
|
||
.card-title{font-size:1.15rem;font-weight:800;color:var(--text-primary);line-height:1.3;margin-bottom:10px}
|
||
.card-desc{font-size:.9rem;color:var(--text-secondary);line-height:1.75;flex:1;margin-bottom:24px}
|
||
.card-btn{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:700;text-decoration:none;padding:12px 22px;border-radius:100px;transition:gap .2s,opacity .2s;align-self:flex-start}
|
||
.card-btn:hover{gap:14px;opacity:.88}
|
||
.card-btn svg{width:15px;height:15px;transition:transform .2s}
|
||
.card-btn:hover svg{transform:translateX(3px)}
|
||
|
||
/* card color themes */
|
||
.card.theme-green .card-thumb{background:linear-gradient(135deg,#D0F5E6,#A8EDD6)}
|
||
.card.theme-green .card-tag{background:#D4F5E8;color:#0E6640}
|
||
.card.theme-green .card-btn{background:#2ECC8E;color:#fff}
|
||
.card.theme-blue .card-thumb{background:linear-gradient(135deg,#D6EEFF,#B8DAFF)}
|
||
.card.theme-blue .card-tag{background:#DFF0FC;color:#1155A0}
|
||
.card.theme-blue .card-btn{background:#4FAAED;color:#fff}
|
||
.card.theme-coral .card-thumb{background:linear-gradient(135deg,#FFE8E4,#FFCFC8)}
|
||
.card.theme-coral .card-tag{background:#FFF0EE;color:#B33922}
|
||
.card.theme-coral .card-btn{background:#FF7E6B;color:#fff}
|
||
|
||
/* ── FEATURES STRIP ── */
|
||
.features{background:var(--surface);padding:72px clamp(20px,5vw,80px)}
|
||
.features-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
|
||
.features-text .section-eyebrow{text-align:left}
|
||
.features-text .section-title{text-align:left}
|
||
.features-list{margin-top:32px;display:flex;flex-direction:column;gap:20px}
|
||
.feature-item{display:flex;align-items:flex-start;gap:16px}
|
||
.feature-check{width:36px;height:36px;border-radius:10px;background:var(--mint-soft);border:1px solid var(--mint-mid);display:flex;align-items:center;justify-content:center;flex-shrink:0}
|
||
.feature-check svg{width:18px;height:18px;color:var(--mint)}
|
||
.feature-title{font-size:.95rem;font-weight:700;color:var(--text-primary);margin-bottom:3px}
|
||
.feature-desc{font-size:.86rem;color:var(--text-secondary);line-height:1.65}
|
||
.features-visual{background:var(--white);border-radius:var(--r-xl);border:1px solid var(--border);padding:32px;display:flex;flex-direction:column;gap:16px}
|
||
.feat-bar-label{display:flex;justify-content:space-between;align-items:center;font-size:.82rem}
|
||
.feat-bar-name{color:var(--text-secondary);font-weight:600}
|
||
.feat-bar-val{color:var(--text-primary);font-weight:700}
|
||
.feat-bar-track{height:8px;background:#EDF2F5;border-radius:100px;overflow:hidden}
|
||
.feat-bar-fill{height:100%;border-radius:100px;transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.4,0,.2,1)}
|
||
.feat-bar-fill.go{transform:scaleX(1)}
|
||
.fv-projects{display:flex;flex-direction:column;gap:0}
|
||
.fv-row{padding:18px 0}
|
||
.fv-divider{height:1px;background:var(--border)}
|
||
.fv-row-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
|
||
.fv-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
|
||
.fv-row-name{font-size:.9rem;font-weight:700;color:var(--text-primary)}
|
||
.fv-tags{display:flex;flex-wrap:wrap;gap:8px}
|
||
.fv-tag{font-size:.78rem;font-weight:600;padding:4px 12px;border-radius:100px;letter-spacing:.02em}
|
||
|
||
/* ── FOOTER ── */
|
||
footer{background:#0f6543;padding:48px clamp(20px,5vw,80px);text-align:center}
|
||
.footer-logo{font-size:1.1rem;font-weight:800;color:var(--white);margin-bottom:8px}
|
||
.footer-logo span{color:var(--white)}
|
||
.footer-sub{font-size:.85rem;color:#ffffff;margin-top:4px}
|
||
.footer-line{width:40px;height:2px;background:var(--white);border-radius:2px;margin:20px auto}
|
||
|
||
/* ── RESPONSIVE ── */
|
||
@media(max-width:900px){
|
||
.hero-inner{grid-template-columns:1fr;text-align:center;gap:40px}
|
||
.hero-identity{justify-content:center}
|
||
.hero-subtitle{margin-left:auto;margin-right:auto}
|
||
.hero-visual{padding-bottom:0}
|
||
.hero-globe-wrap{width:260px;height:260px}
|
||
.features-inner{grid-template-columns:1fr}
|
||
}
|
||
@media(max-width:600px){
|
||
.hero{padding-top:52px}
|
||
.projects{padding:52px 16px}
|
||
.features{padding:52px 16px}
|
||
.section-bridge{padding:32px 16px}
|
||
.cards{grid-template-columns:1fr;gap:20px}
|
||
.bridge-card{min-width:150px}
|
||
footer{padding:40px 16px}
|
||
}
|
||
@media(prefers-reduced-motion:reduce){
|
||
.globe-float,.globe-ring,.hero-bg-circle,.feat-bar-fill,.card,.blink{animation:none;transition:none}
|
||
.card{opacity:1;transform:none}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- NAV -->
|
||
<nav>
|
||
<div class="nav-inner">
|
||
<a class="nav-brand" href="#">
|
||
<span class="nav-dot"></span>
|
||
WebGIS Portfolio
|
||
</a>
|
||
<span class="nav-badge">SIG · 2026</span>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- HERO -->
|
||
<section class="hero">
|
||
<div class="hero-bg-circle c1" aria-hidden="true"></div>
|
||
<div class="hero-bg-circle c2" aria-hidden="true"></div>
|
||
<div class="hero-inner">
|
||
<div class="hero-text">
|
||
<div class="hero-pill">
|
||
<span class="hero-pill-dot"></span>
|
||
Sistem Informasi Geografis
|
||
</div>
|
||
<h1 class="hero-title">Portfolio Proyek<br><em>WebGIS</em></h1>
|
||
<p class="hero-subtitle">
|
||
Kumpulan aplikasi pemetaan berbasis web yang dikembangkan untuk
|
||
memvisualisasikan dan menganalisis data geografis menggunakan
|
||
teknologi WebGIS modern.
|
||
</p>
|
||
<div class="hero-identity">
|
||
<div class="hero-avatar">CD</div>
|
||
<div>
|
||
<div class="hero-name">Cindy Dyra Islamay</div>
|
||
<div class="hero-nim">NIM: D1041231045</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-visual" aria-hidden="true">
|
||
<div class="hero-globe-wrap">
|
||
<div class="globe-ring r1"></div>
|
||
<div class="globe-ring r2"></div>
|
||
<svg class="globe-float" viewBox="0 0 360 360" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<!-- soft background disc -->
|
||
<circle cx="180" cy="180" r="160" fill="#EDF8F3"/>
|
||
<circle cx="180" cy="180" r="140" fill="#F5FBF8"/>
|
||
<!-- grid lines -->
|
||
<ellipse cx="180" cy="180" rx="140" ry="56" stroke="#B0E8CF" stroke-width="1.5" fill="none"/>
|
||
<ellipse cx="180" cy="180" rx="140" ry="100" stroke="#B0E8CF" stroke-width="1" fill="none"/>
|
||
<line x1="180" y1="40" x2="180" y2="320" stroke="#B0E8CF" stroke-width="1" stroke-dasharray="6,5"/>
|
||
<line x1="40" y1="180" x2="320" y2="180" stroke="#B0E8CF" stroke-width="1"/>
|
||
<line x1="68" y1="100" x2="292" y2="100" stroke="#C8EEE0" stroke-width="1" stroke-dasharray="4,4"/>
|
||
<line x1="68" y1="260" x2="292" y2="260" stroke="#C8EEE0" stroke-width="1" stroke-dasharray="4,4"/>
|
||
<!-- landmass blobs -->
|
||
<path d="M120,140 Q140,120 170,128 Q195,120 205,135 Q220,130 228,148 Q240,155 232,170 Q240,185 225,192 Q215,210 200,202 Q185,215 168,208 Q148,212 138,198 Q118,195 112,180 Q100,165 120,140Z" fill="#A8DDBB" opacity=".9"/>
|
||
<path d="M200,150 Q215,144 226,152 Q238,148 242,162 Q252,170 244,180 Q248,192 236,196 Q226,206 216,198 Q204,202 198,190 Q188,182 196,170 Q188,158 200,150Z" fill="#90D5AC" opacity=".8"/>
|
||
<path d="M130,200 Q144,190 156,196 Q166,188 175,198 Q185,196 188,208 Q194,218 184,224 Q178,234 166,228 Q154,234 144,224 Q132,222 128,212 Q122,204 130,200Z" fill="#A8DDBB" opacity=".75"/>
|
||
<path d="M105,156 Q112,148 122,154 Q130,148 134,160 Q140,168 132,174 Q134,184 124,186 Q114,190 106,182 Q98,176 100,166 Q96,158 105,156Z" fill="#90D5AC" opacity=".7"/>
|
||
<!-- pin markers -->
|
||
<g filter="url(#pinShadow)">
|
||
<circle cx="180" cy="165" r="10" fill="#2ECC8E"/>
|
||
<circle cx="180" cy="165" r="5" fill="white"/>
|
||
<circle cx="180" cy="165" r="18" fill="#2ECC8E" opacity=".2"/>
|
||
</g>
|
||
<g>
|
||
<circle cx="145" cy="175" r="7" fill="#4FAAED"/>
|
||
<circle cx="145" cy="175" r="3.5" fill="white"/>
|
||
</g>
|
||
<g>
|
||
<circle cx="218" cy="170" r="7" fill="#FF7E6B"/>
|
||
<circle cx="218" cy="170" r="3.5" fill="white"/>
|
||
</g>
|
||
<!-- outer border -->
|
||
<circle cx="180" cy="180" r="140" stroke="#7DD8B0" stroke-width="2" fill="none"/>
|
||
<defs>
|
||
<filter id="pinShadow" x="-50%" y="-50%" width="200%" height="200%">
|
||
<feDropShadow dx="0" dy="4" stdDeviation="4" flood-color="#2ECC8E" flood-opacity=".35"/>
|
||
</filter>
|
||
</defs>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- BRIDGE STRIP -->
|
||
<div class="section-bridge">
|
||
<div class="bridge-inner">
|
||
<div class="bridge-card">
|
||
<div class="bridge-icon" style="background:#E6F9F2">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="#2ECC8E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="bridge-label">Total Proyek</div>
|
||
<div class="bridge-value">3 Aplikasi WebGIS</div>
|
||
</div>
|
||
</div>
|
||
<div class="bridge-card">
|
||
<div class="bridge-icon" style="background:#EAF4FD">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="#4FAAED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="bridge-label">Wilayah Studi</div>
|
||
<div class="bridge-value">Kota Pontianak</div>
|
||
</div>
|
||
</div>
|
||
<div class="bridge-card">
|
||
<div class="bridge-icon" style="background:#FEF5E7">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="#F5A623" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="bridge-label">Teknologi</div>
|
||
<div class="bridge-value">Leaflet.js · GeoJSON</div>
|
||
</div>
|
||
</div>
|
||
<div class="bridge-card">
|
||
<div class="bridge-icon" style="background:#FFF0EE">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="#FF7E6B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="bridge-label">Mata Kuliah</div>
|
||
<div class="bridge-value">Sistem Informasi Geografis C</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PROJECTS -->
|
||
<section class="projects">
|
||
<div class="section-head">
|
||
<div class="section-eyebrow">Koleksi Karya</div>
|
||
<h2 class="section-title">Proyek yang Dikembangkan</h2>
|
||
<p class="section-desc">Setiap aplikasi dirancang untuk menjawab kebutuhan analisis spasial yang nyata di wilayah Kota Pontianak.</p>
|
||
</div>
|
||
<div class="cards">
|
||
|
||
<!-- Card 1 -->
|
||
<article class="card theme-green" data-delay="0">
|
||
<div class="card-thumb">
|
||
<div class="card-thumb-dots"></div>
|
||
<span class="card-number">01</span>
|
||
<div class="card-icon-wrap">
|
||
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="24" cy="24" r="22" fill="#D0F5E6"/>
|
||
<path d="M24 12C18.48 12 14 16.48 14 22c0 7.5 10 18 10 18s10-10.5 10-18c0-5.52-4.48-10-10-10zm0 13a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#2ECC8E"/>
|
||
<circle cx="33" cy="14" r="4" fill="#A8EDD0" stroke="#2ECC8E" stroke-width="1.5"/>
|
||
<circle cx="15" cy="32" r="3" fill="#A8EDD0" stroke="#2ECC8E" stroke-width="1.5"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<span class="card-tag">Pemetaan Fasilitas</span>
|
||
<h3 class="card-title">Mapping SPBU</h3>
|
||
<p class="card-desc">Aplikasi WebGIS untuk pemetaan lokasi stasiun pengisian bahan bakar umum (SPBU) dengan fitur visualisasi interaktif dan manajemen data geografis.</p>
|
||
<a href="http://gosoks4sgcs408gswgw48o40.203.24.51.230.sslip.io" class="card-btn" target="_blank" rel="noopener">
|
||
Buka Proyek
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||
</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Card 2 -->
|
||
<article class="card theme-blue" data-delay="120">
|
||
<div class="card-thumb">
|
||
<div class="card-thumb-dots"></div>
|
||
<span class="card-number">02</span>
|
||
<div class="card-icon-wrap">
|
||
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="24" cy="24" r="22" fill="#D6EEFF"/>
|
||
<rect x="10" y="14" width="12" height="10" rx="2" fill="#B8DAFF"/>
|
||
<rect x="26" y="10" width="12" height="14" rx="2" fill="#4FAAED"/>
|
||
<rect x="10" y="28" width="12" height="10" rx="2" fill="#4FAAED" opacity=".6"/>
|
||
<rect x="26" y="28" width="12" height="10" rx="2" fill="#B8DAFF"/>
|
||
<line x1="10" y1="38" x2="38" y2="38" stroke="#4FAAED" stroke-width="1.5"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<span class="card-tag">Demografi</span>
|
||
<h3 class="card-title">Choropleth Map – Kepadatan Penduduk Kota Pontianak</h3>
|
||
<p class="card-desc">Visualisasi peta choropleth yang menampilkan distribusi kepadatan penduduk di Kota Pontianak menggunakan gradasi warna untuk analisis demografis.</p>
|
||
<a href="http://d0840kkc88w8gc4sc0c4swss.203.24.51.230.sslip.io" class="card-btn" target="_blank" rel="noopener">
|
||
Buka Proyek
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||
</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Card 3 -->
|
||
<article class="card theme-coral" data-delay="240">
|
||
<div class="card-thumb">
|
||
<div class="card-thumb-dots"></div>
|
||
<span class="card-number">03</span>
|
||
<div class="card-icon-wrap">
|
||
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="24" cy="24" r="22" fill="#FFE8E4"/>
|
||
<circle cx="16" cy="20" r="5" fill="#FF7E6B" opacity=".7"/>
|
||
<circle cx="30" cy="16" r="4" fill="#FFCFC8" stroke="#FF7E6B" stroke-width="1.5"/>
|
||
<circle cx="26" cy="30" r="4" fill="#FFCFC8" stroke="#FF7E6B" stroke-width="1.5"/>
|
||
<line x1="16" y1="20" x2="30" y2="16" stroke="#FF7E6B" stroke-width="1.5" stroke-dasharray="4,3"/>
|
||
<line x1="30" y1="16" x2="26" y2="30" stroke="#FF7E6B" stroke-width="1.5" stroke-dasharray="4,3"/>
|
||
<line x1="16" y1="20" x2="26" y2="30" stroke="#FF7E6B" stroke-width="1.5" stroke-dasharray="4,3"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<span class="card-tag">Analisis Sosial</span>
|
||
<h3 class="card-title">WebGIS Pemetaan Kemiskinan</h3>
|
||
<p class="card-desc">Aplikasi WebGIS yang memetakan distribusi spasial rumah tangga berpenghasilan rendah dan menghubungkannya dengan tempat ibadah sebagai pusat distribusi bantuan.</p>
|
||
<a href="http://qskgcck8cwgkk048k0wgsooo.203.24.51.230.sslip.io/index.html" class="card-btn" target="_blank" rel="noopener">
|
||
Buka Proyek
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||
</a>
|
||
</div>
|
||
</article>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FEATURES STRIP -->
|
||
<section class="features">
|
||
<div class="features-inner">
|
||
<div class="features-text">
|
||
<div class="section-eyebrow">Kemampuan Teknis</div>
|
||
<h2 class="section-title">Dibangun dengan Teknologi WebGIS Modern</h2>
|
||
<div class="features-list">
|
||
<div class="feature-item">
|
||
<div class="feature-check">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="feature-title">Peta Interaktif Berbasis Web</div>
|
||
<div class="feature-desc">Visualisasi data geografis yang dapat dijelajahi langsung di browser tanpa instalasi tambahan.</div>
|
||
</div>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-check">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="feature-title">Analisis Data Spasial</div>
|
||
<div class="feature-desc">Pengolahan dan interpretasi data geografis untuk menghasilkan wawasan berbasis lokasi.</div>
|
||
</div>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-check">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="feature-title">Desain Responsif & Aksesibel</div>
|
||
<div class="feature-desc">Antarmuka yang menyesuaikan tampilan di berbagai ukuran layar dari desktop hingga ponsel.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="features-visual">
|
||
<p style="font-size:.82rem;font-weight:700;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:20px">Stack Teknologi per Proyek</p>
|
||
<div class="fv-projects">
|
||
|
||
<div class="fv-row">
|
||
<div class="fv-row-header">
|
||
<span class="fv-dot" style="background:#2ECC8E"></span>
|
||
<span class="fv-row-name">Mapping SPBU</span>
|
||
</div>
|
||
<div class="fv-tags">
|
||
<span class="fv-tag" style="background:#E6F9F2;color:#0E6640">Leaflet.js</span>
|
||
<span class="fv-tag" style="background:#E6F9F2;color:#0E6640">GeoJSON</span>
|
||
<span class="fv-tag" style="background:#E6F9F2;color:#0E6640">Layer Control</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fv-divider"></div>
|
||
|
||
<div class="fv-row">
|
||
<div class="fv-row-header">
|
||
<span class="fv-dot" style="background:#4FAAED"></span>
|
||
<span class="fv-row-name">Choropleth Kepadatan</span>
|
||
</div>
|
||
<div class="fv-tags">
|
||
<span class="fv-tag" style="background:#EAF4FD;color:#1155A0">Leaflet.js</span>
|
||
<span class="fv-tag" style="background:#EAF4FD;color:#1155A0">Choropleth</span>
|
||
<span class="fv-tag" style="background:#EAF4FD;color:#1155A0">GeoJSON</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fv-divider"></div>
|
||
|
||
<div class="fv-row">
|
||
<div class="fv-row-header">
|
||
<span class="fv-dot" style="background:#FF7E6B"></span>
|
||
<span class="fv-row-name">Pemetaan Kemiskinan</span>
|
||
</div>
|
||
<div class="fv-tags">
|
||
<span class="fv-tag" style="background:#FFF0EE;color:#B33922">Leaflet.js</span>
|
||
<span class="fv-tag" style="background:#FFF0EE;color:#B33922">Chart.js</span>
|
||
<span class="fv-tag" style="background:#FFF0EE;color:#B33922">GeoJSON</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer>
|
||
<div class="footer-logo">WebGIS<span>.</span></div>
|
||
<div class="footer-sub">Cindy Dyra Islamay · NIM D1041231045</div>
|
||
<div class="footer-line"></div>
|
||
<div style="font-size:.82rem;color:#ffffff">© 2026 Portfolio Proyek Sistem Informasi Geografis</div>
|
||
</footer>
|
||
|
||
<script>
|
||
(function(){
|
||
// card entrance
|
||
var cards=document.querySelectorAll('.card');
|
||
var io=new IntersectionObserver(function(entries){
|
||
entries.forEach(function(e){
|
||
if(!e.isIntersecting)return;
|
||
var d=parseInt(e.target.dataset.delay||0);
|
||
setTimeout(function(){e.target.classList.add('in')},d);
|
||
io.unobserve(e.target);
|
||
});
|
||
},{threshold:0.1});
|
||
cards.forEach(function(c){io.observe(c)});
|
||
|
||
// nav shadow on scroll
|
||
var nav=document.querySelector('nav');
|
||
window.addEventListener('scroll',function(){
|
||
nav.style.boxShadow=window.scrollY>10?'0 2px 16px rgba(0,60,40,.07)':'none';
|
||
},{passive:true});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html> |