Rework page loading

A2Y-D5L · Oct 27, 2024 · d00ee57 · d00ee57
1 parent 0b34d03
commit d00ee57
Show file tree

Hide file tree

Showing 10 changed files with 154 additions and 177 deletions.
diff --git a/index.html b/index.html
@@ -18,14 +18,14 @@
 
 <body>
     <header>
-        <a class="page-title" onclick="renderPage('home')">AndyDonnell</a>
+        <a class="page-title" onclick="loadPage()">AndyDonnell</a>
+        <nav>
+            <button onclick="loadPage('blog')">Blog</button>
+            <button onclick="loadPage('resume')">Career</button>
+        </nav>
     </header>
     <main>
-        <section id="selected-page">
-            <h2>Projects</h2>
-            <div id="projects-container">
-                <!-- GitHub projects written here -->
-            </div>
+        <section id="page">
         </section>
     </main>
     <footer>
@@ -44,14 +44,16 @@ <h2>Projects</h2>
             </a>
         </div>
     </footer>
-    <script>
-        document.addEventListener('DOMContentLoaded', function () {
-            renderGithubRepos();
-        });
     </script>
+    <script src="scripts/github_repos.js"></script>
+    <script src="scripts/resize_title.js"></script>
+    <script src="pages/page_blog.js"></script>
+    <script src="pages/page_home.js"></script>
+    <script src="pages/page_career.js"></script>
+    <script src="pages/load.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () { loadPage(); });
     </script>
-    <script src="scripts/resizeTitle.js"></script>
-    <script src="scripts/renderPage.js"></script>
 </body>
 
 </html>
diff --git a/pages/load.js b/pages/load.js
@@ -0,0 +1,23 @@
+async function loadPage(name) {
+	try {
+		let main = document.getElementById('main');
+		if (!main) {
+			console.error(`"main" element not found`);
+			return;
+		}
+		main.innerHTML = '';
+		switch (name) {
+			case 'blog':
+				main.innerHTML = blogPage();
+				break;
+			case 'career':
+				main.innerHTML = careerPage();
+				break;
+			default:
+				main.innerHTML = homePage();
+				break;
+		}
+	} catch (error) {
+		console.error(`Error loading page: "${name}"`, error);
+	}
+}
diff --git a/pages/load_page.js b/pages/load_page.js
diff --git a/pages/page_blog.js b/pages/page_blog.js
@@ -1,30 +1,27 @@
-async function loadBlogPage() {
-	try {
-		document.getElementById('page').innerHTML = `
-<h2>Blog</h2>
-<p>
-	🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
-	🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
-	🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
-	🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
-	🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
-	🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
-	🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
-	🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
-	🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
-	🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
-	🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
-	🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
-	🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
-	🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
-	🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
-	🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
-</p>
-<p>
-	That's a lot of crickets! I'm still working on this page. Check back later for updates.
-</p>
-`;
-	} catch (error) {
-		console.error('Error loading page:', error);
-	}
+function blogPage() {
+	return `<h2>Blog</h2>
+		<p>
+			🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
+			🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
+			🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
+			🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
+			🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
+			🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
+			🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
+			🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
+			🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
+			🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
+			🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
+			🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
+			🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
+			🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
+			🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
+			🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗🦗<br>
+		</p>
+		<p>
+			That's a lot of crickets! I'm still working on this page.
+		</p>
+		<p>
+			Check back later for updates.
+		</p>`;
 }
diff --git a/pages/page_career.js b/pages/page_career.js
@@ -0,0 +1,61 @@
+async function careerPage() {
+    return `<h2>My Career Journey</h2>
+        <article>
+            <h3>Military Background</h3>
+            <p>My journey has led me from the U.S. Army to the forefront of technology. In the Army, serving
+                as a
+                Satellite Communications Technician and Team Leader at Fort Drum, New York from 2008 to
+                2012, I
+                mastered the intricacies of mobile satellite communications and network coordination. This
+                role
+                involved handling a mobile satcom terminal and interfacing with a mobile networking hub to
+                ensure
+                seamless connectivity for tactical operations. My time in the military was more than just
+                about
+                discipline; it was about honing technical and leadership skills under challenging
+                conditions.</p>
+
+            <h3>Academic Achievements</h3>
+            <p>Following my military service, I pursued academic interests at Harrisburg University of
+                Science &
+                Technology, earning a B.S. in Computer & Information Science, graduating Cum Laude. My
+                university
+                years were an immersive exploration into the world of computer science, forming a solid
+                foundation
+                for my technology career.</p>
+
+            <h3>Professional Experience</h3>
+            <h4>Elsevier</h4>
+            <p>My professional journey in software engineering began at Elsevier in Philadelphia. As a
+                Software
+                Engineer, I was deeply involved in full-stack web development for an authoring workflow
+                system used
+                in clinical medicine. Utilizing Java and Spring for backend development, and JavaScript with
+                ExtJS
+                for the frontend, I contributed to enhancing the efficiency and functionality of the system,
+                significantly impacting the way clinical experts author, review, and approve evidence-based
+                guidance.</p>
+
+            <h4>Vanguard</h4>
+            <p>At The Vanguard Group, my role evolved, leading me to spearhead the development of a
+                web-based tool
+                for back-office staff. This project involved creating a system for reconciling transaction
+                errors
+                and providing comprehensive dashboards and reporting tools for retail money movement. Here,
+                my
+                toolkit expanded to include Java for backend microservices, hosted on ECS, and DynamoDB for
+                database
+                management. My efforts not only optimized processes but also brought about a significant
+                reduction
+                in processing time and bolstered security, earning me recognition and awards.</p>
+
+            <h4>Macquarie Group</h4>
+            <p>Today, at The Macquarie Group, I’m harnessing my extensive experience to lead and innovate in
+                new
+                technological ventures. My career is a testament to continuous learning and excellence, with
+                each
+                role contributing significantly to my expertise in managing and implementing cutting-edge
+                technology
+                solutions.</p>
+        </article>`;
+}
diff --git a/pages/page_home.js b/pages/page_home.js
@@ -1,7 +1,11 @@
-async function loadHomePage() {
-	try {
-
-	} catch (error) {
-		console.error('Error loading page:', error);
-	}
+
+const repoList = document.createElement('div');
+repoList.id = 'repo-list';
+const repos = await loadGithubRepos()
+repos.forEach(repo => {
+	repoList.appendChild(createRepoDiv(repo));
+});
+async function homePage() {
+	return `<h2>Projects</h2>
+		${repoList.outerHTML}`;
 }
diff --git a/pages/page_resume.js b/pages/page_resume.js
diff --git a/scripts/githubRepos.js → scripts/github_repos.js b/scripts/githubRepos.js → scripts/github_repos.js
@@ -9,17 +9,34 @@ async function fetchGithubRepos() {
 		}
 		const repos = await response.json();
 		// Store the fetched repos and timestamp in local storage
-		const cacheData = {
+		localStorage.setItem(gitHubReposCacheKey, JSON.stringify({
 			timestamp: Date.now(),
 			repos: repos
-		};
-		localStorage.setItem(gitHubReposCacheKey, JSON.stringify(cacheData));
+		}));
 		return repos;
 	} catch (error) {
 		console.error('Error fetching GitHub repositories:', error);
 		return [];
 	}
 }
+async function loadGithubRepos() {
+	try {
+		const cachedData = localStorage.getItem(gitHubReposCacheKey);
+		const cacheDuration = 24 * 60 * 60 * 1000; // 24 hours
+		if (cachedData) {
+			const parsedData = JSON.parse(cachedData);
+			if (Date.now() - parsedData.timestamp > cacheDuration) {
+				return await fetchGithubRepos();
+			}
+			return parsedData.repos;
+		}
+		return await fetchGithubRepos();
+	} catch (error) {
+		console.error('Error fetching GitHub repositories:', error);
+		return [];
+	}
+}
+
 
 function createRepoDiv(repo) {
 	const repoElement = document.createElement('div');
@@ -31,35 +48,3 @@ function createRepoDiv(repo) {
     `;
 	return repoElement;
 }
-
-async function renderGithubRepos() {
-	try {
-		// Check if repos are already in local storage
-		const cachedData = localStorage.getItem(gitHubReposCacheKey);
-		const cacheDuration = 24 * 60 * 60 * 1000; // 24 hours
-
-		let repos;
-		if (cachedData) {
-			const parsedData = JSON.parse(cachedData);
-			if (Date.now() - parsedData.timestamp < cacheDuration) {
-				repos = parsedData.repos;
-			} else {
-				repos = await fetchGithubRepos();
-			}
-		} else {
-			repos = await fetchGithubRepos();
-		}
-
-		const projectsDiv = document.getElementById('projects-container');
-		if (!projectsDiv) {
-			console.error('projects-container element not found');
-			return;
-		}
-		projectsDiv.innerHTML = '';
-		repos.forEach(repo => {
-			projectsDiv.appendChild(createRepoDiv(repo));
-		});
-	} catch (error) {
-		console.error('Error rendering GitHub repositories:', error);
-	}
-}
diff --git a/scripts/renderPage.js b/scripts/renderPage.js
diff --git a/scripts/resizeTitle.js → scripts/resize_title.js b/scripts/resizeTitle.js → scripts/resize_title.js