Profile, Portfolio Initial

index.html

@@ -34,10 +34,16 @@
       </div>
     </div>
     <div class="buttons">
-      <button class="btn btn-dark profile" id="js-profile">Profile</button>
-      <button class="btn btn-dark portfolio" id="js-portfolio">Portfolio</button>
+      <button class="btn btn-dark" id="js-profile">Profile</button>
+      <button class="btn btn-dark" id="js-portfolio">Portfolio</button>
     </div>
   </main>
+  <div class="profile">
+    <button class="js-main-btn btn-dark">Back</button>
+  </div>
+  <div class="portfolio">
+    <button class="js-main-btn btn-dark">Back</button>
+  </div>
   <script src="index.js"></script>
 </body>
 </html>

index.js

@@ -22,13 +22,31 @@ function animateSkills() {
 };
 
 function displayProfile() {
+    // Hide and Show elements
+    document.querySelector('main').style.opacity = 0;
+    document.querySelector('.portfolio').style.opacity = 0;
+    document.querySelector('.profile').style.opacity = 1;
     console.log('Profile');
 }
 
 function displayPortfolio() {
+    // Hide and Show elements
+    document.querySelector('main').style.opacity = 0;
+    document.querySelector('.profile').style.opacity = 0;
+    document.querySelector('.portfolio').style.opacity = 1;
+
     console.log('Portfolio');
 }
 
+function displayMain() {
+    // Hide and Show elements
+    document.querySelector('.profile').style.opacity = 0;
+    document.querySelector('.portfolio').style.opacity = 0;
+    document.querySelector('main').style.opacity = 1;
+
+    console.log('Main');
+}
+
 document.addEventListener('DOMContentLoaded', () => {
     // Main Content
     document.querySelector('.main').style.opacity = 1;
@@ -37,7 +55,13 @@ document.addEventListener('DOMContentLoaded', () => {
     animateSkills();
 
     // Profile
-    document.querySelector('.profile').addEventListener('click', displayProfile);
+    document.querySelector('#js-profile').addEventListener('click', displayProfile);
+
     // Portfolio
-    document.querySelector('.portfolio').addEventListener('click', displayPortfolio);
-});
+    document.querySelector('#js-portfolio').addEventListener('click', displayPortfolio);
+
+    // Display Main
+    document.querySelectorAll('.js-main-btn').forEach(button =>
+         button.addEventListener('click', displayMain)
+        );   
+    });

style.css

@@ -108,4 +108,8 @@ body {
   margin: 10px;
   width: 150px;
   /* width: 100%; */
+}
+
+.portfolio, .profile {
+  opacity: 0;
 }