Skip to content

Commit 8a76315

Browse files
mattjmoranmattjmoran
committed
feat: add section-based visibility and animations for smoother transitions
1 parent 6a842ff commit 8a76315

File tree

1 file changed

+136
-87
lines changed

1 file changed

+136
-87
lines changed

‎src/routes/+page.svelte

Lines changed: 136 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
// Import Dependencies
3-
import { blur, fly } from 'svelte/transition';
3+
import { blur, fade, fly } from 'svelte/transition';
44
import { backOut } from 'svelte/easing';
55
import { Spring } from 'svelte/motion';
66
import { onMount } from 'svelte';
@@ -22,7 +22,11 @@
2222
y: 25,
2323
easing: backOut
2424
}),
25-
line: { duration: 1000 }
25+
line: { duration: 1000 },
26+
section: (order: number) => ({
27+
duration: 1000,
28+
delay: order * 250 + 500,
29+
}),
2630
};
2731
2832
// Title & Line Motion Effect
@@ -72,6 +76,14 @@
7276
// Real-Time Clock (Chicago Time)
7377
let time = $state<string>();
7478
79+
// Section Visibility
80+
const sections = $state({
81+
resume: false,
82+
projects: false,
83+
about: false
84+
});
85+
86+
// On Mount
7587
onMount(() => {
7688
const updateTime = () => {
7789
time = new Intl.DateTimeFormat('en-US', {
@@ -82,11 +94,35 @@
8294
timeZone: 'America/Chicago'
8395
}).format(new Date());
8496
};
85-
8697
updateTime();
8798
const interval = setInterval(updateTime, 1000);
8899
89-
return () => clearInterval(interval);
100+
const observer = new IntersectionObserver(
101+
(entries) => {
102+
entries.forEach(entry => {
103+
const sectionId = entry.target.id as keyof typeof sections;
104+
if (sectionId in sections && entry.isIntersecting) {
105+
sections[sectionId] = true;
106+
observer.unobserve(entry.target);
107+
}
108+
});
109+
},
110+
{
111+
threshold: 0
112+
}
113+
);
114+
115+
Object.keys(sections).forEach(sectionId => {
116+
const section = document.querySelector(`#${sectionId}`);
117+
if (section) {
118+
observer.observe(section);
119+
}
120+
});
121+
122+
return () => {
123+
clearInterval(interval);
124+
observer.disconnect();
125+
};
90126
});
91127
</script>
92128

@@ -164,95 +200,108 @@
164200
</div>
165201

166202
<div id="resume">
167-
<div class="title">
168-
<Header text="Resume" icon="clipboard" direction="right" />
169-
</div>
170-
<div class="lists">
171-
<ul>
172-
<li class="header">Foundations</li>
173-
<li>TypeScript</li>
174-
<li>HTML + CSS</li>
175-
<li>SvelteKit</li>
176-
<li>Go</li>
177-
<li>Python</li>
178-
<li>Pandas + Matplotlib</li>
179-
<li>Bash</li>
180-
<li>Canvas</li>
181-
</ul>
182-
<ul>
183-
<li class="header">Toolkit</li>
184-
<li>Website Design</li>
185-
<li>Illustrator</li>
186-
<li>Photoshop</li>
187-
<li>Figma</li>
188-
<li>Data Analysis + Visualization</li>
189-
<li>DevOps</li>
190-
<li>QA + Testing</li>
191-
</ul>
192-
<ul>
193-
<li class="header">Ethos</li>
194-
<li>Accuracy</li>
195-
<li>Structure</li>
196-
<li>Transparency</li>
197-
<li>Reliability</li>
198-
<li>Integrity</li>
199-
<li>Inquiry</li>
200-
<li>Diligence</li>
201-
</ul>
202-
</div>
203-
<div class="download">
204-
<a href="/Matthew_J_Moran_Resume.pdf" download>
205-
Download Resume
206-
</a>
207-
</div>
208-
</div>
209-
210-
<div id="projects">
211-
<div class="title">
212-
<Header text="Projects" icon="crane" direction="left" x={95} />
213-
</div>
214-
<div class="list">
215-
<a href="https://github.com/JSA-Partners" target="_blank">
216-
<ul>
217-
<li>CATS <span>2023-Present</span></li>
218-
<li>TypeScript, SvelteKit, Go</li>
203+
{#if sections.resume}
204+
<div class="title" in:blur={animationParams.section(0)}>
205+
<Header text="Resume" icon="clipboard" direction="right" />
206+
</div>
207+
<div class="lists">
208+
<ul in:blur={animationParams.section(1)}>
209+
<li class="header">Foundations</li>
210+
<li>TypeScript</li>
211+
<li>HTML + CSS</li>
212+
<li>SvelteKit</li>
213+
<li>Go</li>
214+
<li>Python</li>
215+
<li>Pandas + Matplotlib</li>
216+
<li>Bash</li>
217+
<li>Canvas</li>
219218
</ul>
220-
</a>
221-
<a href="https://github.com/mattjmoran/dotfiles-macos" target="_blank">
222-
<ul>
223-
<li>dotfiles for macOS <span>2021-2023</span></li>
224-
<li>Bash, Open Source</li>
219+
<ul in:blur={animationParams.section(2)}>
220+
<li class="header">Toolkit</li>
221+
<li>Website Design</li>
222+
<li>Illustrator</li>
223+
<li>Photoshop</li>
224+
<li>Figma</li>
225+
<li>Data Analysis + Visualization</li>
226+
<li>DevOps</li>
227+
<li>QA + Testing</li>
225228
</ul>
226-
</a>
227-
<a href="/">
228-
<ul>
229-
<li>Generative Art <span>2023</span></li>
230-
<li>JavaScript, P5, Three.js</li>
229+
<ul in:blur={animationParams.section(3)}>
230+
<li class="header">Ethos</li>
231+
<li>Accuracy</li>
232+
<li>Structure</li>
233+
<li>Transparency</li>
234+
<li>Reliability</li>
235+
<li>Integrity</li>
236+
<li>Inquiry</li>
237+
<li>Diligence</li>
231238
</ul>
232-
</a>
233-
<a href="/">
234-
<ul>
235-
<li>Digital Color Theory <span>2019</span></li>
236-
<li>Java, Processing</li>
237-
</ul>
238-
</a>
239-
</div>
239+
</div>
240+
<div class="download" in:blur={animationParams.section(4)}>
241+
<a href="/Matthew_J_Moran_Resume.pdf" download>
242+
Download Resume
243+
</a>
244+
</div>
245+
{/if}
246+
</div>
247+
248+
249+
<div id="projects">
250+
{#if sections.projects}
251+
<div class="title" in:blur={animationParams.section(0)}>
252+
<Header text="Projects" icon="crane" direction="left" x={95} />
253+
</div>
254+
<div class="list">
255+
<a href="https://github.com/JSA-Partners" target="_blank">
256+
<ul in:blur={animationParams.section(1)}>
257+
<li>CATS <span>2023-Present</span></li>
258+
<li>TypeScript, SvelteKit, Go</li>
259+
</ul>
260+
</a>
261+
<a href="https://github.com/mattjmoran/dotfiles-macos" target="_blank">
262+
<ul in:blur={animationParams.section(2)}>
263+
<li>dotfiles for macOS <span>2021-2023</span></li>
264+
<li>Bash, Open Source</li>
265+
</ul>
266+
</a>
267+
<a href="/">
268+
<ul in:blur={animationParams.section(3)}>
269+
<li>Generative Art <span>2023</span></li>
270+
<li>JavaScript, P5, Three.js</li>
271+
</ul>
272+
</a>
273+
<a href="/">
274+
<ul in:blur={animationParams.section(3)}>
275+
<li>Digital Color Theory <span>2019</span></li>
276+
<li>Java, Processing</li>
277+
</ul>
278+
</a>
279+
</div>
280+
{/if}
240281
</div>
241282

242283
<div id="about">
243-
<div class="title">
244-
<Header text="About" icon="paper-airplane" direction="right" x={95} />
245-
</div>
246-
<div class="content">
247-
<ul>
248-
<li><a href="https://github.com/mattjmoran" target="_blank">Github</a></li>
249-
<li><a href="https://www.linkedin.com/in/matt-j-moran/" target="_blank">LinkedIn</a></li>
250-
<li><a href="mailto:[email protected]">Email</a></li>
251-
</ul>
252-
<p>
253-
Matthew Moran is a Software Engineer with a strong background in software development, data visualization, automation testing, and leading projects across various industries. He holds a Bachelor of Science in Computer Science and Art from the University of Wisconsin–Madison. With experience in both contract and full-time roles, Matthew focuses on building innovative solutions and refining digital tools to enhance efficiency and performance. Beyond development, he also applies his design expertise to create intuitive and visually compelling user experiences.
254-
</p>
255-
</div>
284+
{#if sections.about}
285+
<div class="title" in:blur={animationParams.section(0)}>
286+
<Header text="About" icon="paper-airplane" direction="right" x={95} />
287+
</div>
288+
<div class="content">
289+
<ul>
290+
<li in:blur={animationParams.section(1)}>
291+
<a href="https://github.com/mattjmoran" target="_blank">Github</a>
292+
</li>
293+
<li in:blur={animationParams.section(2)}>
294+
<a href="https://www.linkedin.com/in/matt-j-moran/" target="_blank">LinkedIn</a>
295+
</li>
296+
<li in:blur={animationParams.section(3)}>
297+
<a href="mailto:[email protected]">Email</a>
298+
</li>
299+
</ul>
300+
<p in:blur={animationParams.section(4)}>
301+
Matthew Moran is a Software Engineer with a strong background in software development, data visualization, automation testing, and leading projects across various industries. He holds a Bachelor of Science in Computer Science and Art from the University of Wisconsin–Madison. With experience in both contract and full-time roles, Matthew focuses on building innovative solutions and refining digital tools to enhance efficiency and performance. Beyond development, he also applies his design expertise to create intuitive and visually compelling user experiences.
302+
</p>
303+
</div>
304+
{/if}
256305
</div>
257306

258307
<footer>

0 commit comments

Comments
 (0)