-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
535 lines (481 loc) · 25.7 KB
/
index.html
File metadata and controls
535 lines (481 loc) · 25.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vipeen Kumar, Research Scholar, Panjab University (Chd.)</title>
<!-- D3.js for particle simulation -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- Tailwind CSS for utility classes and modern styling -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts for 'Inter' -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<style>
html, body {
height: 100%; /* Make html and body take full viewport height */
margin: 0;z
padding: 0;
overflow: hidden; /* Prevent body scrollbar, scroll-container will handle scrolling */
font-family: 'Inter', Arial, sans-serif; /* Prefer Inter, fallback to Arial */
text-align: center;
background-color: #fac47e; /* Changed background color to #fac47e */
color: #333; /* Dark text for contrast */
}
/* Scroll container to enable snapping */
.scroll-container {
height: 100vh;
overflow-y: scroll; /* Enable vertical scrolling */
scroll-snap-type: y mandatory; /* Enable scroll snapping */
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
scroll-padding-top: 110px; /* Space for fixed header and nav */
}
header {
background-color: #333;
color: white;
padding: 20px;
font-size: 24px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
position: fixed; /* Fixed at the top */
top: 0;
width: 100%;
z-index: 100; /* Ensure it's above content */
height: 70px; /* Explicit height for calculation */
box-sizing: border-box; /* Include padding in height */
}
nav {
background: #444;
padding: 10px;
border-radius: 8px;
margin: 10px auto;
max-width: 800px; /* Limit nav width */
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
position: fixed; /* Fixed below header */
top: 70px; /* Below the header */
left: 50%;
transform: translateX(-50%); /* Center the nav */
width: calc(100% - 40px); /* Adjust width for margin if needed */
max-width: 800px;
z-index: 100;
height: 40px; /* Explicit height for calculation */
box-sizing: border-box; /* Include padding in height */
}
nav a {
color: white; /* Default color for inactive links */
padding: 10px 20px;
text-decoration: none;
font-size: 18px;
border-radius: 5px;
transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for color too */
font-weight: bold; /* Made navigation links bold */
}
nav a:hover {
background: #666;
}
nav a.active-link { /* Style for active navigation link */
background: #666;
color: #F0E68C; /* Changed to a darker light yellow (Khaki) */
}
.content {
height: 100vh; /* Each section takes full viewport height */
scroll-snap-align: start; /* Snap to the start of the section */
padding: 20px; /* Padding inside the section */
background: transparent; /* Changed to transparent to match body background */
display: flex; /* Make content sections flex containers */
flex-direction: column; /* Stack children vertically */
justify-content: space-between; /* Push content and footer to the bottom */
box-sizing: border-box; /* Include padding in height */
padding-top: 20px; /* Default reduced padding-top for all content */
/* Animation initial state */
opacity: 0;
transform: translateY(50px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
/* Specific padding-top for the home section */
#home.content {
padding-top: 130px; /* Set padding-top for home section to 130px */
}
.content.animate-in {
opacity: 1;
transform: translateY(0);
}
.bio-img {
width: 200px; /* Increased image width */
height: 200px; /* Increased image height */
border-radius: 50%;
object-fit: cover; /* Ensure image covers the area */
border: 3px solid #333; /* Add a border */
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
margin: 0 auto; /* Center image within its column */
}
/* Styles for the single footer at the bottom of the page */
footer {
/* This footer is now inside the scroll-container, so it will appear after the last section */
padding: 15px;
background: #333;
color: white;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
width: 100%; /* Ensure it spans the full width */
box-sizing: border-box;
text-align: center; /* Center text in footer */
/* No margin-top: auto here, as it's not a flex item pushing itself down within a section */
}
/* Particle Visualization Specific Styles */
canvas {
border-radius: 8px; /* Slightly smaller radius for individual canvases */
box-shadow: none; /* Removed box-shadow */
background-color: transparent; /* Changed to transparent */
cursor: pointer;
width: 100%; /* Take full width of its parent (.right-column-canvas-wrapper) */
height: 90px; /* Set a fixed height for the canvas to 90px */
display: block; /* Ensure it takes full width */
}
.message-box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #333;
color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
z-index: 1000;
display: none; /* Hidden by default */
text-align: center;
font-size: 1.1em;
}
/* New Flexbox Layout for Home Section */
.home-content-wrapper {
display: flex;
flex-direction: column; /* Default to column on small screens */
gap: 20px;
align-items: center; /* Center items in column layout */
margin-top: 20px;
flex-grow: 1; /* Allow this content to grow and push footer down */
}
.left-column p { /* Increased font size for paragraphs in left column */
font-size: 1.1em; /* Adjust as needed, e.g., 1.1em, 16px, etc. */
}
.left-column p strong { /* Ensure strong text also gets increased font size */
font-size: 1.2em; /* Slightly larger for the name */
}
.other-content-wrapper { /* New wrapper for other sections' content */
flex-grow: 1; /* Allow this content to grow and push footer down */
display: flex;
flex-direction: column;
align-items: center; /* Center content within these sections */
justify-content: center; /* Center content vertically in other tabs */
width: 100%; /* Take full width */
text-align: center; /* Added to center text content */
}
@media (min-width: 768px) { /* On medium screens and up, switch to row */
.home-content-wrapper {
flex-direction: row;
justify-content: center; /* Center the two columns */
align-items: flex-start; /* Align items to the top of the row */
text-align: left; /* Reset text alignment for columns */
}
.left-column {
flex: 0 0 40%; /* Left column takes 40% of the width */
max-width: 40%; /* Ensure it doesn't grow beyond 40% */
padding: 10px; /* Add some padding */
}
.left-column p, .left-column strong {
text-align: left; /* Ensure text is left-aligned within the column */
}
.left-column .bio-img {
margin-left: 0; /* Align image to left within its column */
margin-right: auto;
}
.right-column {
flex: 0 0 60%; /* Right column takes 60% of the width */
max-width: 60%; /* Ensure it doesn't grow beyond 60% */
padding: 10px; /* Add some padding */
display: flex; /* Make right column a flex container */
flex-direction: column; /* Stack items vertically */
justify-content: center; /* Changed from space-around to center */
align-items: center; /* Center canvases horizontally within right column */
/* Adjusted min-height for 4 canvases + 3 gaps (approx) */
min-height: calc(4 * 90px + 3 * 5px); /* 4 canvases * 90px height + 3 gaps * 5px margin */
}
.right-column-canvas-wrapper {
width: 100%; /* Each wrapper takes full width of right-column */
max-width: 600px; /* Max width for each canvas wrapper to ensure word fits */
margin-bottom: 5px; /* Reduced spacing between canvases to 5px */
flex-grow: 1; /* Allow canvas wrappers to grow and share space */
display: flex; /* Make wrapper a flex container */
align-items: center; /* Center canvas vertically within wrapper */
justify-content: center; /* Center canvas horizontally within wrapper */
}
.right-column-canvas-wrapper:last-child {
margin-bottom: 0; /* No margin after the last one */
}
}
/* New style for the heading */
.mocha-mousse-heading {
color: #7B5E57; /* Mocha Mousse color */
font-weight: bold;
font-size: 30px; /* Increased font size for the heading */
}
/* Style for section headings to ensure they are bold */
.section-heading {
font-weight: bold;
}
</style>
<script>
// Function to show a custom message box
function showMessageBox(message, duration = 3000) {
const msgBox = document.getElementById('messageBox');
if (msgBox) {
msgBox.textContent = message;
msgBox.style.display = 'block';
setTimeout(() => {
msgBox.style.display = 'none';
}, duration);
}
}
function showSection(sectionId) {
document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
}
// Global object to store references to each particle effect's simulation and state
const particleEffects = {};
// Function to generate particles from text onto a given canvas context
function generateParticlesFromText(text, fontSize, density, targetCanvas) {
const offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = targetCanvas.width;
offscreenCanvas.height = targetCanvas.height;
const offscreenCtx = offscreenCanvas.getContext('2d');
offscreenCtx.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
offscreenCtx.font = `${fontSize}px 'Inter', sans-serif`;
offscreenCtx.textAlign = 'center';
offscreenCtx.textBaseline = 'middle';
offscreenCtx.fillStyle = 'black';
offscreenCtx.fillText(text, offscreenCanvas.width / 2, offscreenCanvas.height / 2);
const imageData = offscreenCtx.getImageData(0, 0, offscreenCanvas.width, offscreenCanvas.height);
const newParticles = [];
const step = Math.max(1, Math.floor(10 / density));
for (let y = 0; y < offscreenCanvas.height; y += step) {
for (let x = 0; x < offscreenCanvas.width; x += step) {
const i = (y * offscreenCanvas.width + x) * 4;
if (imageData.data[i + 3] > 0) {
newParticles.push({
id: newParticles.length,
x: Math.random() * targetCanvas.width,
y: Math.random() * targetCanvas.height,
targetX: x,
targetY: y,
vx: 0,
vy: 0
});
}
}
}
return newParticles;
}
// Function to set up and manage a single particle effect
function setupParticleEffect(canvasId, text, fontSize, particleDensity, hoverRepulsionStrength) {
const canvas = document.getElementById(canvasId);
if (!canvas) {
console.error(`Canvas element with ID '${canvasId}' not found. Skipping particle effect setup.`);
return;
}
const ctx = canvas.getContext('2d');
const parentWrapper = canvas.parentElement;
canvas.width = parentWrapper.offsetWidth;
canvas.height = parentWrapper.offsetHeight;
canvas.width = Math.max(1, canvas.width);
canvas.height = Math.max(1, canvas.height);
let nodes = generateParticlesFromText(text, fontSize, particleDensity, canvas);
const particleColor = "#1a73e8"; // Particle color set to bright blue
let mouse = { x: null, y: null, active: false };
function mouseForce(alpha) {
if (!mouse.active || mouse.x === null || mouse.y === null) return;
const radius = 100;
const strength = hoverRepulsionStrength;
for (const node of nodes) {
const dx = node.x - mouse.x;
const dy = node.y - mouse.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < radius) {
const pushFactor = (1 - distance / radius) * strength * alpha;
node.vx += dx / distance * pushFactor;
node.vy += dy / distance * pushFactor;
}
}
}
if (particleEffects[canvasId] && particleEffects[canvasId].simulation) {
particleEffects[canvasId].simulation.stop();
}
const simulation = d3.forceSimulation(nodes)
.force("charge", d3.forceManyBody().strength(-0.5))
.force("x", d3.forceX(d => d.targetX).strength(0.2))
.force("y", d3.forceY(d => d.targetY).strength(0.2))
.force("collide", d3.forceCollide().radius(2))
.force("mouse", mouseForce)
.on("tick", () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (const d of nodes) {
ctx.fillStyle = particleColor;
ctx.beginPath();
ctx.arc(d.x, d.y, 2, 0, 2 * Math.PI);
ctx.fill();
}
});
canvas.addEventListener('mousemove', function(event) {
const rect = canvas.getBoundingClientRect();
mouse.x = event.clientX - rect.left;
mouse.y = event.clientY - rect.top;
mouse.active = true;
simulation.alpha(0.3).restart();
});
canvas.addEventListener('mouseleave', function() {
mouse.active = false;
mouse.x = null;
mouse.y = null;
simulation.alpha(0.1).restart();
});
particleEffects[canvasId] = { simulation, nodes, canvas, ctx, text, fontSize, particleDensity, hoverRepulsionStrength, mouse };
}
// Main animation loop that ticks all active simulations
function animateAllSimulations() {
for (const id in particleEffects) {
if (particleEffects[id].simulation) {
particleEffects[id].simulation.tick();
}
}
requestAnimationFrame(animateAllSimulations);
}
// Moved particle effect setup and animation start to window.onload
window.onload = function() {
document.fonts.ready.then(() => {
setupParticleEffect('economicsCanvas', "economics", 50, 3, 20);
setupParticleEffect('econometricsCanvas', "econometrics", 60, 3, 20);
setupParticleEffect('machineLearningCanvas', "machine learning", 55, 3, 20);
setupParticleEffect('financeCanvas', "finance", 50, 3, 20);
animateAllSimulations();
showMessageBox("Hover over the words to see the effect!", 3000);
});
// Handle window resizing for all effects
window.addEventListener('resize', () => {
for (const id in particleEffects) {
const effect = particleEffects[id];
setupParticleEffect(effect.canvas.id, effect.text, effect.fontSize, effect.particleDensity, effect.hoverRepulsionStrength);
}
});
};
document.addEventListener('DOMContentLoaded', function() {
// Intersection Observer for active navigation links and scroll effects
const sections = document.querySelectorAll('.content');
const navLinks = document.querySelectorAll('nav a');
const observerOptions = {
root: null, // viewport
rootMargin: '0px',
threshold: 0.7 // Trigger when 70% of the section is visible
};
const sectionObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
const targetId = entry.target.id;
const correspondingNavLink = Array.from(navLinks).find(link => link.getAttribute('onclick').includes(`'${targetId}'`));
if (correspondingNavLink) {
if (entry.isIntersecting) {
// Add active-link class to nav and trigger section animation
navLinks.forEach(link => link.classList.remove('active-link'));
correspondingNavLink.classList.add('active-link');
entry.target.classList.add('animate-in'); // Add animation class
} else {
// Remove animation class when section leaves view, so it can replay
entry.target.classList.remove('animate-in');
}
}
});
}, observerOptions);
sections.forEach(section => {
sectionObserver.observe(section);
});
// Set initial active link on load for the first section
// This is handled by the IntersectionObserver when the page loads and the first section becomes visible
// No explicit call needed here, as the observer will fire for the initial visible section.
});
</script>
</head>
<body>
<header>
Vipeen Kumar, Research Scholar, Panjab University (Chd.)
</header>
<nav>
<a href="#" onclick="showSection('home')">Home</a>
<a href="#" onclick="showSection('courses')">Courses</a>
<a href="#" onclick="showSection('materials')">Study Materials</a>
<a href="#" onclick="showSection('code')">Code</a>
</nav>
<div class="scroll-container">
<section id="home" class="content">
<h2 class="mocha-mousse-heading">Welcome to My Research Page</h2>
<div class="home-content-wrapper">
<!-- Left Column: Image and Bio Text (40%) -->
<div class="left-column">
<img src="WhatsApp Image 2025-03-27 at 02.40.35.jpeg" alt="Vipeen Kumar" class="bio-img" onerror="this.onerror=null;this.src='https://placehold.co/150x150/cccccc/333333?text=Vipeen+Kumar';">
<p class="mt-4"><strong>Vipeen Kumar</strong></p>
<p>Research Scholar at Panjab University (Chandigarh)</p>
<p>My research focuses on the impact of exchange rate volatility on capital formation, using econometric techniques to analyze economic trends and financial stability. Here you will also get resources for useful topics in the field of economics, finance and machine learning. This website covers my whole journey of Ph.D. Get the most out of this exciting project </p>
</div>
<!-- Right Column: Multiple Particle Visualizations (60%) -->
<div class="right-column">
<div class="right-column-canvas-wrapper">
<canvas id="economicsCanvas"></canvas>
</div>
<div class="right-column-canvas-wrapper">
<canvas id="econometricsCanvas"></canvas>
</div>
<div class="right-column-canvas-wrapper">
<canvas id="machineLearningCanvas"></canvas>
</div>
<div class="right-column-canvas-wrapper">
<canvas id="financeCanvas"></canvas>
</div>
</div>
</div>
</section>
<section id="courses" class="content">
<div class="other-content-wrapper">
<h2 class="section-heading">Courses</h2>
<p>Details of the courses I have taken and taught.</p>
<li><a href="bayesian_statistics.html" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:underline"> Bayesian Statistics using Python</a></li>
</div>
</section>
<section id="materials" class="content">
<div class="other-content-wrapper">
<h2 class="section-heading">Study Materials</h2>
<p>Downloadable study materials and references.</p>
<li><a href="https://github.com/Vipeen21/machine-learning-projects/blob/main/machine%20learning%20course.pdf" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:underline"> Machine Learning Course</a></li>
<li><a href="https://github.com/Vipeen21/machine-learning-projects/blob/main/machine%20learning%20models%20and%20their%20use%20cases.pdf" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:underline"> Machine Learning models use cases</a></li>
</div>
</section>
<section id="code" class="content">
<div class="other-content-wrapper">
<h2 class="section-heading">Code Repository</h2>
<ul>
<li><a href="https://raw.githubusercontent.com/Vipeen21/exrv/refs/heads/main/final%20excrf.py" target="_blank" class="text-blue-600 hover:underline">View Python Code for exchange rate and capital formation</a></li>
<li><a href="https://raw.githubusercontent.com/Vipeen21/exrv/refs/heads/main/fourier%20and%20wavelet%20practice.py" target="_blank" class="text-blue-600 hover:underline">View Python Code for fourier and wavelet transformation</a></li>
<li><a href="https://raw.githubusercontent.com/Vipeen21/machine-learning-projects/refs/heads/main/credit_score_model.py" target="_blank" class="text-blue-600 hover:underline">View Python Code for XGboost credit score model</a></li>
<li><a href="https://raw.githubusercontent.com/Vipeen21/machine-learning-projects/refs/heads/main/KNN.py" target="_blank" class="text-blue-600 hover:underline">View Python Code for K - Nearest Neighbours</a></li>
<li><a href="https://raw.githubusercontent.com/Vipeen21/machine-learning-projects/refs/heads/main/Logistic_Regression.py" target="_blank" class="text-blue-600 hover:underline">View Python Code for Logistic Regression</a></li>
<li><a href="https://raw.githubusercontent.com/Vipeen21/Quant-finance/refs/heads/main/market%20implied%20volatility.py" target="_blank" class="text-blue-600 hover:underline">View Python Code for market implied volatility</a></li>
<li><a href="https://raw.githubusercontent.com/Vipeen21/Quant-finance/refs/heads/main/risk%20free%20option%20trading.py" target="_blank" class="text-blue-600 hover:underline">View Python Code for risk free option trading</a></li>
<li><a href="https://raw.githubusercontent.com/Vipeen21/bayesian-statistics-python/refs/heads/main/bayesian%20inference%20to%20predict%20plant%20growth.py" target="_blank" class="text-blue-600 hover:underline">View Python Code for bayesian inference to predict plant growth</a></li>
<li><a href="https://raw.githubusercontent.com/Vipeen21/bayesian-statistics-python/refs/heads/main/bayesian%20networks.py" target="_blank" class="text-blue-600 hover:underline">View Python Code for bayesian networks</a></li>
</ul>
</div>
</section>
<!-- Message Box for notifications -->
<div id="messageBox" class="message-box"></div>
<footer>
© 2025 Vipeen Kumar | GitHub Page
</footer>
</div>
</body>
</html>