amantahiliani/Portfolio
1
0
Fork 0
mirror of https://github.com/AmanTahiliani/Portfolio.git synced 2026-08-08 04:06:15 -04:00
Code Issues Packages Projects Releases Wiki Activity

Smoother animations

Browse Source
This commit is contained in:
Aman Tahiliani
2025-05-11 22:03:56 -04:00
parent a4925d5944
commit 5501c586a3
2 changed files with 36 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/App.css
View File

@@ -1,14 +1,13 @@
.App { .App {
text-align: center; text-align: center;
background-color: black; background-color: black;
position: absolute; min-height: 100vh;
top: 0px; width: 100%;
right: 0px;
left: 0px;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
color: azure; color: azure;
overflow-x: hidden; overflow-x: hidden;
scroll-behavior: smooth; scroll-behavior: smooth;
position: relative;
} }
html { html {
@@ -17,8 +16,16 @@ html {
section { section {
opacity: 0; opacity: 0;
transform: translateY(20px); transform: translate3d(0, 20px, 0);
transition: opacity 0.6s ease-out, transform 0.6s ease-out; transition: opacity 0.6s ease-out, transform 0.6s ease-out;
will-change: opacity, transform;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 60px 0;
position: relative;
overflow: hidden;
} }
section.visible { section.visible {
@@ -63,11 +70,8 @@ section.visible {
.About { .About {
width: 100%; width: 100%;
position: absolute; padding: 40px 0;
top: 120px; margin-top: 60px;
bottom: 0px;
left: 0px;
right: 0px;
} }
hr { hr {
@@ -78,8 +82,9 @@ hr {
} }
.publications, .Experience, .DevTools, .Contact { .publications, .Experience, .DevTools, .Contact {
margin-top: 100px; margin: 0;
padding: 40px 0; padding: 60px 0;
width: 100%;
} }
.section-title { .section-title {

27
src/App.js
View File

@@ -21,12 +21,22 @@ function Portfolio() {
const observer = new IntersectionObserver((entries) => { const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => { entries.forEach(entry => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
const delay = parseInt(entry.target.dataset.delay) || 0;
setTimeout(() => {
requestAnimationFrame(() => {
entry.target.classList.add('visible'); entry.target.classList.add('visible');
});
}, delay);
} }
}); });
}, { threshold: 0.1 }); }, {
threshold: 0.15,
rootMargin: '50px 0px -100px 0px'
});
document.querySelectorAll('section').forEach((section) => { document.querySelectorAll('section').forEach((section, index) => {
// Add staggered delay to each section
section.dataset.delay = index * 100;
observer.observe(section); observer.observe(section);
}); });
@@ -44,13 +54,6 @@ function Portfolio() {
<section> <section>
<About className="About" id="About" /> <About className="About" id="About" />
</section> </section>
<section className="publications" id="Publications">
<h2 className="section-title" style={{ color: "salmon", fontSize: "50px" }}>
<b>Publications</b>
</h2>
<SimpleSlider />
</section>
<section className="Experience" id="Experience"> <section className="Experience" id="Experience">
<h2 className="section-title" style={{ color: "salmon", fontSize: "50px" }}> <h2 className="section-title" style={{ color: "salmon", fontSize: "50px" }}>
<b>Experience</b> <b>Experience</b>
@@ -63,6 +66,12 @@ function Portfolio() {
</h2> </h2>
<DevToolsComponent /> <DevToolsComponent />
</section> </section>
<section className="publications" id="Publications">
<h2 className="section-title" style={{ color: "salmon", fontSize: "50px" }}>
<b>Publications</b>
</h2>
<SimpleSlider />
</section>
<section className="Contact" id="Contact"> <section className="Contact" id="Contact">
<h2 className="section-title" style={{ color: "cyan", fontSize: "50px" }}> <h2 className="section-title" style={{ color: "cyan", fontSize: "50px" }}>
<b>Social Links</b> <b>Social Links</b>