<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Your Name ― Profile</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
/* base */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--bg: #050505;
--bg-alt: #0d0d0d;
--fg: #f7f7f7;
--muted: #9ca3af;
--accent: #f97316;
--accent-soft: rgba(249,115,22,0.12);
--border: #27272a;
--card: #111827;
--radius: 12px;
--radius-lg: 18px;
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
Consolas, "Liberation Mono", "Courier New", monospace;
--sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe
UI", sans-serif;
}
body {
background: radial-gradient(circle at top, #111827 0, #020617 55%, #000
100%);
color: var(--fg);
font-family: var(--sans);
min-height: 100vh;
}
.page {
max-width: 1040px;
margin: 0 auto;
padding: 32px 16px 48px;
}
/* top bar */
.top-nav {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 32px;
border: 1px solid var(--border);
border-radius: 999px;
padding: 8px 18px;
background: linear-gradient(120deg, rgba(15,23,42,0.95),
rgba(15,23,42,0.85));
backdrop-filter: blur(12px);
}
.top-brand {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--mono);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--muted);
}
.brand-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--accent);
box-shadow: 0 0 14px rgba(249,115,22,0.8);
}
.nav-links {
display: flex;
gap: 8px;
font-size: 12px;
font-family: var(--mono);
}
.pill {
border-radius: 999px;
border: 1px solid var(--border);
padding: 4px 12px;
color: var(--muted);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.pill-primary {
border-color: var(--accent);
color: var(--fg);
background: linear-gradient(120deg, var(--accent-soft), transparent);
}
.pill-dot {
width: 4px;
height: 4px;
border-radius: 999px;
background: var(--muted);
}
/* layout */
.grid {
display: grid;
grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.4fr);
gap: 24px;
}
@media (max-width: 900px) {
.grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* left column */
.hero-card {
border-radius: var(--radius-lg);
border: 1px solid var(--border);
padding: 24px 22px 22px;
background: linear-gradient(145deg, rgba(15,23,42,0.9), rgba(15,23,42,0.75));
display: grid;
grid-template-columns: auto minmax(0,1fr);
gap: 20px;
align-items: center;
}
@media (max-width: 640px) {
.hero-card {
grid-template-columns: minmax(0,1fr);
}
}
.avatar-wrap {
border-radius: 24px;
border: 1px solid var(--border);
padding: 10px;
background: radial-gradient(circle at top, #020617, #000);
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.avatar-ring {
position: absolute;
inset: 10px;
border-radius: 999px;
border: 1px solid rgba(156,163,175,0.35);
border-top-color: rgba(249,115,22,0.9);
border-right-color: rgba(249,115,22,0.7);
transform: rotate(-18deg);
}
.avatar-initials {
font-size: 36px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.avatar-tag {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
border-radius: 999px;
border: 1px solid var(--border);
background: rgba(15,23,42,0.9);
padding: 3px 10px;
font-size: 10px;
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
}
.hero-main-title {
font-size: 28px;
line-height: 1.15;
margin-bottom: 8px;
letter-spacing: -0.03em;
}
.hero-main-title span {
color: var(--accent);
}
.hero-subtitle {
color: var(--muted);
font-size: 14px;
margin-bottom: 14px;
}
.hero-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
font-size: 11px;
font-family: var(--mono);
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.16em;
}
.hero-meta span {
border-radius: 999px;
border: 1px solid var(--border);
padding: 4px 8px;
background: rgba(15,23,42,0.9);
}
.section {
margin-top: 22px;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
background: var(--bg-alt);
padding: 18px 18px 16px;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.section-title {
font-size: 12px;
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--muted);
}
.section-kicker {
font-size: 11px;
color: var(--muted);
font-family: var(--mono);
}
.section-body {
font-size: 14px;
color: #e5e7eb;
line-height: 1.6;
}
.section-body p + p {
margin-top: 8px;
}
.tags-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.tag {
font-size: 11px;
padding: 4px 9px;
border-radius: 999px;
border: 1px solid var(--border);
color: var(--muted);
font-family: var(--mono);
background: #020617;
}
.tag-strong {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-soft);
}
/* right column */
.side-col {
display: flex;
flex-direction: column;
gap: 16px;
}
.side-card {
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-alt);
padding: 14px 14px 12px;
}
.side-title {
font-size: 11px;
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--muted);
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.side-title span {
color: var(--accent);
}
.side-list {
list-style: none;
font-size: 13px;
color: #e5e7eb;
display: flex;
flex-direction: column;
gap: 6px;
}
.side-item-label {
font-weight: 500;
font-size: 13px;
}
.side-item-meta {
font-size: 11px;
color: var(--muted);
font-family: var(--mono);
}
.skills-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 2px;
}
.skill {
font-size: 11px;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid var(--border);
color: var(--muted);
font-family: var(--mono);
}
.skill-main {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-soft);
}
/* footer row */
.footer-row {
margin-top: 18px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 8px;
font-size: 11px;
font-family: var(--mono);
color: var(--muted);
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.footer-links a {
color: var(--muted);
text-decoration: none;
border-bottom: 1px solid transparent;
}
.footer-links a:hover {
color: var(--accent);
border-bottom-color: var(--accent);
}
</style>
</head>
<body>
<div class="page">
<header class="top-nav">
<div class="top-brand">
<span class="brand-dot"></span>
<span>Portfolio</span>
</div>
<nav class="nav-links">
<a href="#about" class="pill">
<span class="pill-dot"></span>
About
</a>
<a href="#work" class="pill">
<span class="pill-dot"></span>
Work
</a>
<a href="#contact" class="pill pill-primary">
<span>Contact</span>
</a>
</nav>
</header>
<main class="grid">
<!-- left -->
<section>
<div class="hero-card">
<div class="avatar-wrap">
<div class="avatar-ring"></div>
<div class="avatar-initials">YN</div>
<div class="avatar-tag">online</div>
</div>
<div>
<h1 class="hero-main-title">
Hey, I am <span>Your Name</span>
</h1>
<p class="hero-subtitle">
Developer / Designer / Problem-solver. I like building clean, fast
experiences for the web.
</p>
<div class="hero-meta">
<span>Based in Internet</span>
<span>Available for collabs</span>
</div>
</div>
</div>
<section id="about" class="section">
<div class="section-header">
<h2 class="section-title">About</h2>
<span class="section-kicker">v1.0 profile</span>
</div>
<div class="section-body">
<p>
I build things for fun and for work. I enjoy minimal design, dark
interfaces, and code that
does not suck.
</p>
<p>
Outside of tech I am into music, games, and overthinking small
details that nobody notices
but somehow make everything feel better.
</p>
</div>
<div class="tags-row">
<span class="tag tag-strong">Web dev</span>
<span class="tag">Clean UI</span>
<span class="tag">Open source</span>
<span class="tag">Learning daily</span>
</div>
</section>
<section id="work" class="section">
<div class="section-header">
<h2 class="section-title">Highlights</h2>
<span class="section-kicker">last updated recently</span>
</div>
<div class="section-body">
<p>
Recent things I am proud of:
</p>
<ul style="margin-top:8px; padding-left:18px;">
<li>Built small tools that actually get used by people</li>
<li>Kept improving older projects instead of abandoning them</li>
<li>Stayed curious across design, dev, and infrastructure</li>
</ul>
</div>
</section>
</section>
<!-- right -->
<aside class="side-col">
<section class="side-card">
<div class="side-title">
Social
<span>links</span>
</div>
<ul class="side-list">
<li>
<div class="side-item-label">GitHub</div>
<div class="side-item-meta">github.com/yourhandle</div>
</li>
<li>
<div class="side-item-label">Twitter</div>
<div class="side-item-meta">@yourhandle</div>
</li>
<li>
<div class="side-item-label">Discord</div>
<div class="side-item-meta">you#0000</div>
</li>
</ul>
</section>
<section class="side-card">
<div class="side-title">
Stack
<span>skills</span>
</div>
<div class="skills-grid">
<span class="skill skill-main">HTML</span>
<span class="skill skill-main">CSS</span>
<span class="skill skill-main">JavaScript</span>
<span class="skill">React</span>
<span class="skill">Node.js</span>
<span class="skill">Tailwind-ish</span>
<span class="skill">Git</span>
<span class="skill">UI/UX</span>
</div>
</section>
<section class="side-card" id="contact">
<div class="side-title">
Contact
<span>say hi</span>
</div>
<ul class="side-list">
<li>
<div class="side-item-label">Email</div>
<div class="side-item-meta">[email protected]</div>
</li>
<li>
<div class="side-item-label">Status</div>
<div class="side-item-meta">Open to interesting projects</div>
</li>
</ul>
</section>
</aside>
</main>
<footer class="footer-row">
<div>© <span id="year"></span> Your Name</div>
<div class="footer-links">
<a href="#about">About</a>
<a href="#work">Work</a>
<a href="#contact">Contact</a>
</div>
</footer>
</div>
<script>
document.getElementById("year").textContent = new Date().getFullYear();
</script>
</body>
</html>
