Skip to content

Commit 1ca613d

Browse files
Bismay-exeBismay-exe
authored
hehe
1 parent dcc5f92 commit 1ca613d

1 file changed

Lines changed: 115 additions & 173 deletions

File tree

‎index.html‎

Lines changed: 115 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -1,190 +1,132 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8">
5-
<title>3D Scroll Scrub PNG Sequence</title>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1" />
6+
<title>Bismay • Portfolio</title>
7+
<meta name="description" content="Portfolio — Bismay • minimal black & white UI with interactive 3D-style project cards" />
68
<style>
7-
html, body {
8-
margin: 0;
9-
padding: 0;
10-
overflow: hidden;
11-
height: 100%;
12-
background: #fff;
13-
}
14-
canvas {
15-
display: block;
16-
margin: auto;
17-
position: absolute;
18-
top: 50%;
19-
left: 50%;
20-
transform: translate(-50%, -50%);
21-
image-rendering: crisp-edges;
22-
image-rendering: -webkit-optimize-contrast;
23-
}
24-
#help-overlay {
25-
position: fixed;
26-
top: 20px;
27-
right: 20px;
28-
background: rgba(0,0,0,0.8);
29-
color: white;
30-
padding: 16px 20px;
31-
border-radius: 12px;
32-
font-family: sans-serif;
33-
font-size: 14px;
34-
line-height: 1.6;
35-
max-width: 280px;
36-
z-index: 9999;
37-
opacity: 1;
38-
transition: opacity 0.6s ease;
39-
cursor: grab;
40-
}
41-
#help-overlay:active {
42-
cursor: grabbing;
43-
}
9+
:root{--bg:#fff;--fg:#000;--muted:#666;--accent:#000}
10+
*{box-sizing:border-box}
11+
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,Arial,Helvetica,sans-serif}
12+
a{color:inherit;text-decoration:none}
13+
.container{max-width:1100px;margin:0 auto;padding:48px 24px}
14+
15+
/* Hero */
16+
.hero{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
17+
.title{font-weight:800;font-size:clamp(28px,6vw,54px);line-height:1}
18+
.subtitle{color:var(--muted);margin-top:8px;font-size:16px}
19+
20+
/* Animated words */
21+
.animated-words{display:inline-block;margin-left:6px;vertical-align:middle}
22+
.animated-words span{display:inline-block;opacity:0;transform:translateY(6px);animation:wordIn .9s forwards;}
23+
.animated-words span:nth-child(1){animation-delay:.1s}
24+
.animated-words span:nth-child(2){animation-delay:.35s}
25+
.animated-words span:nth-child(3){animation-delay:.6s}
26+
@keyframes wordIn{to{opacity:1;transform:none}}
27+
28+
/* Grid */
29+
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
30+
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
31+
@media(max-width:640px){.grid{grid-template-columns:1fr}}
32+
33+
/* Card */
34+
.card{background:#fff;border:1px solid rgba(0,0,0,0.06);border-radius:14px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,0.06);cursor:pointer;transform-style:preserve-3d;transition:transform .25s ease, box-shadow .25s ease}
35+
.card:hover{box-shadow:0 22px 60px rgba(0,0,0,0.12);}
36+
.card-inner{transform-style:preserve-3d;transition:transform .18s ease}
37+
.card-thumb{height:140px;border-radius:10px;overflow:hidden;background:linear-gradient(180deg,#f6f6f6,#e9e9e9);display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700}
38+
.card-title{font-weight:700;margin-top:12px}
39+
.card-desc{color:var(--muted);font-size:14px;margin-top:8px}
40+
.card-meta{display:flex;gap:10px;align-items:center;margin-top:14px;font-size:13px;color:var(--muted)}
41+
42+
/* 3D hover perspective */
43+
.card-3d{perspective:900px}
44+
45+
/* Footer */
46+
footer{margin-top:56px;padding:24px 0;color:var(--muted);text-align:center}
4447
</style>
4548
</head>
4649
<body>
47-
<canvas id="sequence"></canvas>
48-
49-
<div id="help-overlay">
50-
<strong>Controls</strong><br>
51-
🖱️ Scroll / drag → rotate<br>
52-
👆 Tap → reset<br>
53-
👆👆 Double-tap → stop<br>
54-
✌️ Two-finger tap → last frame<br>
55-
🤏 Pinch → zoom<br><br>
56-
⬅️➡️ Arrows → rotate<br>
57-
␣ Space → stop<br>
58-
R → reset<br>
59-
L → last frame<br>
60-
+ / - → zoom<br>
61-
H → toggle help
50+
<div class="container">
51+
<header class="hero">
52+
<div>
53+
<div class="title">Bismay • <span style="opacity:.8">Developer</span></div>
54+
<div class="subtitle">Minimal, modern projects — <span class="animated-words"><span>Design</span><span>Code</span><span>Ship</span></span></div>
55+
</div>
56+
<div style="margin-left:auto;text-align:right">
57+
<div style="font-weight:700">GitHub</div>
58+
<div style="color:var(--muted)"><a href="https://github.com/Bismay-exe" target="_blank" rel="noopener">github.com/Bismay-exe</a></div>
59+
</div>
60+
</header>
61+
62+
<section aria-labelledby="projects">
63+
<h2 id="projects" style="margin-top:48px">Selected projects</h2>
64+
<p style="color:var(--muted)">Projects pulled from the public GitHub profile. Click any card to view the repo.</p>
65+
66+
<div class="grid" id="projects-grid">
67+
<!-- Cards will be injected here -->
68+
</div>
69+
</section>
70+
71+
<footer>
72+
© <span id="year"></span> Bismay • Built with plain HTML/CSS/JS
73+
</footer>
6274
</div>
6375

6476
<script>
65-
const canvas = document.getElementById("sequence");
66-
const ctx = canvas.getContext("2d");
67-
let width, height;
68-
function resizeCanvas() {
69-
width = window.innerWidth;
70-
height = window.innerHeight;
71-
canvas.width = width;
72-
canvas.height = height;
73-
}
74-
window.addEventListener("resize", resizeCanvas);
75-
resizeCanvas();
76-
77-
const frameCount = 300;
78-
const images = [];
79-
let loaded = 0;
80-
81-
// Preload sequence
82-
for (let i = 1; i <= frameCount; i++) {
83-
const img = new Image();
84-
img.src = `male${String(i).padStart(4,"0")}.png`;
85-
img.onload = () => {
86-
loaded++;
87-
if (loaded === 1) drawFrame(1); // show first frame asap
88-
};
89-
images.push(img);
90-
}
91-
92-
let currentFrame = 1;
93-
let targetFrame = 1;
94-
let isPlaying = true;
95-
let scale = 1;
96-
let tiltX = 0, tiltY = 0;
97-
98-
function drawFrame(frame) {
99-
ctx.clearRect(0, 0, width, height);
100-
const img = images[frame - 1];
101-
if (!img.complete) return;
102-
const iw = img.width * scale;
103-
const ih = img.height * scale;
104-
const x = (width - iw) / 2 + tiltX * 30;
105-
const y = (height - ih) / 2 + tiltY * 30;
106-
ctx.drawImage(img, x, y, iw, ih);
107-
}
108-
109-
// Smooth animation loop
110-
function animate() {
111-
if (isPlaying) {
112-
currentFrame += (targetFrame - currentFrame) * 0.1;
113-
if (Math.abs(targetFrame - currentFrame) < 0.01) currentFrame = targetFrame;
114-
drawFrame(Math.round(currentFrame));
115-
}
116-
requestAnimationFrame(animate);
117-
}
118-
animate();
119-
120-
// --- Scroll & drag scrub ---
121-
let lastY = 0;
122-
window.addEventListener("wheel", (e) => {
123-
targetFrame += Math.sign(e.deltaY) * 3;
124-
targetFrame = Math.max(1, Math.min(frameCount, targetFrame));
125-
});
126-
window.addEventListener("mousedown", (e) => { lastY = e.clientY; });
127-
window.addEventListener("mousemove", (e) => {
128-
if (e.buttons) {
129-
let delta = e.clientY - lastY;
130-
targetFrame += delta > 0 ? 2 : -2;
131-
targetFrame = Math.max(1, Math.min(frameCount, targetFrame));
132-
lastY = e.clientY;
133-
}
134-
});
77+
// Project list sourced from GitHub profile (public repos); see README for live links.
78+
const projects = [
79+
{name:'Beautiful-Notes', desc:'Sleek notes app with glass UI', url:'https://github.com/Bismay-exe/Beautiful-Notes'},
80+
{name:'5GTile', desc:'5G toggle / Tile project (Kotlin)', url:'https://github.com/Bismay-exe/5GTile'},
81+
{name:'Mechanical-Calculator', desc:'All-in-one calculator with themes', url:'https://github.com/Bismay-exe/Mechanical-Calculator'},
82+
{name:'My-Heavenly-Archive', desc:'Media gallery with filters & lightbox', url:'https://github.com/Bismay-exe/My-Heavenly-Archive'},
83+
{name:'Crypto-converter', desc:'Realtime crypto ↔ INR/USD/EUR converter', url:'https://github.com/Bismay-exe/Crypto-converter'},
84+
{name:'login-page', desc:'Simple minimal login page template', url:'https://github.com/Bismay-exe/login-page'},
85+
{name:'Bismay-exe', desc:'Personal profile & readme repo', url:'https://github.com/Bismay-exe/Bismay-exe'},
86+
{name:'Beautiful-Notes-Showcase', desc:'(extra) project showcase', url:'https://github.com/Bismay-exe/Beautiful-Notes-Showcase'}
87+
];
13588

136-
// --- Tilt effect ---
137-
window.addEventListener("mousemove", (e) => {
138-
tiltX = (e.clientX / width - 0.5);
139-
tiltY = (e.clientY / height - 0.5);
140-
});
89+
// Build cards
90+
const grid = document.getElementById('projects-grid');
91+
projects.forEach((p, idx) => {
92+
const col = document.createElement('a');
93+
col.className = 'card card-3d';
94+
col.href = p.url; col.target = '_blank'; col.rel = 'noopener';
14195

142-
// --- Keyboard controls ---
143-
window.addEventListener("keydown", (e) => {
144-
switch (e.key.toLowerCase()) {
145-
case "arrowright": targetFrame = Math.min(frameCount, targetFrame + 1); break;
146-
case "arrowleft": targetFrame = Math.max(1, targetFrame - 1); break;
147-
case " ": isPlaying = !isPlaying; break;
148-
case "r": targetFrame = 1; break;
149-
case "l": targetFrame = frameCount; break;
150-
case "+": scale = Math.min(2, scale + 0.1); break;
151-
case "-": scale = Math.max(0.5, scale - 0.1); break;
152-
case "h":
153-
helpVisible = !helpVisible;
154-
helpOverlay.style.opacity = helpVisible ? 1 : 0;
155-
break;
156-
}
157-
});
96+
const inner = document.createElement('div'); inner.className = 'card-inner';
97+
const thumb = document.createElement('div'); thumb.className = 'card-thumb'; thumb.textContent = p.name;
98+
const title = document.createElement('div'); title.className = 'card-title'; title.textContent = p.name.replace(/[-_]/g,' ');
99+
const desc = document.createElement('div'); desc.className = 'card-desc'; desc.textContent = p.desc;
100+
const meta = document.createElement('div'); meta.className = 'card-meta'; meta.innerHTML = `<span>GitHub</span><span>•</span><span>View Repo</span>`;
158101

159-
// --- Help overlay auto-hide + toggle ---
160-
const helpOverlay = document.getElementById("help-overlay");
161-
let helpVisible = true;
162-
setTimeout(() => {
163-
helpOverlay.style.opacity = 0;
164-
helpVisible = false;
165-
}, 5000);
166-
167-
// --- Draggable help overlay (desktop only) ---
168-
let offsetX, offsetY, isDragging = false;
169-
helpOverlay.addEventListener("mousedown", (e) => {
170-
isDragging = true;
171-
offsetX = e.clientX - helpOverlay.getBoundingClientRect().left;
172-
offsetY = e.clientY - helpOverlay.getBoundingClientRect().top;
173-
helpOverlay.style.transition = "none";
174-
});
175-
window.addEventListener("mousemove", (e) => {
176-
if (isDragging) {
177-
helpOverlay.style.left = (e.clientX - offsetX) + "px";
178-
helpOverlay.style.top = (e.clientY - offsetY) + "px";
179-
helpOverlay.style.right = "auto";
180-
}
102+
inner.appendChild(thumb); inner.appendChild(title); inner.appendChild(desc); inner.appendChild(meta);
103+
col.appendChild(inner);
104+
grid.appendChild(col);
105+
106+
// 3D hover effect: mousemove on card
107+
col.addEventListener('mousemove', (e)=>{
108+
const rect = col.getBoundingClientRect();
109+
const x = (e.clientX - rect.left) / rect.width - 0.5; // -0.5 -> 0.5
110+
const y = (e.clientY - rect.top) / rect.height - 0.5;
111+
const tiltX = (y * -1) * 12; // rotateX
112+
const tiltY = x * 12; // rotateY
113+
inner.style.transform = `rotateX(${tiltX}deg) rotateY(${tiltY}deg) translateZ(8px)`;
114+
});
115+
col.addEventListener('mouseleave', ()=>{
116+
inner.style.transform = 'rotateX(0deg) rotateY(0deg) translateZ(0px)';
117+
});
118+
119+
// subtle entrance animation stagger
120+
inner.style.opacity = 0; inner.style.transform += ' translateY(10px)';
121+
setTimeout(()=>{ inner.style.transition='transform .5s ease, opacity .5s ease'; inner.style.opacity=1; inner.style.transform='none'; }, idx*80);
181122
});
182-
window.addEventListener("mouseup", () => {
183-
if (isDragging) {
184-
isDragging = false;
185-
helpOverlay.style.transition = "opacity 0.6s ease";
186-
}
123+
124+
// small accessibility: keyboard focus styling
125+
document.addEventListener('keydown', (e)=>{
126+
if(e.key === 'Tab') document.body.classList.add('show-focus');
187127
});
128+
129+
document.getElementById('year').textContent = new Date().getFullYear();
188130
</script>
189131
</body>
190132
</html>

0 commit comments

Comments
 (0)