added header and footer

hugh5 · Apr 22, 2024 · 451fd1b · 451fd1b
1 parent fe63d19
commit 451fd1b
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 52 deletions.
diff --git a/_footer.html b/_footer.html
diff --git a/_navbar.html b/_navbar.html
diff --git a/experience.html b/experience.html
@@ -10,7 +10,15 @@
         <script src="js/script.js"></script>
     </head>
     <body>
-        <header></header>
+        <header>
+            <nav>
+                <a href="/">Home</a>
+                <a href="experience.html">Experience</a>
+                <a href="projects.html">Projects</a>
+                <a href="blog.html">Blog</a>
+                <a href="testimonials.html">Testimonials</a>
+            </nav>
+        </header>
         <div id="page">
             <div id="experience">
                 <div class="column">
@@ -252,6 +260,40 @@ <h4>Frameworks and Tools</h4>
                 </div>
             </div>
         </div>
-        <footer></footer>
+        <footer>
+            <div class="row">
+                <p>&copy; 2024 Hugh's Portfolio. All rights reserved.</p>
+                <a href="mailto: [email protected]">
+                    <div class="column">
+                        <img
+                            class="social-icon"
+                            src="images/email.png"
+                            alt="Email"
+                        />
+                        Email
+                    </div>
+                </a>
+                <a href="https://github.com/hugh5" target="_blank">
+                    <div class="column">
+                        <img
+                            class="social-icon"
+                            src="images/github.png"
+                            alt="GitHub"
+                        />
+                        GitHub
+                    </div>
+                </a>
+                <a href="https://linkedin.com/in/hugh-drummond7" target="_blank"
+                    ><div class="column">
+                        <img
+                            class="social-icon"
+                            src="images/linkedin.png"
+                            alt="LinkedIn"
+                        />
+                        LinkedIn
+                    </div>
+                </a>
+            </div>
+        </footer>
     </body>
 </html>
diff --git a/index.html b/index.html
@@ -10,7 +10,15 @@
         <script src="js/script.js"></script>
     </head>
     <body>
-        <header></header>
+        <header>
+            <nav>
+                <a href="/">Home</a>
+                <a href="experience.html">Experience</a>
+                <a href="projects.html">Projects</a>
+                <a href="blog.html">Blog</a>
+                <a href="testimonials.html">Testimonials</a>
+            </nav>
+        </header>
         <div id="page">
             <div id="home">
                 <div class="column">
@@ -66,6 +74,40 @@ <h3>Career Objectives</h3>
                 </div>
             </div>
         </div>
-        <footer></footer>
+        <footer>
+            <div class="row">
+                <p>&copy; 2024 Hugh's Portfolio. All rights reserved.</p>
+                <a href="mailto: [email protected]">
+                    <div class="column">
+                        <img
+                            class="social-icon"
+                            src="images/email.png"
+                            alt="Email"
+                        />
+                        Email
+                    </div>
+                </a>
+                <a href="https://github.com/hugh5" target="_blank">
+                    <div class="column">
+                        <img
+                            class="social-icon"
+                            src="images/github.png"
+                            alt="GitHub"
+                        />
+                        GitHub
+                    </div>
+                </a>
+                <a href="https://linkedin.com/in/hugh-drummond7" target="_blank"
+                    ><div class="column">
+                        <img
+                            class="social-icon"
+                            src="images/linkedin.png"
+                            alt="LinkedIn"
+                        />
+                        LinkedIn
+                    </div>
+                </a>
+            </div>
+        </footer>
     </body>
 </html>
diff --git a/js/script.js b/js/script.js
@@ -1,18 +1,15 @@
 function loadNav() {
-    // Load the navbar
-    $("header").load("_navbar.html", function () {
-        // Colour the active nav item
-        var path = window.location.pathname;
-        var page = path.split("/").pop();
-        if (page == "" || page == "index.html") {
-            page = "/";
+    // Colour the active nav item
+    var path = window.location.pathname;
+    var page = path.split("/").pop();
+    if (page == "" || page == "index.html") {
+        page = "/";
+    }
+    $("nav a").each(function () {
+        var href = $(this).attr("href");
+        if (page == href) {
+            $(this).addClass("active");
         }
-        $("nav a").each(function () {
-            var href = $(this).attr("href");
-            if (page == href) {
-                $(this).addClass("active");
-            }
-        });
     });
 
     // On scroll, hide/show the navbar
@@ -31,10 +28,6 @@ function loadNav() {
     });
 }
 
-function loadFooter() {
-    $("footer").load("_footer.html");
-}
-
 let counter = {
     project1: 0,
     project2: 0,
@@ -122,6 +115,5 @@ function loadImageSliders() {
 
 $(function () {
     loadNav();
-    loadFooter();
     loadImageSliders();
 });
diff --git a/projects.html b/projects.html
@@ -10,7 +10,15 @@
         <script src="js/script.js"></script>
     </head>
     <body>
-        <header></header>
+        <header>
+            <nav>
+                <a href="/">Home</a>
+                <a href="experience.html">Experience</a>
+                <a href="projects.html">Projects</a>
+                <a href="blog.html">Blog</a>
+                <a href="testimonials.html">Testimonials</a>
+            </nav>
+        </header>
         <div id="page">
             <div id="projects">
                 <div class="column">
@@ -407,6 +415,40 @@ <h5>Desktop App</h5>
                 </div>
             </div>
         </div>
-        <footer></footer>
+        <footer>
+            <div class="row">
+                <p>&copy; 2024 Hugh's Portfolio. All rights reserved.</p>
+                <a href="mailto: [email protected]">
+                    <div class="column">
+                        <img
+                            class="social-icon"
+                            src="images/email.png"
+                            alt="Email"
+                        />
+                        Email
+                    </div>
+                </a>
+                <a href="https://github.com/hugh5" target="_blank">
+                    <div class="column">
+                        <img
+                            class="social-icon"
+                            src="images/github.png"
+                            alt="GitHub"
+                        />
+                        GitHub
+                    </div>
+                </a>
+                <a href="https://linkedin.com/in/hugh-drummond7" target="_blank"
+                    ><div class="column">
+                        <img
+                            class="social-icon"
+                            src="images/linkedin.png"
+                            alt="LinkedIn"
+                        />
+                        LinkedIn
+                    </div>
+                </a>
+            </div>
+        </footer>
     </body>
 </html>