add finished photo ninja and screenshot

Author: solygambas

README.md

@@ -64,15 +64,15 @@ Based on [Bulma CSS Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9
 
 A photography portfolio website to learn Materialize basics.
 
-<!-- [See Demo on CodePen](https://codepen.io/solygambas/full/KKWzKxw) -->
+[See Demo on CodePen](https://codepen.io/solygambas/full/poebvRy)
 
 [See photo-ninja folder](https://github.com/solygambas/html-css-frameworks/tree/master/photo-ninja)
 
-<!-- <p align="center">
+<p align="center">
     <a href="https://github.com/solygambas/html-css-frameworks/tree/master/photo-ninja">
-        <img src="photo-ninja/screenshot.png">
+        <img src="photo-ninja/screenshot.jpg">
     </a>
-</p> -->
+</p>
 
 ### Features
 

photo-ninja/README.md

@@ -2,10 +2,10 @@
 
 A photography portfolio website to learn Materialize basics.
 
-<!-- [See Demo on CodePen](https://codepen.io/solygambas/full/KKWzKxw) -->
+[See Demo on CodePen](https://codepen.io/solygambas/full/poebvRy)
 
 <p align="center">
-    <!-- <img src="screenshot.png"> -->
+    <img src="screenshot.jpg">
 </p>
 
 ## Features

photo-ninja/index.html

@@ -31,20 +31,52 @@
             ><i class="material-icons">menu</i></a
           >
           <ul class="right hide-on-med-and-down">
-            <li><a href="#photos">Portfolio</a></li>
+            <li><a href="#photos">Photos</a></li>
             <li><a href="#services">Services</a></li>
             <li><a href="#contact">Contact</a></li>
           </ul>
           <ul class="sidenav grey lighten-2" id="mobile-menu">
-            <li><a href="#photos">Portfolio</a></li>
+            <li><a href="#photos">Photos</a></li>
             <li><a href="#services">Services</a></li>
             <li><a href="#contact">Contact</a></li>
           </ul>
         </div>
       </nav>
     </header>
+    <!-- tooltips -->
+    <aside class="hide-on-med-and-down">
+      <ul>
+        <li>
+          <a
+            href="#"
+            class="tooltipped btn-floating btn-small deep-orange lighten-2"
+            data-tooltip="Instagram"
+            data-position="left"
+            ><i class="fab fa-instagram"></i
+          ></a>
+        </li>
+        <li>
+          <a
+            href="#"
+            class="tooltipped btn-floating btn-small deep-orange lighten-2"
+            data-tooltip="Facebook"
+            data-position="left"
+            ><i class="fab fa-facebook"></i
+          ></a>
+        </li>
+        <li>
+          <a
+            href="#"
+            class="tooltipped btn-floating btn-small deep-orange lighten-2"
+            data-tooltip="Twitter"
+            data-position="left"
+            ><i class="fab fa-twitter"></i
+          ></a>
+        </li>
+      </ul>
+    </aside>
     <!-- photo / grid -->
-    <section class="container section" id="photos">
+    <section class="container section scrollspy" id="photos">
       <div class="row">
         <div class="col s12 l4">
           <img
@@ -108,7 +140,7 @@ <h2 class="grey-text text-darken-4">Nature</h2>
       </div>
     </section>
     <!-- services / tabs -->
-    <section class="container section" id="services">
+    <section class="container section scrollspy" id="services">
       <div class="row">
         <div class="col s12 l4">
           <h2 class="grey-text text-darken-4">What I do...</h2>
@@ -162,7 +194,7 @@ <h2 class="grey-text text-darken-4">What I do...</h2>
       </div>
     </section>
     <!-- contact form -->
-    <section class="container section" id="contact">
+    <section class="container section scrollspy" id="contact">
       <div class="row">
         <div class="col s12 l5">
           <h2 class="grey-text text-darken-4">Get In Touch</h2>

photo-ninja/index.js

@@ -3,9 +3,13 @@ const lightboxes = document.querySelectorAll(".materialboxed");
 const parallaxes = document.querySelectorAll(".parallax");
 const tabs = document.querySelector(".tabs");
 const datepicker = document.querySelector(".datepicker");
+const tooltips = document.querySelectorAll(".tooltipped");
+const scrollspies = document.querySelectorAll(".scrollspy");
 
 M.Sidenav.init(sidenav);
 M.Materialbox.init(lightboxes);
 M.Parallax.init(parallaxes);
 M.Tabs.init(tabs);
 M.Datepicker.init(datepicker, { disableWeekends: true });
+M.Tooltip.init(tooltips);
+M.ScrollSpy.init(scrollspies);

photo-ninja/screenshot.jpg

@@ -1,10 +1,21 @@
 header {
-  background: url(https://images.unsplash.com/photo-1542940171-c8e6ffb7fc99?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80)
+  background: url(https://images.unsplash.com/photo-1542940171-c8e6ffb7fc99?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2400&q=80)
     top / cover;
-  /* background: url(https://i.ibb.co/TbFxMgn/man-min.jpg) top / cover; */
   min-height: 100vh;
 }
 
+aside {
+  position: absolute;
+  bottom: 2rem;
+  right: 2rem;
+}
+
+aside ul {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
 .section {
   padding: 4vw 0;
 }