Updated contact component button types, added href attributes to header links, improved project image alt text, refactored scroll event listeners in JavaScript, and refined SCSS styles for borders and text decoration.
This commit is contained in:
Spencer Flagg
parent
865bb7ae4e
commit
c3eb574465
5 changed files with 48 additions and 67 deletions
|
|
@ -20,13 +20,12 @@
|
|||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<button class="btn" id="show-button" onclick="copyText()">find me on NOSTR</button>
|
||||
<button class="btn" id="show-button" type="button" onclick="copyText()">find me on NOSTR</button>
|
||||
<div id="input-container" style="display: none;">
|
||||
<textarea
|
||||
type="text"
|
||||
id="input-text"
|
||||
onclick="selectText()">npub1skj3cm05l26sjg8w8lxa5z4k6kueh0mccykp6zchf2wacu7mslfsney3cq</textarea>
|
||||
<button class="btn" onclick="copyToClipboard()">
|
||||
<button class="btn" type="button" onclick="copyToClipboard()">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon icon-tabler icon-tabler-copy"
|
||||
|
|
|
|||
|
|
@ -11,13 +11,16 @@
|
|||
</h2>
|
||||
<ul class="menu">
|
||||
<li>
|
||||
<a id="button-freelance-work" >Freelance Work {% include "components/corner-right-down.svg" %}</a>
|
||||
<a id="button-freelance-work" href="#freelance-work">Freelance Work {% include "components/corner-right-down.svg" %}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="button-personal-projects">Personal Projects {% include "components/corner-right-down.svg" %}</a>
|
||||
<a id="button-personal-projects" href="#personal-projects">Personal Projects {% include "components/corner-right-down.svg" %}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="button-personal-projects" href="https://registry.jsonresume.org/spencerflagg" target="_blank">Resume | CV {% include "components/external-link.svg" %}</a>
|
||||
<a id="button-portfolio" href="https://portfolio.spencerflagg.com" target="_blank" rel="noopener noreferrer">Portfolio {% include "components/external-link.svg" %}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="button-resume" href="https://registry.jsonresume.org/spencerflagg" target="_blank" rel="noopener noreferrer">Resume | CV {% include "components/external-link.svg" %}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<li class="project" id="{{ project.slug }}">
|
||||
<a class="project__image-wrapper" href="{{ project.link }}"><img class="project__image" src="./assets/images/{{ project.slug }}.png" alt=""></a>
|
||||
<a class="project__image-wrapper" href="{{ project.link }}"><img class="project__image" src="./assets/images/{{ project.slug }}.png" alt="{{ project.company }} — {{ project.project }}"></a>
|
||||
<div class="project__content">
|
||||
<label>company</label>
|
||||
<div class="content__field"><strong>{{ project.company }}</strong></div>
|
||||
|
|
|
|||
|
|
@ -65,69 +65,48 @@ headers.forEach(function (section) {
|
|||
|
||||
const contact = document.querySelector(".contact");
|
||||
|
||||
gsap.to(contact, {
|
||||
//height: "initial",
|
||||
//'min-height': "initial",
|
||||
//padding: "1rem",
|
||||
scrollTrigger: {
|
||||
trigger: contact,
|
||||
start: "top top",
|
||||
pin: true,
|
||||
pinSpacing: false,
|
||||
endTrigger: 'body', // the element that the scrolling should stop at
|
||||
end: 'bottom', // where the scrolling should stop
|
||||
toggleActions: 'play none none reverse', // what happens when the element goes off screen
|
||||
},
|
||||
});
|
||||
|
||||
// gsap.to("#scroll-to-top", {
|
||||
// scrollTrigger: {
|
||||
// trigger: contact,
|
||||
// start: "top top",
|
||||
// pin: true,
|
||||
// pinSpacing: false,
|
||||
// endTrigger: 'body', // the element that the scrolling should stop at
|
||||
// end: 'bottom', // where the scrolling should stop
|
||||
// toggleActions: 'play none none reverse', // what happens when the element goes off screen
|
||||
// },
|
||||
// });
|
||||
if (contact) {
|
||||
gsap.to(contact, {
|
||||
//height: "initial",
|
||||
//'min-height': "initial",
|
||||
//padding: "1rem",
|
||||
scrollTrigger: {
|
||||
trigger: contact,
|
||||
start: "top top",
|
||||
pin: true,
|
||||
pinSpacing: false,
|
||||
endTrigger: 'body', // the element that the scrolling should stop at
|
||||
end: 'bottom', // where the scrolling should stop
|
||||
toggleActions: 'play none none reverse', // what happens when the element goes off screen
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/* SCROLL BUTTONS */
|
||||
|
||||
document.querySelector("#button-freelance-work").addEventListener("click", e => {
|
||||
// scroll to the spot where .box-c is in the center.
|
||||
// parameters: element, smooth, position
|
||||
smoother.scrollTo("#freelance-work", true, "center center");
|
||||
// or you could animate the scrollTop:
|
||||
// gsap.to(smoother, {
|
||||
// scrollTop: smoother.offset(".box-c", "center center"),
|
||||
// duration: 1
|
||||
// });
|
||||
});
|
||||
const btnFreelance = document.querySelector("#button-freelance-work");
|
||||
if (btnFreelance) {
|
||||
btnFreelance.addEventListener("click", e => {
|
||||
e.preventDefault();
|
||||
smoother.scrollTo("#freelance-work", true, "center center");
|
||||
});
|
||||
}
|
||||
|
||||
document.querySelector("#button-personal-projects").addEventListener("click", e => {
|
||||
// scroll to the spot where .box-c is in the center.
|
||||
// parameters: element, smooth, position
|
||||
smoother.scrollTo("#personal-projects", true, "center center");
|
||||
const btnPersonal = document.querySelector("#button-personal-projects");
|
||||
if (btnPersonal) {
|
||||
btnPersonal.addEventListener("click", e => {
|
||||
e.preventDefault();
|
||||
smoother.scrollTo("#personal-projects", true, "center center");
|
||||
});
|
||||
}
|
||||
|
||||
// or you could animate the scrollTop:
|
||||
// gsap.to(smoother, {
|
||||
// scrollTop: smoother.offset(".box-c", "center center"),
|
||||
// duration: 1
|
||||
// });
|
||||
});
|
||||
|
||||
document.querySelector("#back-to-top").addEventListener("click", e => {
|
||||
// scroll to the spot where .box-c is in the center.
|
||||
// parameters: element, smooth, position
|
||||
smoother.scrollTo("h1", true, "center center");
|
||||
|
||||
// or you could animate the scrollTop:
|
||||
// gsap.to(smoother, {
|
||||
// scrollTop: smoother.offset(".box-c", "center center"),
|
||||
// duration: 1
|
||||
// });
|
||||
});
|
||||
const btnTop = document.querySelector("#back-to-top");
|
||||
if (btnTop) {
|
||||
btnTop.addEventListener("click", e => {
|
||||
e.preventDefault();
|
||||
smoother.scrollTo("h1", true, "center center");
|
||||
});
|
||||
}
|
||||
|
||||
//ScrollTrigger.defaults({ scroller: smoother }); // this screws up click events
|
||||
|
|
@ -136,7 +136,7 @@ header {
|
|||
align-self: flex-start;
|
||||
|
||||
li{
|
||||
border-inline-start: .5rem var(--c-text-light);
|
||||
border-inline-start: .5rem solid var(--c-text-light);
|
||||
padding-inline-start: .2rem;
|
||||
|
||||
a{
|
||||
|
|
@ -169,7 +169,7 @@ header {
|
|||
a{
|
||||
color: var(--c-text);
|
||||
text-decoration: underline;
|
||||
text-decoration-line: dotted;
|
||||
text-decoration-style: dotted;
|
||||
text-decoration-color: #6130002f;
|
||||
text-decoration-thickness: 0.05em;
|
||||
//text-decoration-style: dotted;
|
||||
|
|
|
|||
Loading…
Reference in a new issue