Skip to content

Commit

Permalink
Merge pull request #2 from courthub74:contact-menu-nav
Browse files Browse the repository at this point in the history 
Contact-menu-nav
  • Loading branch information
@courthub74
courthub74 authored Jul 14, 2024
2 parents 56e856c + 9035dda commit c734b21
Show file tree
Hide file tree
Showing 6 changed files with 81 additions and 26 deletions.
Binary file added img/home/home.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 18 additions & 1 deletion index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,23 @@
body #whole_page .slide_in_menu .slide_in_contents .menu_contents .all_contacts .email_square button #copy_success.tapped {
opacity: 1;
}
body #whole_page .slide_in_menu .slide_in_contents .menu_contents .all_contacts #back_home {
background: none;
border: none;
font-family: "Inter", sans-serif;
font-weight: bold;
font-size: 1rem;
color: white;
margin-top: 2em;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5em;
}
body #whole_page .slide_in_menu .slide_in_contents .menu_contents .all_contacts #back_home #home_page {
height: 1.2em;
width: 1.2em;
}
body #whole_page .slide_in_menu .slide_in_contents .menu_contents .all_contacts .email_copied {
text-align: right;
width: 100%;
Expand Down Expand Up @@ -553,7 +570,7 @@
body #whole_page .whole_page .portfolio_section .portfolio_section_content .portfolio_content {
display: flex;
flex-direction: column;
gap: 1.5em;
gap: 1.2em;
color: white;
font-family: "Inter", sans-serif;
font-size: 0.8rem;
Expand Down
2 changes: 1 addition & 1 deletion index.css.map
View file

Large diffs are not rendered by default.

12 changes: 7 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@
<img src="./img/copybutton/copy_success.png" id="copy_success">
</button>
</div>
<!-- Back to Home Page -->
<button id="back_home"><img src="./img/home/home.png" id="home_page">Back to Home</button>
<!-- Copied -->
<div class="email_copied">
<p id="email_copy">Email Copied</p>
Expand Down Expand Up @@ -129,7 +131,7 @@
<li><a id="selected" href="#about_section_id">About</a></li>
<li><a href="#portfolio_section_id">Projects</a></li>
<li><a href="#skills_section_id">Skills</a></li>
<li><a href="#experience_section_id">Experience</a></li>
<li><a href="#footer_section_id">Experience</a></li>
<!-- <li><a href="#blog_section_id">Blog</a></li> -->
<li><a id="contact_about" href="#footer_section_id">Contact</a></li>
</ul>
Expand Down Expand Up @@ -198,7 +200,7 @@
<li><a href="#about_section_id">About</a></li>
<li><a id="selected" href="#portfolio_section_id">Projects</a></li>
<li><a href="#skills_section_id">Skills</a></li>
<li><a href="#experience_section_id">Experience</a></li>
<li><a href="#footer_section_id">Experience</a></li>
<!-- <li><a href="#blog_section_id">Blog</a></li> -->
<li><a id="contact_portfolio" href="#footer_section_id">Contact</a></li>
</ul>
Expand Down Expand Up @@ -495,7 +497,7 @@
<li><a href="#about_section_id">About</a></li>
<li><a href="#portfolio_section_id">Projects</a></li>
<li><a id="selected" href="#skills_section_id">Skills</a></li>
<li><a href="#experience_section_id">Experience</a></li>
<li><a href="#footer_section_id">Experience</a></li>
<!-- <li><a href="#blog_section_id">Blog</a></li> -->
<li><a id="contact_skills" href="#footer_section_id">Contact</a></li>
</ul>
Expand Down Expand Up @@ -710,7 +712,7 @@
<li><a href="#about_section_id">About</a></li>
<li><a href="#portfolio_section_id">Projects</a></li>
<li><a href="#skills_section_id">Skills</a></li>
<li><a id="selected" href="#experience_section_id">Experience</a></li>
<li><a id="selected" href="#footer_section_id">Experience</a></li>
<!-- <li><a href="#blog_section_id">Blog</a></li> -->
<li><a id="contact_experience" href="#footer_section_id">Contact</a></li>
</ul>
Expand Down Expand Up @@ -901,7 +903,7 @@
<a href="#portfolio_section_id">Projects |</a>
<a href="#skills_section_id">Skills |</a>
<a href="#experience_section_id">Experience |</a>
<a href="#">Contact</a>
<a href="#home_section_id" id="contact_nav">Contact</a>
</small>
<!-- <img src="./img/logos/CourdevelopsWhite.png" id="footer_logo"> -->
</div>
Expand Down
20 changes: 19 additions & 1 deletion index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,24 @@ $projectboxes: linear-gradient(45deg, #3b3e93, #060927);
}
}
}
// Back to Home Button
#back_home {
background: none;
border: none;
font-family: 'Inter', sans-serif;
font-weight: bold;
font-size: 1rem;
color: white;
margin-top: 2em;
cursor: pointer;
display: flex;
align-items: center;
gap: .5em;
#home_page {
height: 1.2em;
width: 1.2em;
}
}
// Email Copied words
.email_copied {
text-align: right;
Expand Down Expand Up @@ -756,7 +774,7 @@ $projectboxes: linear-gradient(45deg, #3b3e93, #060927);
display: flex;
flex-direction: column;
// gap: 2em;
gap: 1.5em;
gap: 1.2em;
color: white;
font-family: 'Inter', sans-serif;
font-size: .8rem;
Expand Down
54 changes: 36 additions & 18 deletions slidemenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,25 +44,43 @@ menu_button.addEventListener('pointerdown', () => {
});


// For the Contact Button on bottom nav
// Query the contact button in nav
let contact_nav = document.getElementById('contact_nav');
// slide to home page
// activate the contact button
contact_nav.addEventListener('pointerdown', () => {
console.log('Contact Button Pressed');
menu_button_ring.classList.toggle('tapped');
menu_button.classList.toggle('tapped');
menu_button_text.classList.toggle('tapped');
slide_in_menu.classList.toggle('tapped');
if (menu_button_text.innerText === "Contact") {
menu_button_text.innerText = "Back";
} else {
menu_button_text.innerText = "Contact";
}
learn_more_button.classList.toggle('slide');
whole_body.classList.toggle('stop_scroll');
});

// FOR WHEN THERE WAS A SELECTORS LIST
// add event listeners to the list selectors
// iterate through the slide_in_selectors using the forEach method
// slide_in_selectors.forEach((e) => {
// e.addEventListener('pointerdown', () => {
// console.log("Pressit");
// slide_in_menu.classList.remove('tapped');
// menu_button_ring.classList.toggle('tapped');
// menu_button.classList.toggle('tapped');
// menu_button_text.classList.toggle('tapped');
// if (menu_button_text.innerText === "Contact.") {
// menu_button_text.innerText = "Close";
// } else {
// menu_button_text.innerText = "Contact.";
// }
// learn_more_button.classList.toggle('slide');
// });
// });
// Query the back to home button
let home_button = document.getElementById('back_home');

// add event listener to the home button
home_button.addEventListener('pointerdown', () => {
console.log("Back to Home pressed");
menu_button_ring.classList.toggle('tapped');
menu_button.classList.toggle('tapped');
menu_button_text.classList.toggle('tapped');
slide_in_menu.classList.toggle('tapped');
if (menu_button_text.innerText === "Contact") {
menu_button_text.innerText = "Back";
} else {
menu_button_text.innerText = "Contact";
}
learn_more_button.classList.toggle('slide');
whole_body.classList.toggle('stop_scroll');
});


0 comments on commit c734b21

Please sign in to comment.