From e0874d73ca200416af672047c6f78816861e156f Mon Sep 17 00:00:00 2001
From: Martin-Zurek <martin.zurek@education.nsw.gov.au>
Date: Fri, 6 Aug 2021 11:21:45 +1000
Subject: [PATCH] Skills Section & Other Major Work

Grabbed the skills section from the template (https://github.com/helfi92/studorlio/pull/11), and added some other stuff.
---
 assets/css/styles.css | 88 +++++++++++++++++++++++++++++++++++++++++--
 controller.js         | 17 ++++++++-
 index.html            | 62 ++++++++++++++++++++----------
 3 files changed, 143 insertions(+), 24 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 511e706..eeee613 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -27,8 +27,12 @@ section{
 	background-color: #052d46;
 }
 
-.work {
-	background-color: #05324b;
+.skills {
+	background-color: #05324b
+}
+
+.generaltext {
+	background-color: #052d46;
 }
 
 .footer {
@@ -53,7 +57,7 @@ a.nav-item:hover {
 	padding-top: 1rem;
 }
 
-.work-container img{
+.generaltext-container img{
 	max-width:100%;
 	max-height:175px;
 	margin-bottom:15px;
@@ -71,7 +75,7 @@ a.nav-item:hover {
 
 .box {
 	background-color: transparent;
-	border: 2px solid rgba(7, 59, 79, 0.5);
+	border: 5px solid #052d46;
 }
 
 .title {
@@ -109,6 +113,82 @@ a.nav-item:hover {
 
 }
 
+/* Skills */
+
+@keyframes load{
+  from {
+    width: 0%
+  }
+}
+
+@-webkit-keyframes load{
+  from {
+    width: 0%
+  }
+}
+
+@-moz-keyframes load{
+  from {
+    width: 0%
+  }
+}
+
+@-o-keyframes load{
+  from {
+    width: 0%
+  }
+}
+
+.bar{
+  background-color: #EEE;
+  padding: 2px;
+  border-radius: 15px;
+  margin-bottom: 5px;
+  font-size: 14px;
+  color: #FFF;
+  font-weight: bold;
+  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
+}
+
+.bar::before{
+  content:  attr(data-skill);
+  background-color: #1e90ff;
+  display: inline-block;
+  padding: 5px 0 5px 10px;
+  border-radius: inherit;
+  animation: load 2s 0s;
+  -webkit-animation: load 2s 0s;
+  -moz-animation: load 2s 0s;
+  -o-animation: load 2s 0s;
+}
+
+.bar.front::before{
+  background-color: #1e90ff;
+}
+.bar.back::before{
+  background-color: #1e90ff;
+}
+
+.bar.learning::before{
+  width: calc(20% - 10px);
+}
+
+.bar.basic::before{
+  width: calc(40% - 10px);
+}
+
+.bar.intermediate::before{
+  width: calc(60% - 10px);
+}
+
+.bar.advanced::before{
+  width: calc(80% - 10px);
+}
+
+.bar.expert::before{
+  width: calc(100% - 10px);
+}
+
 /* Scrollbar */
 
 ::-webkit-scrollbar {
diff --git a/controller.js b/controller.js
index 2b14a68..e0df73a 100644
--- a/controller.js
+++ b/controller.js
@@ -2,10 +2,25 @@ window.onload = () => {
   const navMenu = document.querySelector('.nav-menu');
   const navItems = document.querySelectorAll('.nav-item');
   const hamburger = document.querySelector('.nav-toggle');
-  
+
   const toggle = e => e.classList.toggle('is-active');
   const toggleNav = ({ target }) => Array.from(navMenu.classList).includes('is-active') ? toggle(navMenu) : null;
 
   hamburger.addEventListener('click', () => toggle(navMenu, 'is-active'));
   Array.from(navItems).forEach(e => e.addEventListener('click', toggleNav));
 }
+
+var delay = 500;
+$(".progress-bar").each(function (i) {
+  $(this).delay(delay * i).animate({ width: $(this).attr('aria-valuenow') + '%' }, delay);
+
+  $(this).prop('Counter', 0).animate({
+    Counter: $(this).text()
+  }, {
+    duration: delay,
+    easing: 'swing',
+    step: function (now) {
+      $(this).text(Math.ceil(now) + '%');
+    }
+  });
+});
diff --git a/index.html b/index.html
index 3c7fe81..8b585e0 100644
--- a/index.html
+++ b/index.html
@@ -41,8 +41,9 @@
 
 		<div class="nav-right nav-menu">
 			<a class="nav-item" href="#about">About</a>
-			<a class="nav-item" href="#projects">Text 1</a>
-			<a class="nav-item" href="#work">Text 2</a>
+			<a class="nav-item" href="#projects">Text Goes Here</a>
+			<a class="nav-item" href="#skills">Skills</a>
+			<a class="nav-item" href="#generaltext">General Text</a>
 		</div>
 
 		<span class="nav-toggle">
@@ -55,13 +56,13 @@
 	<!-- About -->
 	<section id="about" class="section about">
 		<div class="container has-text-centered">
-			<img class="avatar" src="assets/img/logo.png" alt="Text Goes Here" title="Text Goes Here">
+			<img class="avatar" src="assets/img/logo.png" alt="Martonic Logo" title="Martonic Logo">
 		</div>
 		<div class="container"></br>
 			<p class="intro">
-				Text Goes Here | Text Goes Here | Text Goes Here | Text Goes Here | Text Goes Here
-				Text Goes Here | Text Goes Here | Text Goes Here | Text Goes Here | Text Goes Here
-				Text Goes Here | Text Goes Here | Text Goes Here | Text Goes Here | Text Goes Here
+				This is where some text goes.
+				And here is some more text.
+				This website has been infested with kangaroos.
 			</p>
 		</div>
 	</section>
@@ -85,6 +86,10 @@ <h3 class="title is-3">Text Goes Here</h3>
 							</div>
 							<div>
 								<p>Text Goes Here</p>
+								<p>Text Goes Here</p>
+								<p>Text Goes Here</p>
+								<p>Text Goes Here</p>
+								<p>Text Goes Here</p>
 							</div>
 						</article>
 					</div>
@@ -100,6 +105,10 @@ <h3 class="title is-3">Text Goes Here</h3>
 							</div>
 							<div>
 								<p>Text Goes Here</p>
+								<p>Text Goes Here</p>
+								<p>Text Goes Here</p>
+								<p>Text Goes Here</p>
+								<p>Text Goes Here</p>
 							</div>
 						</article>
 					</div>
@@ -115,6 +124,10 @@ <h3 class="title is-3">Text Goes Here</h3>
 							</div>
 							<div>
 								<p>Text Goes Here</p>
+								<p>Text Goes Here</p>
+								<p>Text Goes Here</p>
+								<p>Text Goes Here</p>
+								<p>Text Goes Here</p>
 							</div>
 						</article>
 					</div>
@@ -123,28 +136,39 @@ <h3 class="title is-3">Text Goes Here</h3>
 		</div>
 	</section>
 
-	<!-- Work -->
-	<section id="work" class="section work">
+	<!-- Skills -->
+
+	<section id="skills" class="section skills">
 		<div class="container">
 			<div class="has-text-centered">
-				<h3 class="title is-3">Clickable Links</h3>
+				<h3 class="title is-3">Skills</h3>
+
 			</div>
-			<div class="work-container columns">
-				<div class="column is-6 has-text-centered">
-					<a target="_blank" href="https://www.google.com/"><img class=""
-							src="assets/img/logo.png"></a>
-				</div>
-				<div class="column is-6 has-text-centered">
-					<a target="_blank" href="https://www.google.com/"><img class=""
-							src="assets/img/logo.png"></a>
-				</div>
+			<div style="margin-top: 20px;">
+				<div class="bar learning" data-skill="Minecraft"></div>
+				<div class="bar back basic" data-skill="Roblox"></div>
+				<div class="bar back intermediate" data-skill="Fortnite"></div>
+				<div class="bar front advanced" data-skill="PUBG"></div>
+				<div class="bar front expert" data-skill="Escape From Tarkov"></div>	
+			</div>
+		</div>
+	</section>
+
+	<!-- General Text -->
+	<section id="generaltext" class="section generaltext">
+		<div class="container">
+			<div class="has-text-centered">
+				<h3 class="title is-3">General Text</h3>
+			</div>
+			<div class="container"></br>
+				<p>Text Goes Here</p>
 			</div>
 		</div>
 	</section>
 
 	<!-- Footer -->
 	<section class="footer has-text-centered container">
-		<h1>Website Created By Martin</h1>
+		<h1>Martin's Portfolio | Last Updated 06/08/2021</h1>
 	</section>
 
 	<!-- Scripts  -->