Skip to content

Commit

Permalink
Skills Section & Other Major Work
Browse files Browse the repository at this point in the history 
Grabbed the skills section from the template (helfi92/studorlio#11), and added some other stuff.
  • Loading branch information
@Martin-Zurek
Martin-Zurek committed Aug 6, 2021
1 parent 3429baf commit e0874d7
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 24 deletions.
88 changes: 84 additions & 4 deletions assets/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,12 @@ section{
background-color: #052d46;
}

.work {
background-color: #05324b;
.skills {
background-color: #05324b
}

.generaltext {
background-color: #052d46;
}

.footer {
Expand All @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down
17 changes: 16 additions & 1 deletion controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) + '%');
}
});
});
62 changes: 43 additions & 19 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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 -->
Expand Down

0 comments on commit e0874d7

Please sign in to comment.