ST-ITM · github-classroom · Mar 12, 2024 · Mar 12, 2024 · Mar 13, 2024 · Mar 19, 2024
diff --git a/Images/Docker-Logo.png b/Images/Docker-Logo.png
diff --git a/Images/Microsoft-Azure-Logo.png b/Images/Microsoft-Azure-Logo.png
diff --git a/Images/hacker.png b/Images/hacker.png
diff --git a/Images/phishing.jpg b/Images/phishing.jpg
diff --git a/Images/prof.png b/Images/prof.png
diff --git a/Images/programming.png b/Images/programming.png
diff --git a/Images/pxfuel.jpg b/Images/pxfuel.jpg
diff --git a/Images/raspberrypi.png b/Images/raspberrypi.png
diff --git a/README.md b/README.md
@@ -1,3 +1,4 @@
+[![Review Assignment Due Date](https://classroom.github.com/assets/deadline-readme-button-24ddc0f5d75046c5622901739e7c5dd533143b0c8e959d652212380cedb1ea36.svg)](https://classroom.github.com/a/ooZJb8PN)
 <p><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Seoultech_LOGO.png" width=100 ></p>
 
 Lab Assignment #1 -- HTML and CSS

diff --git a/Website.mp4 b/Website.mp4
diff --git a/contact.html b/contact.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Home</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  </head>
+  <body>
+    <nav class="navbar fixed-top navbar-expand-sm">
+        <div class="container-fluid">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
+
+            <div class="container-fluid">
+            <ul class="nav fixed-top nav-underline justify-content-center">
+                <li class="nav-item">
+                <a class="nav-link text-white-50" href="index.html">Home</a>
+                </li>
+                <li class="nav-item">
+                <a class="nav-link text-white-50" href="portfolio.html">Portfolio</a>
+                </li>
+                <li class="nav-item">
+                <a class="nav-link text-white-50" href="skills.html">Skills</a>
+                </li>
+                <li class="nav-item">
+                <a class="nav-link active text-white-50" aria-current="page" href="#">Contact</a>
+                </li>
+            </ul>
+
+        </div>
+    </div>
+  </nav>
+      <div class="middle-text">
+        <div class="row">
+            <div class="col">
+              <input type="text" class="form-control" placeholder="Email" aria-label="Email">
+            </div>
+            <div class="col">
+              <input type="text" class="form-control" placeholder="Name" aria-label="Name">
+            </div>
+          </div>
+          <div class="mb-3">
+            <label for="exampleFormControlTextarea1" class="form-label text-light"></label>
+            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Message.."></textarea>
+          </div>
+          <button type="submit" class="btn bg-light">Submit</button>
+      </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Home</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  </head>
+  <body>
+    <nav class="navbar fixed-top navbar-expand-sm">
+        <div class="container-fluid">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
+
+            <div class="container-fluid">
+            <ul class="nav fixed-top nav-underline justify-content-center">
+                <li class="nav-item">
+                <a class="nav-link active text-white-50" aria-current="page" href="#">Home</a>
+                </li>
+                <li class="nav-item">
+                <a class="nav-link text-white-50" href="portfolio.html">Portfolio</a>
+                </li>
+                <li class="nav-item">
+                <a class="nav-link text-white-50" href="skills.html">Skills</a>
+                </li>
+                <li class="nav-item">
+                <a class="nav-link text-white-50" href="contact.html">Contact</a>
+                </li>
+            </ul>
+
+        </div>
+    </div>
+  </nav>
+      <div class="middle-text">
+        <div class="typewriter">
+          <h1 id="desktop-text">Welcome to my Portfolio Website.</h1>
+          <h1 id="mobile-text">Welcome!</h1>
+        </div>
+        <p>Welcome to my portfolio website. My name is Noah Ruiters and I am a cyber security 
+        student at Amsterdam universaty of applied science. I am in my third year of my bachelor.
+        This semerster I am on exchange at SeoulTech!</p>
+      </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+  </body>
+</html>
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Portfolio</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-sm fixed-top">
+        <div class="container-fluid">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
+
+            <div class="container-fluid">
+            <ul class="nav fixed-top nav-underline justify-content-center">
+                <li class="nav-item">
+                <a class="nav-link text-white-50" href="index.html">Home</a>
+                </li>
+                <li class="nav-item">
+                <a class="nav-link active text-white-50" aria-current="page" href="#">Portfolio</a>
+                </li>
+                <li class="nav-item">
+                <a class="nav-link text-white-50" href="skills.html">Skills</a>
+                </li>
+                <li class="nav-item">
+                <a class="nav-link text-white-50" href="contact.html">Contact</a>
+                </li>
+            </ul>
+
+        </div>
+    </div>
+  </nav>
+      <div class="flex-portfolio">
+        <div class="boxes">
+          <img src="Images/Microsoft-Azure-Logo.png" alt="Azure" height="100" width="190">
+          <h4>Cloud Solutions</h4>
+          <p>Last semester I did a Minor(Cloud Solutions) that was focused on the Cloud. The cloud provider that I learned about was Azure. During the Minor our objective was to create an application for a company in the cloud. I worked alot on the backend of the application.</p>
+        </div>
+        <div class="boxes">
+          <img src="Images/raspberrypi.png" alt="RaspberryPi" height="100" width="190">
+          <h4>FYS</h4>
+          <p>In my first year of my bachelor I worked on a project called FYS(Fasten Your Seatbelt). The objective was to create a wifi hotspot on a plane for Corendon Airlines. We were manditory to use a Raspberry Pi. When the user connects to the hotspot the user is redirected to a website login page. I worked alot on the backend.</p>
+        </div>
+        <div class="boxes">
+          <img src="Images/Docker-Logo.png" alt="Docker" height="100" width="190">
+          <h4>PAD</h4>
+          <p>The second project in my first year of my bachelor was called PAD(Project Agile Development). For this project the objective was to create a CTF(Capture The Flag) website using Docker. We created 3 challenges based on 3 different web vulnerabilities. I worked alot on the backend for this project.</p>
+        </div>
+        <div class="boxes">
+          <img src="Images/phishing.jpg" alt="phishing" height="100" width="190">
+          <h4>Project Security</h4>
+          <p>In my second year I worked on a project called Project Security. The objective was to create a case where a company was vulnerable for something. My company had phishing problems. So I created a program in python that would scan the emails based on its source. If the source was not trusted then it would get a warning.</p>
+        </div>
+      </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+  </body>
+</html>
diff --git a/skills.html b/skills.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Home</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  </head>
+  <body>
+    <nav class="navbar fixed-top navbar-expand-sm">
+        <div class="container-fluid">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
+
+            <div class="container-fluid">
+            <ul class="nav fixed-top nav-underline justify-content-center">
+                <li class="nav-item">
+                <a class="nav-link text-white-50" href="index.html">Home</a>
+                </li>
+                <li class="nav-item">
+                <a class="nav-link text-white-50" href="portfolio.html">Portfolio</a>
+                </li>
+                <li class="nav-item">
+                <a class="nav-link active text-white-50" aria-current="page" href="#">Skills</a>
+                </li>
+                <li class="nav-item">
+                <a class="nav-link text-white-50" href="contact.html">Contact</a>
+                </li>
+            </ul>
+
+        </div>
+    </div>
+  </nav>
+
+  <div class="middle-text">
+    <div class="typewriter">
+      <h1 id="desktop-text">Skills and Progression.</h1>
+      <h1 id="mobile-text">Skills.</h1>
+    </div>
+  </div>
+
+  <div class="skill-box">
+    <div class="progres-box">
+        <div class="flex-photo">
+            <img src="Images/hacker.png" alt="docker" height="33" width="33">
+            <h3>Security</h3>
+        </div>
+
+        <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+            <div class="progress-bar bg-danger" style="width: 50%">50%</div>
+        </div>
+        <p>I am a cyber security student so you would think my progression would be higher. But i think that 50% is reasonable. This is because cyber security is so big and it branches into alot of different things like defense, offense, web, network security etc. I feel like I only know the basics of everything. Last year I got my Jr penetration tester certificate from TryHackMe. I learned alot from TryHackMe an realised that security is much bigger than it looks.</p>
+    </div>
+    <div class="progres-box">
+        <div class="flex-photo">
+            <img src="Images/programming.png" alt="docker" height="33" width="33">
+            <h3>Programming</h3>
+        </div>
+
+        <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+            <div class="progress-bar bg-warning" style="width: 40%">40%</div>
+        </div>
+        <p>As a cyber security student I dont really program alot. That is why i put my progress at 40%. The only main language that i have learned is Python. I think I know Python well enough. This is because I have made alot of things in python like an API, backend(flask), scripts etc. The other langueges like C or Javascript I haven't learned. I am also not that good at coding in HTML and CSS so that is why I took this course.</p>
+    </div>
+
+
+    <div class="progres-box">
+        <div class="flex-photo">
+            <img src="Images/prof.png" alt="docker" height="33" width="33">
+            <h3>Professional Skills</h3>
+        </div>
+
+        <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+            <div class="progress-bar bg-success" style="width: 60%">60%</div>
+        </div>
+        <p>As a cyber security student I learn alot about professional skills at my universaty. I also have learned alot about professionalism during my internship at a cyber security company. Also at my universaty it is manditory to reflect on all the projects that I. When we reflect we use a method called STARR review. This helps reflecting. We reflect on concepts like communication, working in teams, leadership etc. This is why I think that I am at 60%.</p>
+    </div>
+
+    </div>
+  </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,118 @@
+body {
+    background-image: url('Images/pxfuel.jpg');
+    background-repeat: no-repeat;
+    background-attachment: fixed; 
+    background-size: 100% 100%;
+  }
+
+
+.middle-text > p{
+    color: rgb(197, 197, 197);
+}
+
+.middle-text{
+    padding: 14%;
+    text-align: center;
+}
+
+.flex-portfolio{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    padding: 80px;
+}
+.boxes{
+    color: black;
+    border-radius: 5px;
+    background-color: rgba(255, 255, 255);
+    font-size: 20px;
+    margin: 30px;
+    text-align: center;
+    width: 230px;
+    height: 400px;
+}
+
+.boxes > h4{
+    color: rgb(50, 44, 44);
+}
+
+.boxes > p{
+    font-size: 15px;
+}
+
+.typewriter{
+    display: inline-block;
+}
+
+.typewriter #desktop-text, #mobile-text {
+    color: rgb(208, 208, 208);
+    overflow: hidden; 
+    border-right: .15em solid rgb(181, 181, 181); 
+    white-space: nowrap; 
+    margin: 0 auto; 
+    letter-spacing: .15em; 
+    animation: 
+      typing 3.5s steps(35, end),
+      blink-caret .5s step-end infinite;
+}
+
+
+.progres-box{
+    background-color: white;
+    text-align: center;
+    padding: 25px;
+    flex: 33%;
+    flex-grow: 1;
+}
+
+.skill-box{
+    flex-wrap: wrap;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 45%;
+    display: flex;
+    flex-direction: row;
+}
+
+
+.flex-photo{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+}
+
+
+.progres-box > p{
+    padding: 12px;
+}
+
+@keyframes typing {
+    from { width: 0 }
+    to { width: 100% }
+  }
+
+
+@keyframes blink-caret {
+    from, to { border-color: transparent }
+    50% { border-color: rgb(199, 199, 199) }
+}
+
+
+@media only screen and (max-width: 768px) {
+    #desktop-text {
+        display: none;
+    }
+    .progres-box{
+        flex: 100%;
+    }
+}
+
+@media only screen and (min-width: 769px) {
+    #mobile-text {
+        display: none;
+    }
+
+}