Skip to content
Snippets Groups Projects
Commit 02258924 authored by Arnav Pant's avatar Arnav Pant
Browse files

added particle effects and random letter shuffler

parent e418862c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
css/style.css
+ 48
− 38
View file @ 02258924
......@@ -28,16 +28,15 @@
box-sizing: border-box;
}
/* Change body background to transparent so particles show through */
body {
font-family: "GinesoCondMedium", "Helvetica Neue", Arial, sans-serif;
background-color: #111; /* Dark background */
background-color: #111; /* was #111 */
color: #333;
}
/* ---------------------------------------
2) HERO SECTION
- Full-screen, centered content with a relative position
to position the scroll indicator absolutely.
--------------------------------------- */
.hero {
position: relative;
......@@ -48,18 +47,17 @@ body {
width: 100%;
text-align: center;
transition: transform 0.3s ease-out;
background: transparent; /* remove opaque background */
}
/* Container for shuffling text */
#shuffle-container {
display: inline-block;
z-index: 2;
}
/* ---------------------------------------
3) SCROLL INDICATOR
- Positioned at the bottom center of the hero section
- Uses the same (normal) font styling
- Has a subtle bounce animation
--------------------------------------- */
.scroll-indicator {
position: absolute;
......@@ -68,7 +66,7 @@ body {
transform: translateX(-50%);
text-align: center;
font-size: 1.5rem;
color: #7f7f7f; /* off-white, matching normal text */
color: #7f7f7f;
cursor: pointer;
animation: bounce 2s infinite;
}
......@@ -87,36 +85,34 @@ body {
/* ---------------------------------------
4) ABOUT SECTION
- Same background as hero for a seamless transition
- Initially hidden (opacity: 0) and will fade in on scroll
--------------------------------------- */
.about {
opacity: 0;
transition: opacity 0.5s ease-out;
padding: 3rem 1rem;
background-color: #111; /* Same dark background */
background-color: transparent; /* was #111 */
color: #fff;
}
.about-content {
width: 100%;
display: flex;
flex-direction: row; /* Horizontal layout */
flex-direction: row;
align-items: center;
justify-content: flex-start; /* Align to left */
gap: 2rem; /* Space between image and text */
max-width: 1200px; /* Optionally restrict max width */
margin: 0 auto; /* Center the container horizontally */
justify-content: flex-start;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.about-image {
width: 40%; /* Adjust percentage as needed */
width: 40%;
height: auto;
border-radius: 10px;
}
.about-text {
width: 60%; /* Adjust as needed */
width: 60%;
}
.about-text h2 {
......@@ -138,7 +134,6 @@ body {
margin: 1rem 0;
}
/* Normal lines: responsive font-size, off-white color */
.line.normal {
font-size: clamp(1.2rem, 2vw, 1.5rem);
color: #7f7f7f;
......@@ -146,7 +141,6 @@ body {
font-family: "GinesoCondMedium", "Helvetica Neue", Arial, sans-serif;
}
/* Highlight line ("Arnav Pant"): responsive and pure white */
.line.highlight {
font-family: "GinesoCondBlack", "Helvetica Neue", Arial, sans-serif;
font-size: clamp(8rem, 10vw, 10rem);
......@@ -154,26 +148,21 @@ body {
line-height: 100%;
}
/* VT line: for "Virginia Tech" with double border (white and black) */
.line.VT {
font-family: "acherus_grotesque_-_extrabold_italic", "Helvetica Neue", Arial, sans-serif;
font-size: clamp(3rem, 4vw, 4rem);
color: #CF4420; /* Base fill color (can adjust if needed) */
color: #CF4420;
line-height: 100%;
/* Double border using text-shadow: first white, then black */
-webkit-text-stroke: 0; /* disable default stroke */
-webkit-text-stroke: 0;
text-shadow:
4px 4px 0 #880000,
4px 4px 0 #880000,
4px 4px 0 #880000,
4px 4px 0 #880000,
/* white border */
4px 4px 0 #880000,
4px 4px 0 #880000,
4px 4px 0 #880000,
4px 4px 0 #880000,
6px 6px 0 #fff,
6px 6px 0 #fff,
6px 6px 0 #fff,
6px 6px 0 #fff;
/* black border */
6px 6px 0 #fff,
6px 6px 0 #fff,
6px 6px 0 #fff;
}
/* ---------------------------------------
......@@ -185,11 +174,11 @@ body {
}
/* ---------------------------------------
CARDS SECTION
7) CARDS SECTION
--------------------------------------- */
.cards-section {
padding: 3rem 1rem;
background-color: #111; /* Same dark background */
background-color: transparent; /* was #111 */
color: #fff;
}
......@@ -203,10 +192,10 @@ body {
}
.card {
background-color: #111; /* Updated to match main page background */
background-color: transparent; /* was #111 */
border-radius: 20px;
padding: 2rem;
flex: 1 1 calc(25% - 2rem); /* Four cards per row on large screens */
flex: 1 1 calc(25% - 2rem);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
......@@ -229,7 +218,6 @@ body {
/* ---------------------------------------
SCROLLBAR SETTINGS
--------------------------------------- */
html, body {
-ms-overflow-style: none !important;
scrollbar-width: none !important;
......@@ -239,3 +227,25 @@ html::-webkit-scrollbar, body::-webkit-scrollbar {
display: none !important;
}
/* Container for random letters that fill the hero area */
#random-letters-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden; /* So letters won't overflow the hero */
pointer-events: none; /* So they don't block clicks */
z-index: 1; /* Ensure they're above the background but behind your shuffle text if needed */
}
/* Random letter styling */
.random-letter {
position: absolute; /* So we can place them at random positions */
font-size: 1rem; /* Adjust as needed */
color: #7f7f7f; /* Or #fff, #999, etc. */
opacity: 1;
transition: opacity 1s ease; /* For smooth disappearance */
user-select: none; /* Prevent text selection */
}
index.html
+ 124
− 35
View file @ 02258924
......@@ -5,52 +5,141 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Arnav Pant - Portfolio</title>
<link rel="stylesheet" href="css/style.css" />
<style>
/* Ensure the particles container fills the entire page and is behind everything */
#particles-js {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
</style>
</head>
<body>
<!-- HERO SECTION (fullscreen) -->
<section class="hero" id="hero">
<!-- Container for the shuffling text -->
<div id="shuffle-container"></div>
<!-- Scroll Indicator at the bottom center -->
<div class="scroll-indicator">
<span class="scroll-text">scroll down</span>
<span class="scroll-arrow">&#8595;</span>
</div>
</section>
<!-- Particles.js Container (Background for Entire Page) -->
<div id="particles-js"></div>
<!-- ABOUT ME SECTION -->
<section class="about" id="about">
<div class="about-content">
<img src="images/Arnav.jpeg" alt="Arnav Pant" class="about-image">
<div class="about-text">
<h2>About Me</h2>
<p>Hello, I'm Arnav Pant, a Computer Science major at Virginia Tech. I love coding, building interactive experiences, and exploring innovative ideas. Welcome to my personal portfolio!</p>
</div>
</div>
</section>
<!-- HERO SECTION (fullscreen) -->
<!-- HERO SECTION (fullscreen) -->
<section class="hero" id="hero">
<!-- Background random letters container -->
<div id="random-letters-container"></div>
<!-- CARDS SECTION -->
<section class="cards-section" id="cards">
<div class="cards-container">
<div class="card" id="card-projects" data-target="projects.html">
<h3>Projects</h3>
</div>
<div class="card" id="card-interests" data-target="interests.html">
<h3>Interests</h3>
</div>
<div class="card" id="card-resume" data-target="resume.html">
<h3>Resume</h3>
</div>
<div class="card" id="card-contact" data-target="contact.html">
<h3>Contact Me</h3>
</div>
<!-- Container for the shuffling text (the lines you already have) -->
<div id="shuffle-container"></div>
<!-- Scroll Indicator at the bottom center -->
<div class="scroll-indicator">
<span class="scroll-text">scroll down</span>
<span class="scroll-arrow">&#8595;</span>
</div>
</section>
<!-- ABOUT ME SECTION -->
<section class="about" id="about">
<div class="about-content">
<img src="images/Arnav.jpeg" alt="Arnav Pant" class="about-image">
<div class="about-text">
<h2>About Me</h2>
<p>Hello, I'm Arnav Pant, a Computer Science major at Virginia Tech. I love coding, building interactive experiences, and exploring innovative ideas. Welcome to my personal portfolio!</p>
</div>
</div>
</section>
<!-- CARDS SECTION -->
<section class="cards-section" id="cards">
<div class="cards-container">
<div class="card" id="card-projects" data-target="projects.html">
<h3>Projects</h3>
</div>
<div class="card" id="card-interests" data-target="interests.html">
<h3>Interests</h3>
</div>
<div class="card" id="card-resume" data-target="resume.html">
<h3>Resume</h3>
</div>
<div class="card" id="card-contact" data-target="contact.html">
<h3>Contact Me</h3>
</div>
</div>
</section>
<!-- Include particles.js library -->
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<!-- Initialize particles.js -->
<script>
particlesJS("particles-js", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
}
},
"opacity": {
"value": 0.5,
"random": false
},
"size": {
"value": 3,
"random": true
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out"
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
}
}
},
"retina_detect": true
});
</script>
<script src="js/main.js"></script>
</body>
......
js/main.js
+ 53
− 1
View file @ 02258924
......@@ -3,9 +3,58 @@
- Each line’s shuffling completes in exactly 4 seconds.
- Per-letter delay is computed as: letterDelay = 4000ms / (number of characters in the line)
------------------------------- */
document.addEventListener("DOMContentLoaded", function() {
/* 1) CREATE RANDOM LETTERS */
const randomLettersContainer = document.getElementById("random-letters-container");
const lettersSet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
// Adjust these values as needed
const NUM_LETTERS = 100; // how many letters to generate
const HERO_WIDTH = randomLettersContainer.offsetWidth;
const HERO_HEIGHT = randomLettersContainer.offsetHeight;
const SHUFFLE_DURATION = 3000; // total shuffle time in ms
// Create each letter span at a random position
for (let i = 0; i < NUM_LETTERS; i++) {
const span = document.createElement("span");
span.className = "random-letter";
// Start with a random character
span.textContent = lettersSet[Math.floor(Math.random() * lettersSet.length)];
// Random position
const x = Math.random() * HERO_WIDTH;
const y = Math.random() * HERO_HEIGHT;
span.style.left = x + "px";
span.style.top = y + "px";
// Optional: random font size
span.style.fontSize = (0.8 + Math.random() * 2) + "rem";
randomLettersContainer.appendChild(span);
// For each letter, shuffle it until the duration ends
const startTime = Date.now();
const shuffleInterval = setInterval(() => {
const elapsed = Date.now() - startTime;
if (elapsed >= SHUFFLE_DURATION) {
clearInterval(shuffleInterval);
// Fade out or remove the letter
span.style.opacity = 0;
// Remove from DOM after fade-out
setTimeout(() => {
if (span.parentNode) {
span.parentNode.removeChild(span);
}
}, 1000); // match the CSS transition time
} else {
// Shuffle character
span.textContent = lettersSet[Math.floor(Math.random() * lettersSet.length)];
}
}, 50); // shuffle every 50ms
}
// All possible characters for shuffling
const lettersSet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
// Define lines with text and style. (No letterDelay property needed now.)
const lines = [
......@@ -172,5 +221,8 @@ cards.forEach(card => {
});
});
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment