Updates

derickmoncado · Apr 7, 2024 · 209af6f · 209af6f
1 parent 0d8d2cc
commit 209af6f
Show file tree

Hide file tree

Showing 8 changed files with 356 additions and 6 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
diff --git a/assets/css/main.min.css b/assets/css/main.min.css
diff --git a/assets/images/me-headshot.jpg b/assets/images/me-headshot.jpg
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -17234,6 +17234,7 @@
 		});
 	});
 
+	// =============================
 	// Init Swiper (swiper.js)
 	const swiper = new Swiper(".swiper", {
 		loop: true,
@@ -17250,19 +17251,82 @@
 		}
 	});
 
+	// =============================
 	// Init Emergence (emergence.js)
 	emergence.init({
 		elemCushion: 0.75, // toggles class when element is 75% visible
 		reset: false
 	});
 
+	// =============================
 	// Init tooltips everywhere (popper.js)
 	var popoverTriggerList = [].slice.call(
 		document.querySelectorAll('[data-bs-toggle="popover"]')
 	);
 	var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
 		return new bootstrap.Popover(popoverTriggerEl);
 	});
+
+	// =============================
+	/* Assign subpage a unique ID */
+	// Get the current page's filename (assuming your pages are in the same directory)
+	var currentPage = window.location.pathname.split("/").pop().split(".")[0];
+
+	// Assign the current page's filename as the HTML ID
+	document.documentElement.id = currentPage;
+
+	// =============================
+	/* Fetch GitHub Gists */
+	const username = "derickmoncado";
+	const snippetsContainer = document.querySelector(".snippet-list");
+	let snippets = [];
+
+	const fetchSnippets = async () => {
+		try {
+			const uri = `https://api.github.com/users/${username}/gists`;
+			const res = await fetch(uri);
+			const data = await res.json();
+			snippets = data;
+		} catch (error) {
+			console.log(error);
+		}
+
+		console.log(snippets);
+
+		let template = "";
+		snippets.forEach((snippet) => {
+			let snippetFilename;
+			let snippetDesc = snippet.description;
+			let snippetId = snippet.id;
+
+			// Access the files object of each object
+			const filesObject = snippet.files;
+
+			// Iterate over the keys in the files object and get/assign the filename value
+			Object.keys(filesObject).forEach((key) => {
+				snippetFilename = filesObject[key].filename;
+
+				// Add space and remove ".js" extension from filename
+				snippetFilename = snippetFilename.replace(").js", " )");
+			});
+
+			template += `
+            <li class="snippet">
+                <div class="snippet__description">
+                    <h4>${snippetFilename}</h4>
+                    <p>${snippetDesc}</p>
+                </div>
+                <div class="snippet__code">
+                    <iframe src="https://gist.github.com/derickmoncado/${snippetId}.pibb"></iframe>
+                </div>
+            </li>
+        `;
+		});
+
+		snippetsContainer.innerHTML = template;
+	};
+
+	fetchSnippets();
 })();
 
 //# sourceMappingURL=main.js.map
diff --git a/assets/js/main.js.map b/assets/js/main.js.map
diff --git a/assets/js/main.min.js b/assets/js/main.min.js
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" id="test">
 
   <head>
     <title>Derick Moncado | Front End Dev</title>
@@ -49,6 +49,15 @@
       					<li class="nav-item px-2">
       						<a class="nav-link" href="#dm-contact-me">Contact</a>
       					</li>
+
+      					<li class="nav-item px-2" id="to-snippets">
+      						<a class="nav-link" href="/snippets.html" target="_blank">Snippets &nbsp;<i
+      								class="bi bi-box-arrow-up-right"></i></a>
+      					</li>
+      					<li class="nav-item px-2" id="back-to-dm">
+      						<a class="nav-link" href="/index.html"><i class="bi bi-arrow-left-circle-fill"></i>&nbsp; Back
+      							to DM</a>
+      					</li>
       				</ul>
       			</div>
       		</div>

diff --git a/snippets.html b/snippets.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en" id="test">
+
+  <head>
+    <title>Derick Moncado | Front End Dev</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="author" content="Derick Moncado">
+    <meta name="description" content="Derick Moncado | Front End Developer and Designer from Southern California">
+    <meta name="keywords" content="Derick Moncado, Front End Developer, Developer, Designer, Los Angeles">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+    <!-- CSS -->
+    <link rel="stylesheet" href="assets/css/main.min.css">
+  </head>
+
+  <body>
+    <main role="main">
+      <!-- Header -->
+      <header id="dm-header">
+      	<nav class="navbar navbar-expand-lg navbar-light py-4">
+      		<div class="container">
+      			<a class="navbar-brand" href="#dm-hero">
+      				<img src="assets/images/dm-logo.png" alt="Derick Moncado">
+      			</a>
+      			<!-- TODO: TURN TOGGLE BUTTON TO AN "X" WHEN CLICKED -->
+      			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
+      				aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+      				<span class="navbar-toggler-icon"></span>
+      			</button>
+      			<div class="collapse navbar-collapse flex-grow-0" id="navbarNavDropdown">
+      				<ul class="navbar-nav">
+      					<li class="nav-item px-2">
+      						<a class="nav-link" href="#dm-about-me">About</a>
+      					</li>
+      					<li class="nav-item px-2">
+      						<a class="nav-link" href="#dm-skills-and-hobbies">Skills</a>
+      					</li>
+      					<li class="nav-item px-2">
+      						<a class="nav-link" href="#dm-services">Services</a>
+      					</li>
+      					<li class="nav-item px-2">
+      						<a class="nav-link" href="#dm-qualifications">Qualifications</a>
+      					</li>
+      					<li class="nav-item px-2">
+      						<a class="nav-link" href="#dm-testimonials">Testimonials</a>
+      					</li>
+      					<li class="nav-item px-2">
+      						<a class="nav-link" href="#dm-contact-me">Contact</a>
+      					</li>
+
+      					<li class="nav-item px-2" id="to-snippets">
+      						<a class="nav-link" href="/snippets.html" target="_blank">Snippets &nbsp;<i
+      								class="bi bi-box-arrow-up-right"></i></a>
+      					</li>
+      					<li class="nav-item px-2" id="back-to-dm">
+      						<a class="nav-link" href="/index.html"><i class="bi bi-arrow-left-circle-fill"></i>&nbsp; Back
+      							to DM</a>
+      					</li>
+      				</ul>
+      			</div>
+      		</div>
+      	</nav>
+      </header>
+      <!-- Body -->
+      <!--- Snippets section --->
+      <section id="dm-snippets">
+          <div class="container-sm">
+              <div class="dm-snippets-content">
+                  <div class="dm-snippets-content__heading">
+                      <h2>Snippets</h2>
+                      <p>A collection of useful JavaScript snippets</p>
+                  </div>
+
+                  <div class="dm-snippets-content__search">
+                      <form>
+                          <label for="searchInput" class="visually-hidden">Search Snippets...</label>
+                          <input type="search" class="form-control" id="searchInput" placeholder="Search snippets...">
+                      </form>
+                  </div>
+
+                  <div class="dm-snippets-content__body">
+                      <h3>Array Methods</h3>
+                      <hr>
+                      <div class="snippets">
+                          <ul class="snippet-list">
+                              <!-- Fetched and populated with JS -->
+                          </ul>
+                      </div>
+
+                  </div>
+              </div>
+          </div>
+      </section>
+
+      <!-- Footer -->
+      <footer>
+        <div class="container text-center">
+          <img src="assets/images/dm-logo.png" alt="Derick Moncado">
+          <p class="small">&copy; Copyright Derick Moncado 2024</p>
+          <p class="small"><i class="bi bi-code-slash"></i></p>
+        </div>
+      </footer>    </main>
+
+    <!-- JS -->
+    <script src="assets/js/main.min.js"></script>
+  </body>
+
+</html>