home page

.gitignore

@@ -1 +1 @@
-files/
+files/

_footer.html

@@ -0,0 +1,21 @@
+<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>

_navbar.html

@@ -0,0 +1,7 @@
+<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>

css/style.css

@@ -0,0 +1,179 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Rubik+One&display=swap');
+
+
+:root {
+    --accent-color: #9B70ff;
+    --background-color: #141414;
+    --secondary-background-color: #525252;
+    --primary-text-color: #fff;
+    --secondary-text-color: #ccc;
+}
+
+
+html, body {
+    margin: 0;
+    padding: 0;
+    background-color: var(--background-color);
+    width: 100vw;
+    overflow-x: hidden;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    color: #fff;
+    min-height: 100vh;
+    position: relative;
+}
+
+header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 80px;
+}
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px 40px;
+    background-color: var(--secondary-background-color);
+    width: 700px;
+    position: fixed;
+    border-radius: 25px;
+    top: 20px;
+    z-index: 1000;
+}
+
+nav a {
+    position: relative;
+    top: 2px;
+    font-size: 20px;
+    color: var(--secondary-text-color);
+    /* border-bottom: 3px solid transparent; */
+    text-decoration: none;
+}
+
+nav a:hover, nav a.active {
+    color: var(--primary-text-color);
+    /* border-bottom: 3px solid var(--accent-color); */
+    box-shadow: 0 3px 0 var(--accent-color);
+}
+
+footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px 0px;
+    background-color: var(--secondary-background-color);
+}
+
+footer .row {
+    width: 800px;
+    justify-content: space-between;
+    overflow: auto;
+}
+
+.social-icon {
+    width: 30px;
+    height: 30px;
+}
+
+footer a {
+    text-decoration: none;
+    color: var(--primary-text-color);
+}
+
+#page {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 120px;
+}
+
+h1 {
+    font-family: 'Rubik One', sans-serif;
+    font-weight: bold;
+    font-size: 80px;
+    text-transform: uppercase;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+h2 {
+    font-family: 'Inter', sans-serif;
+    font-weight: bold;
+    font-size: 40px;
+    text-transform: uppercase;
+    margin-top: 0;
+    margin-bottom: 0;
+
+}
+
+h3 {
+    font-family: 'Inter', sans-serif;
+    font-weight: bold;
+    font-size: 30px;
+    margin-top: 30px;
+    margin-bottom: 0;
+    margin-left: 30px;
+    align-self: flex-start;
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.row>* {
+    margin: 0 20px;
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+#home {
+    max-width: 800px;
+}
+
+/* Add your custom styles below */
+.hello {
+    display: flex;
+    flex-direction: column;
+}
+
+.hello h1:nth-child(1) {
+    padding-left: 0;
+}
+
+.hello h1:nth-child(2) {
+    padding-left: 80px;
+}
+
+.hello h1:nth-child(3) {
+    padding-left: 160px;
+}
+
+.helloimage {
+    border-radius: 50%;
+    width: 200px;
+    height: 200px;
+    object-fit: cover;
+    display: block;
+}
+
+#experience {
+    max-width: 1000px;
+}

index.html

@@ -1,9 +1,70 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Document</title>
-    </head>
-    <body></body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Hugh's Portfolio</title>
+        <link rel="stylesheet" href="css/style.css" />
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+        <script src="js/script.js"></script>
+    </head>
+    <body>
+        <header></header>
+        <div id="page">
+            <div id="home">
+                <div class="column">
+                    <div class="row">
+                        <div>
+                            <img
+                                class="helloimage"
+                                src="images/hugh.png"
+                                alt="Hugh"
+                            />
+                        </div>
+                        <div class="hello">
+                            <h1>Hello</h1>
+                            <h1>I'm</h1>
+                            <h1>Hugh</h1>
+                        </div>
+                    </div>
+                    <h3>Introdction</h3>
+                    <p>
+                        I'm a passionate Mobile App Developer with a drive for
+                        creativity and innovation. Here, you'll find a curated
+                        collection of my work, showcasing my expertise, skills,
+                        and dedication to excellence.
+                    </p>
+                    <p>
+                        I thrive on solving complex problems, exploring new
+                        ideas, and creating meaningful experiences. With a
+                        background in Computer Science, I bring a unique blend
+                        of technical proficiency, strategic thinking, and a keen
+                        eye for detail to every project I undertake.
+                    </p>
+                    <h3>Career Objectives</h3>
+                    <p>
+                        I aim to drive innovation, deliver excellence, and solve
+                        complex problems by collaborating effectively,
+                        continuously learning and growing, and making meaningful
+                        contributions to the field of mobile app development.
+                    </p>
+                    <p>
+                        I seek to collaborate with and learn from experienced
+                        professionals in the field to continuously learn. With a
+                        strong foundation in programming and a proactive
+                        approach to skill development, my career objective is to
+                        immerse myself in challenging projects and environments
+                        where I can gain valuable insights, refine my technical
+                        expertise, and contribute effectively to innovative
+                        solutions. Through mentorship and collaboration with
+                        seasoned industry veterans, I aspire to accelerate my
+                        growth, broaden my skill set, and ultimately make
+                        meaningful contributions to the advancement of
+                        technology.
+                    </p>
+                </div>
+            </div>
+        </div>
+        <footer></footer>
+    </body>
+</html>

js/script.js

@@ -0,0 +1,39 @@
+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 = "/";
+        }
+        $("nav a").each(function () {
+            var href = $(this).attr("href");
+            if (page == href) {
+                $(this).addClass("active");
+            }
+        });
+    });
+
+    // Load the footer
+    $("footer").load("_footer.html");
+
+    // On scroll, hide/show the navbar
+    var lastScroll = 0;
+    $(window).scroll(function (event) {
+        var current = $(this).scrollTop();
+        var scrollMax = window.document.body.scrollHeight - window.innerHeight;
+        if (current < 20 || (current < lastScroll && current < scrollMax)) {
+            // Scroll up, show the navbar
+            $("nav").show(150);
+        } else if (current > lastScroll) {
+            // Scroll down, hide the navbar
+            $("nav").hide(150);
+        }
+        lastScroll = current;
+    });
+}
+
+$(function () {
+    loadNav();
+});