giotsere · mykaylagraham · Feb 15, 2022 · Feb 15, 2022 · Feb 15, 2022 · Feb 15, 2022
diff --git a/headshot2.jpg b/headshot2.jpg
diff --git a/index.html b/index.html
@@ -6,35 +6,108 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
     <link rel="stylesheet" href="style.css">
-    <title>Your Name</title>
+    <title>Szaria Thompson Portfolio</title>
 </head>
 <body>
+    <style>
+body {
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.topnav {
+  overflow: hidden;
+  background-color: #b08993;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+}
+
+.topnav a {
+  float: left;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+}
+
+.topnav a:hover {
+  background-color: #b08993;
+  color: white;
+}
+
+.topnav a.active {
+  background-color: #b08993;
+  color: white;
+
+}
+.dark-mode {
+  background-color: black;
+  color:#ffd6e0;
+}
+.footer {
+    left:0;
+    right:0;
+    bottom:0;
+    padding-bottom: 14px;
+    height: 36px;
+    text-align: center;
+	width: 100%;
+	background-color: #b08993;
+	color: white;
+	text-align: center;
+}
+
+</style>
+    <div class="topnav">
+  <a class="active" href="#home">Home</a>
+  <a href="https://github.com/st327">GitHub</a>
+  <a href="https://www.linkedin.com/in/szaria-thompson-386018163/">Linkedin</a>
+  <a href="https://docs.google.com/document/d/1AV1hQWF6G0AoB01IfA3yXNAgIijOfBU77II057yoMXg/edit?usp=sharing">Resume</a>
+</div>
+
     <div class="grid-2">
         <div class="section-1">
-            <i class="fas fa-code fa-5x white"></i>
-            <h2>FirstName LastName</h2>
-            <p>City,Country.</p>
-            <a href="#"><i class="fab fa-twitter"></i></a>
-            <a href="#"><i class="fab fa-linkedin"></i></a>
-            <a href="#"><i class="fab fa-github"></i></a>
+            <img src="headshot2.jpg">
+            <h2>Szaria Thompson</h2>
+            <p>Raleigh, NC</p>
+            <p>Email: [email protected]</p>
+            <button onclick="myFunction()"> Switch To Dark Mode </button>
+            <script>
+            function myFunction() {
+                var element = document.body;
+                element.classList.toggle("dark-mode");
+}
+</script>
+
         </div>
         <div class="section-2">
             <h2>About</h2>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis quas sint et nihil iusto eius nostrum sit error, repellat optio quisquam! Magnam dolore iusto cumque. Nostrum error iste neque maiores.</p>
+            <p>Hi! My name is Szaria Thompson. I'm a junior computer science major at the llustrious Winston Salem State University. My interest include front end web development, cyber security, aftifical intelligence, and machine learning. After graduation in Spring 2023, I plan to pursue my graduate degree in cyber security.  </p>
+            <p>Fun Fact: I'm a twin!</p>
+            <h2>Hobbies</h2>
+            <p>In my free time, I like to binge watch marvel movies, read books, practice yoga, and spend time with family.</p>
+            <h2>Education</h2>
+            <p>Winston Salem State University: Bachelor of Science in Computer Science (May 2023)</p>
+            <p>GPA: 3.54</p>
+            <p>Member of Math and Statistics Club</p>
+            <p>Member of Association of Computer Machinary for Women (ACM-W)</p>
             <h2>Experience</h2>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis in maiores autem quidem.</p>
-
+            <p>Science Gateways Community Institute Summer Intern</p>
+            <p>2022 Major League Hacking Externship Fellow</p>
+            <p>2021-22 All In Participant</p>
             <h2>Skills</h2>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis in maiores autem quidem obcaecati excepturi! Cupiditate eaque itaque magni voluptatibus neque nobis est dolor? Atque sunt minus ipsa asperiores. At.</p>
-            <h2>Projects</h2>
-            <a href="#">Project 1</a>
-            <a href="#">Project 2</a>
-            <a href="#">Project 3</a>
-            <a href="#">Project 4</a>
-            <a href="#">Project 5</a>
-            <h2>Contact</h2>
-            <p>[email protected]</p>
+            <p>Programming Languages: Java, Python, Linux, HTML, Git</p>
+            <p>Tools: GitHub, Docker, Flask, Cloudy Cluster, Google Cloud, Jetstream Cloud, Kera/TensorFlow, Linux, Jupitor Notebooks, Eclipe, Visual Studio Code</p>
+            <h2>Project</h2>
+            <p>Collaborated on a Movie theater simulator allowing users to buy tickets and choose their seats by a seating chart of the theater, calculate the total cost of tickets and snacks, and display users’ receipt while updating theater seating chart (Java).</p>
+            <p>Created a college campus navigation system specifically for Winston Salem State University and give directions based on users’ location (MIT App Inventor).</p>
+            <p>Collaborated on a responsive web app allowing users to ask specific questions about student loans and receive financial guidance (Python).</p>
         </div>
     </div>
+	<div class="footer">
+  <p>Author: Szaria Thompson <br>Contact: <a href="mailto:[email protected]"style="color: blue;">[email protected]</a></p>
+</div>
 </body>
 </html>
diff --git a/index.html.bak b/index.html.bak
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+    <title>Szaria Thompson Portfolio</title>
+</head>
+<body>
+    <style>
+body {
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.topnav {
+  overflow: hidden;
+  background-color: #b08993;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+}
+
+.topnav a {
+  float: left;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+}
+
+.topnav a:hover {
+  background-color: #b08993;
+  color: white;
+}
+
+.topnav a.active {
+  background-color: #b08993;
+  color: white;
+
+}
+.dark-mode {
+  background-color: black;
+  color:#ffd6e0;
+}
+.footer {
+    left:0;
+    right:0;
+    bottom:0;
+    padding-bottom: 14px;
+    height: 36px;
+    text-align: center;
+	width: 100%;
+	background-color: #b08993;
+	color: white;
+	text-align: center;
+}
+
+</style>
+    <div class="topnav">
+  <a class="active" href="#home">Home</a>
+  <a href="https://github.com/st327">GitHub</a>
+  <a href="https://www.linkedin.com/in/szaria-thompson-386018163/">Linkedin</a>
+  <a href="https://docs.google.com/document/d/1AV1hQWF6G0AoB01IfA3yXNAgIijOfBU77II057yoMXg/edit?usp=sharing">Resume</a>
+</div>
+
+    <div class="grid-2">
+        <div class="section-1">
+            <img src="headshot2.jpg">
+            <h2>Szaria Thompson</h2>
+            <p>Raleigh, NC</p>
+            <p>Email: [email protected]</p>
+            <button onclick="myFunction()"> Switch To Dark Mode </button>
+            <script>
+            function myFunction() {
+                var element = document.body;
+                element.classList.toggle("dark-mode");
+}
+</script>
+
+        </div>
+        <div class="section-2">
+            <h2>About</h2>
+            <p>Hi! My name is Szaria Thompson. I'm a junior computer science major at the llustrious Winston Salem State University. My interest include front end web development, cyber security, aftifical intelligence, and machine learning. After graduation in Spring 2023, I plan to pursue my graduate degree in cyber security.  </p>
+            <p>Fun Fact: I'm a twin!</p>
+            <h2>Hobbies</h2>
+            <p>In my free time, I like to binge watch marvel movies, read books, practice yoga, and spend time with family.</p>
+            <h2>Education</h2>
+            <p>Winston Salem State University: Bachelor of Science in Computer Science (May 2023)</p>
+            <p>GPA: 3.54</p>
+            <p>Member of Math and Statistics Club</p>
+            <p>Member of Association of Computer Machinary for Women (ACM-W)</p>
+            <h2>Experience</h2>
+            <p>Science Gateways Community Institute Summer Intern</p>
+            <p>2022 Major League Hacking Externship Fellow</p>
+            <p>2021-22 All In Participant</p>
+            <h2>Skills</h2>
+            <p>Programming Languages: Java, Python, Linux, HTML, Git</p>
+            <p>Tools: GitHub, Docker, Flask, Cloudy Cluster, Google Cloud, Jetstream Cloud, Kera/TensorFlow, Linux, Jupitor Notebooks, Eclipe, Visual Studio Code</p>
+            <h2>Project</h2>
+            <p>Collaborated on a Movie theater simulator allowing users to buy tickets and choose their seats by a seating chart of the theater, calculate the total cost of tickets and snacks, and display users’ receipt while updating theater seating chart (Java).</p>
+            <p>Created a college campus navigation system specifically for Winston Salem State University and give directions based on users’ location (MIT App Inventor).</p>
+            <p>Collaborated on a responsive web app allowing users to ask specific questions about student loans and receive financial guidance (Python).</p>
+        </div>
+    </div>
+	<div class="footer">
+  <p>Author: Szaria Thompson <br>Contact: <a href="mailto:[email protected]"style="color: white;">[email protected]</a></p>
+</div>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -10,17 +10,17 @@ body{
     margin: 0;
     padding: 0;
     font-family: 'Roboto', sans-serif;
-    background-color: #101214;
-    color: #7A7C80;
+    background-color: #ffd6e0;
+    color: #b08993;
 
 }
 
 h2,.white{
-    color: #fff;
+    color: #ffffff;
 }
 
 a{
-    color: #7A7C80;
+    color: #b08993;
     text-decoration: none;
 }
 /* section 1 */
@@ -77,7 +77,7 @@ a{
 }
 
 .section-1 a:hover{
-    color: #fff;
+    color: #ffffff;
     cursor: pointer;
     transition: 0.3s;
 }
@@ -101,4 +101,4 @@ a{
         padding-left: 1.5rem;
         padding-top: 2rem;
     }
-}
+}