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">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<title>{name}</title>
|
||||||
<meta name="viewport" content="width=device-width" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<meta name="generator" content={Astro.generator} />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<title>Astro</title>
|
<link
|
||||||
</head>
|
href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@300;400;500&display=swap"
|
||||||
<body>
|
rel="stylesheet"
|
||||||
<h1>Astro</h1>
|
/>
|
||||||
</body>
|
<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>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user