Ayushya AmitabhandClaude Sonnet 5.5
99b4151fa6
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
229 lines
10 KiB
HTML
229 lines
10 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Ayushya.dev</title>
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root{
|
|
--bg:#fafaf9; --fg:#141414; --muted:#6b6b68; --accent:#2563eb;
|
|
--border:#141414; --card-bg:#ffffff; --divider:#dcdcd8; --limb:#c7c7c2;
|
|
--accent-bg:#2563eb; --accent-fg:#ffffff;
|
|
}
|
|
@media (prefers-color-scheme: dark){
|
|
:root{
|
|
--bg:#0b0d0f; --fg:#f2f2f0; --muted:#9a9a95; --accent:#64a1fb;
|
|
--border:#f2f2f0; --card-bg:#141719; --divider:#2b2e31; --limb:#33373b;
|
|
--accent-bg:#64a1fb; --accent-fg:#0b0d0f;
|
|
}
|
|
}
|
|
*{box-sizing:border-box;}
|
|
html,body{margin:0;padding:0;}
|
|
body{background:var(--bg);color:var(--fg);font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;}
|
|
a{color:inherit;text-decoration:none;}
|
|
h1,h2,h3,p{margin:0;}
|
|
|
|
.page{max-width:1120px;margin:0 auto;padding:40px 24px 56px;}
|
|
|
|
/* Bento grid: 4 columns, 160px rows */
|
|
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:160px;gap:16px;}
|
|
.tile{position:relative;overflow:hidden;background:var(--card-bg);border:1px solid var(--divider);border-radius:20px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .15s ease,transform .15s ease;}
|
|
a.tile:hover{border-color:var(--border);transform:translateY(-2px);}
|
|
a.tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
|
|
.label{font-size:11px;letter-spacing:0.14em;color:var(--muted);}
|
|
.arrow{font-size:18px;color:var(--accent);align-self:flex-end;transition:transform .15s ease;}
|
|
a.tile:hover .arrow{transform:translate(3px,-3px);}
|
|
|
|
.hero{grid-column:span 2;grid-row:span 2;border-color:var(--border);}
|
|
.hero h1{font-size:clamp(28px,4.4vw,48px);font-weight:700;letter-spacing:0.02em;line-height:1.05;}
|
|
.hero h1 span{color:var(--accent);}
|
|
.hero p.tagline{font-size:13px;line-height:1.6;color:var(--muted);max-width:34ch;}
|
|
|
|
.robot-tile{grid-column:span 1;grid-row:span 2;align-items:center;justify-content:center;}
|
|
.project{grid-column:span 1;grid-row:span 1;gap:10px;justify-content:flex-start;}
|
|
.project.wide{grid-column:span 2;}
|
|
.avatar{width:40px;height:40px;border-radius:50%;border:1px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--accent);flex-shrink:0;}
|
|
.project h3{font-size:13px;font-weight:700;letter-spacing:0.04em;}
|
|
.project p.desc{font-size:12px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
|
|
.project .arrow{position:absolute;top:18px;right:20px;}
|
|
|
|
.social{align-items:flex-start;}
|
|
.social .name{font-size:15px;font-weight:700;letter-spacing:0.06em;}
|
|
.accent-tile{background:var(--accent-bg);color:var(--accent-fg);border-color:var(--accent-bg);}
|
|
.accent-tile .label{color:inherit;opacity:.75;}
|
|
.accent-tile .arrow{color:inherit;}
|
|
.email{grid-column:span 2;}
|
|
.email .addr{font-size:clamp(14px,2.2vw,20px);font-weight:700;letter-spacing:0.04em;word-break:break-all;}
|
|
|
|
.terminal{grid-column:span 2;font-size:12px;color:var(--muted);}
|
|
.marquee-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);letter-spacing:0.08em;}
|
|
.marquee-track{display:inline-block;white-space:nowrap;animation:scrollLeft 20s linear infinite;}
|
|
@keyframes scrollLeft{from{transform:translateX(0);}to{transform:translateX(-50%);}}
|
|
.prompt{color:var(--fg);}
|
|
.prompt b{color:var(--accent);}
|
|
.cursor{display:inline-block;width:8px;height:14px;background:var(--accent);vertical-align:-2px;animation:blink 1s steps(1) infinite;}
|
|
@keyframes blink{50%{opacity:0;}}
|
|
|
|
/* Robot (scaled to fit the tile) */
|
|
.robot{display:flex;flex-direction:column;align-items:center;transform:scale(.62);transform-origin:center;}
|
|
.antenna-wire{width:2px;height:20px;background:var(--fg);}
|
|
.antenna-seg-1{width:2px;height:12px;background:var(--fg);transform:rotate(28deg) translateX(3px);}
|
|
.antenna-seg-2{width:2px;height:12px;background:var(--fg);transform:rotate(-28deg) translateX(-3px);margin-top:-2px;}
|
|
.antenna-tip{width:10px;height:10px;border-radius:50%;background:var(--fg);margin-top:2px;}
|
|
.head{width:140px;height:118px;margin-top:14px;border:2px solid var(--fg);border-radius:30px;background:var(--card-bg);display:flex;align-items:center;justify-content:center;gap:20px;}
|
|
.eye-ball{width:34px;height:34px;border-radius:50%;background:var(--card-bg);border:2px solid var(--fg);position:relative;flex-shrink:0;}
|
|
.pupil{position:absolute;top:50%;left:50%;width:13px;height:13px;border-radius:50%;background:var(--fg);margin-top:-6.5px;margin-left:-6.5px;transition:transform .06s linear;}
|
|
.neck-gap{height:16px;}
|
|
.body-row{display:flex;align-items:flex-start;gap:10px;}
|
|
.arm{width:16px;height:118px;border-radius:10px;background:var(--limb);margin-top:10px;}
|
|
.torso{width:150px;height:150px;border:2px solid var(--fg);border-radius:26px;background:var(--card-bg);}
|
|
.leg-gap{height:10px;}
|
|
.legs-row{display:flex;gap:26px;}
|
|
.leg{width:20px;height:78px;border-radius:10px;background:var(--limb);}
|
|
|
|
@media (max-width: 880px){
|
|
.bento{grid-template-columns:repeat(2,1fr);}
|
|
.hero{grid-column:span 2;grid-row:span 1;}
|
|
.robot-tile{grid-column:span 1;grid-row:span 2;}
|
|
.project.wide{grid-column:span 2;}
|
|
}
|
|
@media (max-width: 520px){
|
|
.page{padding:24px 16px 40px;}
|
|
.bento{grid-auto-rows:minmax(150px,auto);gap:12px;}
|
|
.robot-tile{grid-column:span 2;grid-row:span 1;min-height:260px;}
|
|
.project,.project.wide,.social,.email,.terminal{grid-column:span 2;}
|
|
.social{grid-column:span 1;}
|
|
}
|
|
@media (prefers-reduced-motion: reduce){
|
|
.marquee-track,.cursor{animation:none;}
|
|
a.tile,.arrow{transition:none;}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="page">
|
|
<div class="bento">
|
|
|
|
<section class="tile hero">
|
|
<p class="label">PORTFOLIO</p>
|
|
<div>
|
|
<h1>AYUSHYA<span>.DEV</span></h1>
|
|
</div>
|
|
<p class="tagline">Building apps, tools, and small corners of the web.</p>
|
|
</section>
|
|
|
|
<div class="tile robot-tile" aria-hidden="true">
|
|
<div class="robot">
|
|
<div class="antenna-wire"></div>
|
|
<div class="antenna-seg-1"></div>
|
|
<div class="antenna-seg-2"></div>
|
|
<div class="antenna-tip"></div>
|
|
<div class="head">
|
|
<div class="eye-ball" id="eyeLeft"><div class="pupil" id="pupilLeft"></div></div>
|
|
<div class="eye-ball" id="eyeRight"><div class="pupil" id="pupilRight"></div></div>
|
|
</div>
|
|
<div class="neck-gap"></div>
|
|
<div class="body-row">
|
|
<div class="arm"></div>
|
|
<div class="torso"></div>
|
|
<div class="arm"></div>
|
|
</div>
|
|
<div class="leg-gap"></div>
|
|
<div class="legs-row">
|
|
<div class="leg"></div>
|
|
<div class="leg"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a class="tile social accent-tile" href="https://github.com/ayushyamitabh/" target="_blank" rel="noopener noreferrer">
|
|
<span class="label">CODE</span>
|
|
<span class="name">GITHUB</span>
|
|
<span class="arrow">↗</span>
|
|
</a>
|
|
|
|
<a class="tile social" href="https://linkedin.com/in/ayushyamitabh" target="_blank" rel="noopener noreferrer">
|
|
<span class="label">NETWORK</span>
|
|
<span class="name">LINKEDIN</span>
|
|
<span class="arrow">↗</span>
|
|
</a>
|
|
|
|
<a class="tile project wide" href="https://noo.ayushya.dev" target="_blank" rel="noopener noreferrer">
|
|
<div class="avatar">N</div>
|
|
<h3>NOO</h3>
|
|
<p class="desc">A fast, native Nextcloud client built with Flutter and Material You — files, photos, activity, shares, and trash in one themed app.</p>
|
|
<span class="arrow">↗</span>
|
|
</a>
|
|
|
|
<a class="tile project" href="https://watchparty-archive.web.app/" target="_blank" rel="noopener noreferrer">
|
|
<div class="avatar">WP</div>
|
|
<h3>CHROME WATCH PARTY</h3>
|
|
<p class="desc">Syncs streamed video across devices, with chat, GIFs, and free group calls.</p>
|
|
<span class="arrow">↗</span>
|
|
</a>
|
|
|
|
<a class="tile project" href="https://vaxandme-archive.web.app/" target="_blank" rel="noopener noreferrer">
|
|
<div class="avatar">V&M</div>
|
|
<h3>VAX & ME</h3>
|
|
<p class="desc">Explains expected COVID-19 vaccine side effects, built from FDA data.</p>
|
|
<span class="arrow">↗</span>
|
|
</a>
|
|
|
|
<div class="tile terminal" aria-hidden="true">
|
|
<p class="label">STATUS</p>
|
|
<div class="marquee-wrap"><span class="marquee-track" id="marquee"></span></div>
|
|
<p class="prompt"><b>></b> hello, world <span class="cursor"></span></p>
|
|
</div>
|
|
|
|
<a class="tile email accent-tile" href="mailto:hello@ayushya.dev">
|
|
<span class="label">SAY HELLO</span>
|
|
<span class="addr">HELLO@AYUSHYA.DEV</span>
|
|
<span class="arrow">↗</span>
|
|
</a>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
(function () {
|
|
var binary = (function (len) {
|
|
var out = '';
|
|
for (var i = 0; i < len; i++) {
|
|
out += Math.random() < 0.5 ? '0' : '1';
|
|
if (i % 4 === 3) out += ' ';
|
|
}
|
|
return out;
|
|
})(80);
|
|
document.getElementById('marquee').textContent = binary + ' ' + binary;
|
|
|
|
var pairs = [
|
|
[document.getElementById('eyeLeft'), document.getElementById('pupilLeft')],
|
|
[document.getElementById('eyeRight'), document.getElementById('pupilRight')]
|
|
];
|
|
var MAX_OFFSET = 8;
|
|
var rafPending = false;
|
|
|
|
function updatePupils(clientX, clientY) {
|
|
pairs.forEach(function (pair) {
|
|
var rect = pair[0].getBoundingClientRect();
|
|
var cx = rect.left + rect.width / 2;
|
|
var cy = rect.top + rect.height / 2;
|
|
var angle = Math.atan2(clientY - cy, clientX - cx);
|
|
pair[1].style.transform = 'translate(' + (Math.cos(angle) * MAX_OFFSET) + 'px, ' + (Math.sin(angle) * MAX_OFFSET) + 'px)';
|
|
});
|
|
}
|
|
|
|
window.addEventListener('mousemove', function (e) {
|
|
if (rafPending) return;
|
|
rafPending = true;
|
|
var x = e.clientX, y = e.clientY;
|
|
requestAnimationFrame(function () { rafPending = false; updatePupils(x, y); });
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|