Personal Portfolio Website

Hi. I’m currently doing the “Personal Portfolio Project” on the Full-Stack Engineer skill path (https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fecp-html-css-and-js-portfolio-project/modules/fecp-personal-portfolio-website/kanban_projects/portfolio-website). I’ve mostly finished the project, however, there are a few issues I can’t resolve. I’ve tried lots of different solutions and none seem to work.

These are my issues:

  1. I can’t make the buttons to show the projects I have done (I put two, “Mixed Messages” and “Tuples”) have an arrow or disc to make it clearer they have a drop-down option
  2. I’d like my name to be on the same level as my navbar, but can’t do it.
  3. I don’t want any text to appear underneath my photo.
  4. I’d like the default to have the projects drop-down (detailing “Mixed Messages” and “Tuples”) closed, not open (i.e. the buttons to be toggled off by default)

Below is my HTML, CSS and JavaScript code.

I’ve also included a screenshot of what my website is currently looking like.

Thanks a lot in advance for your help! :grinning:

<!DOCTYPE html>
<html lang='en'>

<head>
    <title>My Portfolio</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/2beacff43a.js" crossorigin="anonymous"></script>
</head>

<body>
    <script src="script.js" defer></script>
    <header>
        <nav>
            <ul class="navigation">
                <li><a href="contact.html">Contact</a></li>
                <li><a href="#skills">Skills</a></li>         
                <li><a href="#projects">Projects</a></li>
                <li><a href="#about-me">About Me</a></li>                               
            </ul>
        </nav>
    </header>

    <h1>Matthew Smith</h1>

    <div class="content">
    <div class="about-me">
    <aside>
        <img src="Images/photo-of-me.jpg" alt="Photo of Matthew Smith">
    </aside>        
    <h2>About Me</h2>
        <br>
        <p>Hi! I'm Matthew, Since I was young, I have always had a passion for helping other people. I studied Biomedical Science at university, and I translated this passion into working in the product safety departments of three major companies.</p>
        <br>
        <p>However, recently I’ve been investigating the long-term direction my career should take. As part of this research, I took YouScience aptitude tests, and performed very strongly in skills related to computing, a career direction I had never considered before.</p>
        <br>
        <p>To test whether this was suited to me, I started a beginners’ Python programming course, and have really enjoyed it and confidently succeeded in the assignments. I then started Codecademy's Full-Stack Engineer programming course and have been making huge progress.</p>
        <br>
        <p>I'm currently seeking a junior full-stack developer position because it will enable me to change career direction to my new-found love for software and programming, which I can then combine with my passion for helping other people by developing software for their benefit.</p>
        <br>
    </div>

    <div class="projects">
    <h2>Projects</h2>
        <button onclick="showMixedMessagesDetails()">Mixed Messages</button>
        <div id="Mixed_Messages">
            <p>For this project, I built a message generator program. Every time a user runs a program, they get a new, randomized output of three different jokes.</p>
        </div>
        <button onclick="showTuplesDetails()">Tuples</button>
        <div id="Tuples">           
            <p>I wrote a program to read through a massive .txt file and figure out the distribution by hour of the day for each of the messages. Once I accumulated the counts for each hour, I printed out the counts, sorted by hour.</p>
        </div>          
    </div>
    <br>

    <div class="skills">
    <h2>Skills</h2>
    <br>
    <div class="icons">
        <i class="fab fa-html5"></i>
        <i class="fab fa-css3-alt"></i>
        <i class="fab fa-js"></i>
        <i class="fab fa-python"></i>
        <i class="fab fa-git"></i>
        <i class="fab fa-github"></i>
    </div>
    </div>

    <button onclick="toggleDarkMode()" id="toggle_dark_mode">Toggle Dark Mode</button>
    </div>

</body>
</html>
/*RESET STYLES*/

* {
    margin: 0;
    padding: 0;
}

/*GLOBAL STYLES*/

html {
    font-family: "Open Sans", Helvetica, sans-serif;
    line-height: 1.4;
}

body {
    background-color: whitesmoke;
    max-width: 960px;
    margin: auto;
    padding: 20px;
}

.dark-mode {
    background-color: black;
    color: whitesmoke;
}

/*NAVIGATION BAR STYLES*/

header {
    height: 69px;
    width: 100%;
    top: 0;
    border-bottom: 1px;
    justify-content: space-between;
}

nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    justify-self: end;
    overflow: hidden;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navigation {
    margin: 0;
    list-style: none;
}

a {
    color: inherit; 
    text-decoration: inherit; 
  }

.navigation a {
    float: right;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
    font-weight: bold;
}

.navigation a:hover {
    opacity: 0.7;
    background-color: black;
    color: whitesmoke;
    text-decoration: none;
}

/*BODY STYLES*/

img {
    border-radius: 25px;
}

aside {
    padding-left: .5rem;
    margin-left: .5rem;
    float: right;
}

.about-me, .projects, .skills {
    display: block;
}

button {
    border: none;
    display: list-item;
    list-style-type: disc;
    margin-top: 17px;
    margin-bottom: 17px;
    background-color: whitesmoke;
    font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
}

#toggle_dark_mode {
    border: 2px solid black;
    padding: 0.2em;
}

.icons {
    font-size: 2em;
}

i {
    padding-right: 0.5em;
}
<!DOCTYPE html>
<html lang='en'>

<head>
    <title>My Portfolio</title>
    <link rel="stylesheet" href="contact-style.css">
    <script src="https://kit.fontawesome.com/2beacff43a.js" crossorigin="anonymous"></script>
</head>

<body>
    <script src="script.js" defer></script>
    <header>
        <nav>
            <ul class="navigation">           
                <li><a href="#contact">Contact</a></li>
                <li><a href="index.html">Skills</a></li>
                <li><a href="index.html">Projects</a></li>
                <li><a href="index.html">About Me</a></li>
            </ul>
        </nav>
    </header>

    <h1>Matthew Smith</h1>

    <h2>About Me</h2>
    <br>
    <p>If you would like to get in contact, I would love to hear from you! Please contact me using LinkedIn, GitHub or email using the links below:</p>
    <br>

    <div class="icons">
        <i class="fab fa-linkedin"></i>
        <i class="fas fa-envelope-square"></i>
        <i class="fab fa-github"></i>
    </div>

    <button onclick="toggleDarkMode()" id="toggle_dark_mode">Toggle Dark Mode</button>

</body>
</html>
/*RESET STYLES*/

* {
    margin: 0;
    padding: 0;
}

/*GLOBAL STYLES*/

html {
    font-family: "Open Sans", Helvetica, sans-serif;
    line-height: 1.4;
}

body {
    background-color: whitesmoke;
    max-width: 960px;
    margin: auto;
    padding: 20px;
}

.dark-mode {
    background-color: black;
    color: whitesmoke;
}

/*NAVIGATION BAR STYLES*/

header {
    height: 69px;
    width: 100%;
    top: 0;
    border-bottom: 1px;
    justify-content: space-between;
}

nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    justify-self: end;
    overflow: hidden;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navigation {
    margin: 0;
    list-style: none;
}

a {
    color: inherit; 
    text-decoration: inherit; 
  }

.navigation a {
    float: right;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
    font-weight: bold;
}

.navigation a:hover {
    opacity: 0.7;
    background-color: black;
    color: whitesmoke;
    text-decoration: none;
}

/*BODY STYLES*/

.about-me, .projects, .skills {
    display: block;
}

button {
    border: none;
    display: list-item;
    list-style-type: disc;
    margin-top: 17px;
    margin-bottom: 17px;
    background-color: whitesmoke;
    font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
}

#toggle_dark_mode {
    border: 2px solid black;
    padding: 0.2em;
}

.icons {
    font-size: 2em;
}

i {
    padding-right: 0.5em;
}
function showMixedMessagesDetails() {
    var x = document.getElementById("Mixed_Messages");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }

  function showTuplesDetails() {
    var x = document.getElementById("Tuples");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }      
  }

  function toggleDarkMode() {
    var element = document.body;
    element.classList.toggle("dark-mode");
  }

Hi, maybe I can help you to fix some of your issues. So first of all if you want your name to be displayed in your navbar as some kind of logo, it should be in your header as a span or an a tag. So i’ve modified your header structure a little bit.

Header section HTML :

<div class="nav-container">
    <header>
      <a href="index.html" class="logo">Matthew Smith</a>
        <nav>
          
            <ul class="navigation">
                <li><a href="contact.html">Contact</a></li>
                <li><a href="#skills">Skills</a></li>         
                <li><a href="#projects">Projects</a></li>
                <li><a href="#about-me">About Me</a></li>                               
            </ul>
        </nav>
    </header>
   </div>

Header / Navbar CSS :

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding:2em;
}

header .logo {
  color: black;
  font-weight: bold;
  padding: 10px 12px;
}

header nav {
  float: right;
}

header nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style-type: none;
}

header nav ul a {
  display: block;
  padding: 2em 1em;
  font-weight: bold;
  text-align: center;
  padding: 10px 12px;
  text-decoration: none;
  color: black;
}



.navigation a:hover {
    opacity: 0.7;
    background-color: black;
    color: whitesmoke;
    text-decoration: none;
}

Here I’ve place your name in the header as an a tag also linking to your index.html.

So regarding your photo, I noticed that you used an aside element, so by simply giving it some height
like so :
Giving it the height of the viewport will avoid any of your text to spill under your photo.

aside {
    height: 100vh;
}

And regarding your buttons, you want to create a dropdown showing your projects ? I can see that your buttons are working. So can your describe to me what do your want to achieve exactly and give me a visual example.

Hope that helps you to fix some of your issues, let me know if these are working for you.

Thank you so much for your help! That code has sorted problems 2 and 3! :grinning:

However, my name is now slightly indented from the edge, and I’ve tried a few things but can’t target the name specifically to make it move all the way to the left (see below screenshot).

Regarding my buttons, firstly, I’d like a dropdown arrow to be displayed but can’t make one appear (see below screenshot). Secondly, I’d like the dropdown content to be hidden by default. I’ve tried a few things but can’t make the code do this.

Also, for some reason my “Toggle Dark Mode” button doesn’t work now. I’m not sure why. I tried a couple of things but neither fixed it.

First screenshot:

Second screenshot:
Capture

Hi, I see. This can be fixed but I’ll need to see your code again, can you post your actual code ?

Sorry! Of course, here it is:

<!DOCTYPE html>
<html lang='en'>

<head>
    <title>My Portfolio</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/2beacff43a.js" crossorigin="anonymous"></script>
</head>

<body>
    <script src="script.js" defer></script>

    <div class="nav-container">
        <header>
          <a href="index.html" class="logo">Matthew Smith</a>
            <nav>
                <ul class="navigation">                           
                    <li><a href="index.html">About Me</a></li>
                    <li><a href="#projects">Projects</a></li>
                    <li><a href="#skills">Skills</a></li>
                    <li><a href="contact.html">Contact</a></li>                              
                </ul>
            </nav>
        </header>
    </div>  

    <div class="content">
    <div class="about-me">
    <aside>
        <img src="Images/photo-of-me.jpg" alt="Photo of Matthew Smith">
    </aside>        
    <h2>About Me</h2>
        <br>
        <p>Hi! I'm Matthew, Since I was young, I have always had a passion for helping other people. I studied Biomedical Science at university, and I translated this passion into working in the product safety departments of three major companies.</p>
        <br>
        <p>However, recently I’ve been investigating the long-term direction my career should take. As part of this research, I took YouScience aptitude tests, and performed very strongly in skills related to computing, a career direction I had never considered before.</p>
        <br>
        <p>To test whether this was suited to me, I started a beginners’ Python programming course, and have really enjoyed it and confidently succeeded in the assignments. I then started Codecademy's Full-Stack Engineer programming course and have been making huge progress.</p>
        <br>
        <p>I'm currently seeking a junior full-stack developer position because it will enable me to change career direction to my new-found love for software and programming, which I can then combine with my passion for helping other people by developing software for their benefit.</p>
        <br>
    </div>

    <div class="projects">
    <h2>Projects</h2>
        <button onclick="showMixedMessagesDetails()">Mixed Messages</button>
        <div id="Mixed_Messages">
            <p>For this project, I built a message generator program. Every time a user runs a program, they get a new, randomized output of three different jokes.</p>
        </div>
        <button onclick="showTuplesDetails()">Tuples</button>
        <div id="Tuples">           
            <p>I wrote a program to read through a massive .txt file and figure out the distribution by hour of the day for each of the messages. Once I accumulated the counts for each hour, I printed out the counts, sorted by hour.</p>
        </div>          
    </div>
    <br>

    <div class="skills">
    <h2>Skills</h2>
    <br>
    <div class="icons">
        <i class="fab fa-html5"></i>
        <i class="fab fa-css3-alt"></i>
        <i class="fab fa-js"></i>
        <i class="fab fa-python"></i>
        <i class="fab fa-git"></i>
        <i class="fab fa-github"></i>
    </div>
    </div>

    <button onclick="toggleDarkMode()" id="toggle_dark_mode">Toggle Dark Mode</button>
    </div>

</body>
</html>
/*RESET STYLES*/

* {
    margin: 0;
    padding: 0;
}

/*GLOBAL STYLES*/

html {
    font-family: "Open Sans", Helvetica, sans-serif;
    line-height: 1.4;
}

body {
    background-color: whitesmoke;
    max-width: 960px;
    margin: auto;
    padding: 20px;
}

.dark-mode {
    background-color: black;
    color: whitesmoke;
}

/*NAVIGATION BAR STYLES*/

header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding:2em;
}
  
header .logo {
    color: black;
    font-weight: bold;
    padding: 10px 12px;
    float: left;   
}

.logo {
    font-size: 32px;
    text-decoration: none;
}
  
header nav {
    float: right;
}
  
header nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style-type: none;
}
  
header nav ul a {
    display: block;
    padding: 2em 1em;
    font-weight: bold;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
    color: black;
}
    
.navigation a:hover {
    opacity: 0.7;
    background-color: black;
    color: whitesmoke;
    text-decoration: none;
}

/*BODY STYLES*/

img {
    border-radius: 25px;
}

aside {
    padding-left: .5rem;
    margin-left: .5rem;
    float: right;
    height: 100vh;
}

.about-me, .projects, .skills {
    display: block;
}

button {
    border: none;
    display: list-item;
    list-style-type: disc;
    margin-top: 17px;
    margin-bottom: 17px;
    background-color: whitesmoke;
    font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
}

#toggle_dark_mode {
    border: 2px solid black;
    padding: 0.2em;
}

.icons {
    font-size: 2em;
}

i {
    padding-right: 0.5em;
}
<!DOCTYPE html>
<html lang='en'>

<head>
    <title>My Portfolio</title>
    <link rel="stylesheet" href="contact-style.css">
    <script src="https://kit.fontawesome.com/2beacff43a.js" crossorigin="anonymous"></script>
</head>

<body>
    <script src="script.js" defer></script>
    <div class="nav-container">
    <header>
        <a href="index.html" class="logo">Matthew Smith</a>
          <nav>
              <ul class="navigation">
                  <li><a href="index.html">About Me</a></li>
                  <li><a href="#projects">Projects</a></li>
                  <li><a href="#skills">Skills</a></li>
                  <li><a href="contact.html">Contact</a></li>
              </ul>
          </nav>
      </header>
     </div>

    <h2>About Me</h2>
    <br>
    <p>If you would like to get in contact, I would love to hear from you! Please contact me using LinkedIn, GitHub or email using the links below:</p>
    <br>

    <div class="icons">
        <i class="fab fa-linkedin"></i>
        <i class="fas fa-envelope-square"></i>
        <i class="fab fa-github"></i>
    </div>

    <button onclick="toggleDarkMode()" id="toggle_dark_mode">Toggle Dark Mode</button>

</body>
</html>
/*RESET STYLES*/

* {
    margin: 0;
    padding: 0;
}

/*GLOBAL STYLES*/

html {
    font-family: "Open Sans", Helvetica, sans-serif;
    line-height: 1.4;
}

body {
    background-color: whitesmoke;
    max-width: 960px;
    margin: auto;
    padding: 20px;
}

.dark-mode {
    background-color: black;
    color: whitesmoke;
}

/*NAVIGATION BAR STYLES*/

header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding:2em;
}
  
header .logo {
    color: black;
    font-weight: bold;
    padding: 10px 12px;
}

.logo {
    font-size: 32px;
    text-decoration: none;
}
  
header nav {
    float: right;
}
  
header nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style-type: none;
}
  
header nav ul a {
    display: block;
    padding: 2em 1em;
    font-weight: bold;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
    color: black;
}
    
.navigation a:hover {
    opacity: 0.7;
    background-color: black;
    color: whitesmoke;
    text-decoration: none;
}

/*BODY STYLES*/

.about-me, .projects, .skills {
    display: block;
}

button {
    border: none;
    display: list-item;
    list-style-type: disc;
    margin-top: 17px;
    margin-bottom: 17px;
    background-color: whitesmoke;
    font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
}

#toggle_dark_mode {
    border: 2px solid black;
    padding: 0.2em;
}

.icons {
    font-size: 2em;
}

i {
    padding-right: 0.5em;
}
function showMixedMessagesDetails() {
    var x = document.getElementById("Mixed_Messages");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }

  function showTuplesDetails() {
    var x = document.getElementById("Tuples");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }      
  }

  function toggleDarkMode() {
    var element = document.body;
    element.classList.toggle("dark-mode");
    var headerCode = document.querySelectorAll('.nav-container');
    headerCode.classList.toggle("dark-mode");
  }

Ok so from what I can see you change the font-size of the logo which is the name: Mathew Smith and that is mainly why It went off center. If you want to keep it that way you can simply add some padding-top to your nav like so :

header nav {
    float: right;
    padding-top: 14px;
}

If you think it is still a little off, you can just adjust the nav padding-top.

Your Dark mode Toggle seems to be working except for you nav, I would suggest you to use #333333 instead of black also.

Regarding your dropdown I would suggest you to try the bootstrap ones. Bootstrap Dropdown, you just have to add the cdn (Bootstrap CDN) to your head. You down have to use their buttons but you can actually apply their features like for example the a dropdown menu to your existing element just by adding the bootstrap classes to your elements.
Try to implement this and see how it goes.

Thanks a lot for your suggestions. I managed to fix the issue with the name and dropdowns. I fixed the name by adjusting the “padding-left” and fixed the dropdown by using the “summary” and “details” tags instead.

However, I’m still having issues with toggling the dark mode. Whatever fix I try, for some reason it will not change the text in the header (see below screenshot). Please find my updated code below too.

<!DOCTYPE html>
<html lang='en'>

<head>
    <title>My Portfolio</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/2beacff43a.js" crossorigin="anonymous"></script>
</head>

<body>
    <script src="script.js"></script>

    <div class="nav-container">
        <header>
          <a href="index.html" class="logo">Matthew Smith</a>
            <nav>
                <ul class="navigation">                           
                    <li><a href="index.html">About Me</a></li>
                    <li><a href="#projects">Projects</a></li>
                    <li><a href="#skills">Skills</a></li>
                    <li><a href="contact.html">Contact</a></li>                              
                </ul>
            </nav>
        </header>
    </div>  

    <div class="content">
    <div class="about-me">
    <aside>
        <img src="Images/photo-of-me.jpg" alt="Photo of Matthew Smith">
    </aside>        
    <h2>About Me</h2>
        <br>
        <p>Hi! I'm Matthew, Since I was young, I have always had a passion for helping other people. I studied Biomedical Science at university, and I translated this passion into working in the product safety departments of three major companies.</p>
        <br>
        <p>However, recently I’ve been investigating the long-term direction my career should take. As part of this research, I took YouScience aptitude tests, and performed very strongly in skills related to computing, a career direction I had never considered before.</p>
        <br>
        <p>To test whether this was suited to me, I started a beginners’ Python programming course, and have really enjoyed it and confidently succeeded in the assignments. I then started Codecademy's Full-Stack Engineer programming course and have been making huge progress.</p>
        <br>
        <p>I'm currently seeking a junior full-stack developer position because it will enable me to change career direction to my new-found love for software and programming, which I can then combine with my passion for helping other people by developing software for their benefit.</p>
        <br>
    </div>

    <div class="projects">
    <h2>Projects</h2>
    <div class="dropdown">
        <div id="Mixed_Messages">
            <details>
                <summary>Mixed Messages</summary>
                <p>For this project, I built a message generator program. Every time a user runs a program, they get a new, randomized output of three different jokes.</p>
            </details>
        </div>
        <div id="Tuples">   
            <details>
                <summary>Tuples</summary>
                <p>I wrote a program to read through a massive .txt file and figure out the distribution by hour of the day for each of the messages. Once I accumulated the counts for each hour, I printed out the counts, sorted by hour.</p>
            </details>                    
        </div>  
    </div>                
    </div>
    <br>

    <div class="skills">
    <h2>Skills</h2>
    <br>
    <div class="icons">
        <i class="fab fa-html5"></i>
        <i class="fab fa-css3-alt"></i>
        <i class="fab fa-js"></i>
        <i class="fab fa-python"></i>
        <i class="fab fa-git"></i>
        <i class="fab fa-github"></i>
    </div>
    </div>

    <button onclick="toggleDarkMode()" id="toggle_dark_mode">Toggle Dark Mode</button>
    </div>

</body>
</html>
/*RESET STYLES*/

* {
    margin: 0;
    padding: 0;
}

/*GLOBAL STYLES*/

html {
    font-family: "Open Sans", Helvetica, sans-serif;
    line-height: 1.4;
}

body {
    background-color: whitesmoke;
    max-width: 960px;
    margin: auto;
    padding: 20px;
}

.dark-mode {
    background-color: #333333;
    color: whitesmoke;
}

/*NAVIGATION BAR STYLES*/

header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-top: 2em;
    padding-right: 2em;
    padding-bottom: 2em;
    padding-left: 0em;
    border-style: solid;
    border-color: blue;    
}
  
header .logo {
    color: black;
    font-weight: bold;
    padding-top: 10px;
    padding-right: 12px;
    padding-bottom: 10px;
    padding-left: 0px;
    margin: 0px;
    float: left;
    border-style: solid;
    border-color: red;
}

.logo {
    font-size: 32px;
    text-decoration: none;
}
  
header nav {
    float: right;
}
  
header nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style-type: none;
}
  
header nav ul a {
    display: block;
    padding: 2em 1em;
    font-weight: bold;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
    color: black;
    border-style: solid;
    border-color: green;
}
    
.navigation a:hover {
    opacity: 0.7;
    background-color: black;
    color: whitesmoke;
    text-decoration: none;
}

/*BODY STYLES*/

img {
    border-radius: 25px;
}

aside {
    padding-left: .5rem;
    margin-left: .5rem;
    float: right;
    height: 100vh;
}

.about-me, .projects, .skills {
    display: block;
}

details > summary {
    border: none;
    margin-top: 17px;
    margin-bottom: 17px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

#toggle_dark_mode {
    border: 2px solid black;
    padding: 0.2em;
}

.icons {
    font-size: 2em;
}

i {
    padding-right: 0.5em;
}

button {
    border: none;
    display: list-item;
    list-style-type: disc;
    margin-top: 17px;
    margin-bottom: 17px;
    background-color: whitesmoke;
    font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
}
<!DOCTYPE html>
<html lang='en'>

<head>
    <title>My Portfolio</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="contact-style.css">
    <script src="https://kit.fontawesome.com/2beacff43a.js" crossorigin="anonymous"></script>
</head>

<body>
    <script src="script.js"></script>
    <div class="nav-container">
    <header>
        <a href="index.html" class="logo">Matthew Smith</a>
          <nav>
              <ul class="navigation">
                  <li><a href="index.html">About Me</a></li>
                  <li><a href="#projects">Projects</a></li>
                  <li><a href="#skills">Skills</a></li>
                  <li><a href="contact.html">Contact</a></li>
              </ul>
          </nav>
      </header>
     </div>

    <h2>About Me</h2>
    <br>
    <p>If you would like to get in contact, I would love to hear from you! Please contact me using LinkedIn, GitHub or email using the links below:</p>
    <br>

    <div class="icons">
        <i class="fab fa-linkedin"></i>
        <i class="fas fa-envelope-square"></i>
        <i class="fab fa-github"></i>
    </div>

    <button onclick="toggleDarkMode()" id="toggle_dark_mode">Toggle Dark Mode</button>

</body>
</html>
/*RESET STYLES*/

* {
    margin: 0;
    padding: 0;
}

/*GLOBAL STYLES*/

html {
    font-family: "Open Sans", Helvetica, sans-serif;
    line-height: 1.4;
}

body {
    background-color: whitesmoke;
    max-width: 960px;
    margin: auto;
    padding: 20px;
}

.dark-mode {
    background-color: #333333;
    color: whitesmoke;
}

/*NAVIGATION BAR STYLES*/

header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding:2em;
}
  
header .logo {
    color: black;
    font-weight: bold;
    padding: 10px 12px;
}

.logo {
    font-size: 32px;
    text-decoration: none;
    border-style: solid;
    border-color: red;
}
  
header nav {
    float: right;
}
  
header nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style-type: none;
}
  
header nav ul a {
    display: block;
    padding: 2em 1em;
    font-weight: bold;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
    color: black;
}
    
.navigation a:hover {
    opacity: 0.7;
    background-color: black;
    color: whitesmoke;
    text-decoration: none;
}

/*BODY STYLES*/

.about-me, .projects, .skills {
    display: block;
}

button {
    border: none;
    display: list-item;
    list-style-type: disc;
    margin-top: 17px;
    margin-bottom: 17px;
    background-color: whitesmoke;
    font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
}

#toggle_dark_mode {
    border: 2px solid black;
    padding: 0.2em;
}

.icons {
    font-size: 2em;
}

i {
    padding-right: 0.5em;
}
  function toggleDarkMode() {
    var element = document.body;
    element.classList.toggle("dark-mode");
    var logoName = document.getElementsByTagName("HEADER");
    logoName.classList.toggle("dark-mode");
  }