abronkema / anthonybronkema Goto Github PK

• build out the ability to change out the tag text or rotate through different ones
• .split for scrolling?

headerIconCode.addEventListener('mouseenter', function(e) {
    headerNamePrimary.classList.toggle('hide');
    headerNameAlt.innerHTML = github;
})
headerIconEmail.addEventListener('mouseenter', function(e) {
    headerNamePrimary.classList.toggle('hide');
    headerNameAlt.innerHTML = mail;
})
headerIconTwitter.addEventListener('mouseenter', function(e) {
    headerNamePrimary.classList.toggle('hide');
    headerNameAlt.innerHTML = twitter;
})

headerIconCode.addEventListener('mouseleave', function() {
    headerNamePrimary.classList.toggle('hide');
    headerNameAlt.innerHTML = "";
})
headerIconEmail.addEventListener('mouseleave', function() {
    headerNamePrimary.classList.toggle('hide');
    headerNameAlt.innerHTML = "";
})
headerIconTwitter.addEventListener('mouseleave', function() {
    headerNamePrimary.classList.toggle('hide');
    headerNameAlt.innerHTML = "";
})

• Research whether template literals can be used in place of headerIconCode, headerIconEmail, headerIconTwitter
• Research whether the headerNamePrimary.classList.toggle('hide') can be turned into a function call
• Research whether template literals can be used in place of headerNameAlt.innerHTML =
  This is not okay and I need to fix it 🤪

current .header-icons > #mail is just an empty link. I don't think I want this as a direct email (users probably/may not want to use their email to contact me).

I'd like to utilize Netlify forms to create a form in the short term. Long term I'll make this a modal.

• make sure to add .trim

netlify allows 10mb file attachments. i'd like to disable this. not sure if that's a function in netlify dashboard or something code related

the design is intentionally simple right now, but without going overboard, it'd be cool to add:

• thin 3px border around the name text (that does not go underneath the icons)

to do that, i believe i'll need to:

• correct/specify the flex_container and child sizing.

hovering over the icons triggers a text change, but the mouseenter area that triggers this is not the same as the a:hover area.

• Hovering over any area that highlights from a:hover should also trigger the text change.
• Transitioning between icons/links should be smooth - the mouseleave for headerIcon should not trigger between icons

• toggle dark mode with white text
• toggle light mode with dark grey text (or black?)
• toggle component should be long rectangular with very slight round to corners
• moon icon <i class="fas fa-moon"></i>
• sun icon <i class="fas fa-sun"></i>