Vercel
tcp/443 tcp/80
Open service 216.198.79.65:443 · rafly.codeathome.id
2026-01-12 07:33
HTTP/1.1 200 OK
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
Age: 13
Cache-Control: public, max-age=0, must-revalidate
Content-Disposition: inline
Content-Length: 72531
Content-Type: text/html; charset=utf-8
Date: Mon, 12 Jan 2026 07:33:49 GMT
Etag: "bab2e0ef42a68d1c08ce32205b00f80e"
Last-Modified: Mon, 12 Jan 2026 07:33:35 GMT
Server: Vercel
Strict-Transport-Security: max-age=63072000
X-Vercel-Cache: HIT
X-Vercel-Id: iad1::7fm4t-1768203229845-ac397e3ba69c
Connection: close
Page title: Professional Portfolio | Your Name
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Professional portfolio showcasing innovative projects and expertise in web development and design.">
<title>Professional Portfolio | Your Name</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@600;700&display=swap"
rel="stylesheet">
<style>
/* ===== CSS RESET & BASE ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Color Palette */
--navy-deep: #0A1628;
--navy-primary: #1A2942;
--navy-light: #2C3E5C;
--white-crisp: #FFFFFF;
--white-soft: #F8F9FA;
--silver: #C0C5CE;
--silver-light: #E8EAED;
--accent-silver: #A8B2C1;
/* Typography */
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-display: 'Playfair Display', Georgia, serif;
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 4rem;
--spacing-xl: 6rem;
/* Transitions */
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: var(--font-primary);
background-color: var(--white-crisp);
color: var(--navy-primary);
line-height: 1.6;
overflow-x: hidden;
}
/* ===== TYPOGRAPHY ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
line-height: 1.2;
color: var(--navy-deep);
}
h1 {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 700;
letter-spacing: -0.02em;
}
h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 700;
letter-spacing: -0.01em;
}
h3 {
font-size: clamp(1.5rem, 3vw, 2rem);
}
p {
font-size: 1.125rem;
line-height: 1.8;
color: var(--navy-light);
}
/* ===== ABSTRACT BACKGROUND ===== */
body {
position: relative;
background: linear-gradient(-45deg, #f8f9fa, #ffffff, #f0f2f5, #fafbfc);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
opacity: 0.5;
background-image:
/* Large circles */
radial-gradient(circle 100px at 10% 20%, rgba(192, 197, 206, 0.3) 0%, transparent 100%),
radial-gradient(circle 150px at 90% 80%, rgba(10, 22, 40, 0.15) 0%, transparent 100%),
radial-gradient(circle 80px at 85% 15%, rgba(192, 197, 206, 0.25) 0%, transparent 100%),
/* Small circles */
radial-gradient(circle 40px at 15% 70
Open service 216.198.79.65:80 · rafly.codeathome.id
2026-01-12 07:33
HTTP/1.0 308 Permanent Redirect Content-Type: text/plain Location: https://rafly.codeathome.id/ Refresh: 0;url=https://rafly.codeathome.id/ server: Vercel Redirecting...
Open service 64.29.17.65:80 · rafly.codeathome.id
2026-01-12 07:33
HTTP/1.0 308 Permanent Redirect Content-Type: text/plain Location: https://rafly.codeathome.id/ Refresh: 0;url=https://rafly.codeathome.id/ server: Vercel Redirecting...
Open service 64.29.17.65:443 · rafly.codeathome.id
2026-01-12 07:33
HTTP/1.1 200 OK
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
Age: 13
Cache-Control: public, max-age=0, must-revalidate
Content-Disposition: inline
Content-Length: 72531
Content-Type: text/html; charset=utf-8
Date: Mon, 12 Jan 2026 07:33:49 GMT
Etag: "bab2e0ef42a68d1c08ce32205b00f80e"
Last-Modified: Mon, 12 Jan 2026 07:33:35 GMT
Server: Vercel
Strict-Transport-Security: max-age=63072000
X-Vercel-Cache: HIT
X-Vercel-Id: iad1::xfzkk-1768203229821-48241d68df99
Connection: close
Page title: Professional Portfolio | Your Name
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Professional portfolio showcasing innovative projects and expertise in web development and design.">
<title>Professional Portfolio | Your Name</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@600;700&display=swap"
rel="stylesheet">
<style>
/* ===== CSS RESET & BASE ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Color Palette */
--navy-deep: #0A1628;
--navy-primary: #1A2942;
--navy-light: #2C3E5C;
--white-crisp: #FFFFFF;
--white-soft: #F8F9FA;
--silver: #C0C5CE;
--silver-light: #E8EAED;
--accent-silver: #A8B2C1;
/* Typography */
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-display: 'Playfair Display', Georgia, serif;
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 4rem;
--spacing-xl: 6rem;
/* Transitions */
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: var(--font-primary);
background-color: var(--white-crisp);
color: var(--navy-primary);
line-height: 1.6;
overflow-x: hidden;
}
/* ===== TYPOGRAPHY ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
line-height: 1.2;
color: var(--navy-deep);
}
h1 {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 700;
letter-spacing: -0.02em;
}
h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 700;
letter-spacing: -0.01em;
}
h3 {
font-size: clamp(1.5rem, 3vw, 2rem);
}
p {
font-size: 1.125rem;
line-height: 1.8;
color: var(--navy-light);
}
/* ===== ABSTRACT BACKGROUND ===== */
body {
position: relative;
background: linear-gradient(-45deg, #f8f9fa, #ffffff, #f0f2f5, #fafbfc);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
opacity: 0.5;
background-image:
/* Large circles */
radial-gradient(circle 100px at 10% 20%, rgba(192, 197, 206, 0.3) 0%, transparent 100%),
radial-gradient(circle 150px at 90% 80%, rgba(10, 22, 40, 0.15) 0%, transparent 100%),
radial-gradient(circle 80px at 85% 15%, rgba(192, 197, 206, 0.25) 0%, transparent 100%),
/* Small circles */
radial-gradient(circle 40px at 15% 70