mirror of
https://github.com/Manoj-HV30/portfolio.git
synced 2026-05-16 19:35:26 +00:00
initial portfolio
This commit is contained in:
+241
-13
@@ -1,17 +1,245 @@
|
||||
---
|
||||
const name = "Your Name";
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Astro</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Astro</h1>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{name}</title>
|
||||
<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=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@300;400;500&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #0a0a0a;
|
||||
--surface: #111111;
|
||||
--border: #1e1e1e;
|
||||
--muted: #3a3a3a;
|
||||
--subtle: #666666;
|
||||
--body: #a8a8a8;
|
||||
--heading: #f0ede8;
|
||||
--accent: #e8e0d0;
|
||||
--highlight: #c9b99a;
|
||||
--red: #e85d5d;
|
||||
|
||||
--font-serif: 'Instrument Serif', Georgia, serif;
|
||||
--font-mono: 'Geist Mono', 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
html { background: var(--bg); color: var(--body); font-family: var(--font-mono); }
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
opacity: .025;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
||||
background-size: 200px 200px;
|
||||
}
|
||||
|
||||
.scene {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
gap: 1.5rem;
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scene.active { display: flex; }
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.scene.active > * {
|
||||
animation: fade-in 0.5s ease both;
|
||||
}
|
||||
|
||||
.scene.active > *:nth-child(2) { animation-delay: 0.1s; }
|
||||
.scene.active > *:nth-child(3) { animation-delay: 0.2s; }
|
||||
.scene.active > *:nth-child(4) { animation-delay: 0.3s; }
|
||||
|
||||
.countdown-number {
|
||||
font-family: var(--font-serif);
|
||||
font-size: clamp(6rem, 18vw, 10rem);
|
||||
color: var(--heading);
|
||||
line-height: 1;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.countdown-label {
|
||||
font-size: 1rem;
|
||||
letter-spacing: .18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--subtle);
|
||||
}
|
||||
|
||||
.boo-gif {
|
||||
width: 380px;
|
||||
max-width: 90vw;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.message {
|
||||
font-family: var(--font-serif);
|
||||
font-size: clamp(2.2rem, 6vw, 3.2rem);
|
||||
color: var(--accent);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.sub-message {
|
||||
font-size: 1.15rem;
|
||||
color: var(--subtle);
|
||||
letter-spacing: .06em;
|
||||
}
|
||||
|
||||
.job-image {
|
||||
width: 420px;
|
||||
max-width: 90vw;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
opacity: 0.85;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.gotcha {
|
||||
font-family: var(--font-serif);
|
||||
font-size: clamp(2.2rem, 6vw, 3.4rem);
|
||||
color: var(--red);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.final-text {
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: .14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.final-text span {
|
||||
display: block;
|
||||
margin-top: .5rem;
|
||||
color: var(--subtle);
|
||||
letter-spacing: .06em;
|
||||
text-transform: none;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
.countdown-number {
|
||||
animation: pulse 1s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="scene-countdown" class="scene active">
|
||||
<div class="countdown-number" id="countdown">5</div>
|
||||
<div class="countdown-label">loading something...</div>
|
||||
</div>
|
||||
|
||||
<div id="scene-boo" class="scene">
|
||||
<img class="boo-gif" src="https://media.tenor.com/YsG4HXC-G_IAAAAd/reze-csm-reze.gif" alt="Reze boo" />
|
||||
<div class="message">boo</div>
|
||||
<div class="sub-message">gotcha</div>
|
||||
</div>
|
||||
|
||||
<div id="scene-onemore" class="scene">
|
||||
<div class="message">okay one more thing</div>
|
||||
</div>
|
||||
|
||||
<div id="scene-job" class="scene">
|
||||
<img class="job-image" src="https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExYjd5NnpsejdjNmx2aG1yd2V6dnhiY2VtMHN6YXg5anplMjVqcXd5OSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/T39By0uZSaAjSYaF9B/giphy.gif" alt="job application" />
|
||||
</div>
|
||||
|
||||
<div id="scene-gotcha" class="scene">
|
||||
<div class="gotcha">you just got jumpscared</div>
|
||||
<div class="sub-message">there is never a job</div>
|
||||
</div>
|
||||
|
||||
<div id="scene-final" class="scene">
|
||||
<div class="final-text">
|
||||
come back later
|
||||
<span>maybe there'll be something real here</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const scenes = [
|
||||
'scene-countdown',
|
||||
'scene-boo',
|
||||
'scene-onemore',
|
||||
'scene-job',
|
||||
'scene-gotcha',
|
||||
'scene-final'
|
||||
];
|
||||
|
||||
let currentScene = 0;
|
||||
let countdownValue = 5;
|
||||
|
||||
function showScene(index) {
|
||||
scenes.forEach(id => document.getElementById(id).classList.remove('active'));
|
||||
document.getElementById(scenes[index]).classList.add('active');
|
||||
}
|
||||
|
||||
function startCountdown() {
|
||||
const countdownEl = document.getElementById('countdown');
|
||||
const interval = setInterval(() => {
|
||||
countdownValue--;
|
||||
countdownEl.textContent = countdownValue;
|
||||
if (countdownValue <= 0) {
|
||||
clearInterval(interval);
|
||||
nextScene();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function nextScene() {
|
||||
currentScene++;
|
||||
if (currentScene < scenes.length) {
|
||||
showScene(currentScene);
|
||||
if (currentScene === 1) {
|
||||
setTimeout(nextScene, 2500);
|
||||
} else if (currentScene === 2) {
|
||||
setTimeout(nextScene, 1800);
|
||||
} else if (currentScene === 3) {
|
||||
setTimeout(nextScene, 3000);
|
||||
} else if (currentScene === 4) {
|
||||
setTimeout(nextScene, 2500);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
setTimeout(startCountdown, 500);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user