Skip to content

Commit e0874d7

Browse files
Martin-ZurekMartin-Zurek
committed
Skills Section & Other Major Work
Grabbed the skills section from the template (helfi92/studorlio#11), and added some other stuff.
1 parent 3429baf commit e0874d7

File tree

3 files changed

+143
-24
lines changed

3 files changed

+143
-24
lines changed

‎assets/css/styles.css‎

Lines changed: 84 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,12 @@ section{
2727
background-color: #052d46;
2828
}
2929

30-
.work {
31-
background-color: #05324b;
30+
.skills {
31+
background-color: #05324b
32+
}
33+
34+
.generaltext {
35+
background-color: #052d46;
3236
}
3337

3438
.footer {
@@ -53,7 +57,7 @@ a.nav-item:hover {
5357
padding-top: 1rem;
5458
}
5559

56-
.work-container img{
60+
.generaltext-container img{
5761
max-width:100%;
5862
max-height:175px;
5963
margin-bottom:15px;
@@ -71,7 +75,7 @@ a.nav-item:hover {
7175

7276
.box {
7377
background-color: transparent;
74-
border: 2px solid rgba(7, 59, 79, 0.5);
78+
border: 5px solid #052d46;
7579
}
7680

7781
.title {
@@ -109,6 +113,82 @@ a.nav-item:hover {
109113

110114
}
111115

116+
/* Skills */
117+
118+
@keyframes load{
119+
from {
120+
width: 0%
121+
}
122+
}
123+
124+
@-webkit-keyframes load{
125+
from {
126+
width: 0%
127+
}
128+
}
129+
130+
@-moz-keyframes load{
131+
from {
132+
width: 0%
133+
}
134+
}
135+
136+
@-o-keyframes load{
137+
from {
138+
width: 0%
139+
}
140+
}
141+
142+
.bar{
143+
background-color: #EEE;
144+
padding: 2px;
145+
border-radius: 15px;
146+
margin-bottom: 5px;
147+
font-size: 14px;
148+
color: #FFF;
149+
font-weight: bold;
150+
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
151+
}
152+
153+
.bar::before{
154+
content: attr(data-skill);
155+
background-color: #1e90ff;
156+
display: inline-block;
157+
padding: 5px 0 5px 10px;
158+
border-radius: inherit;
159+
animation: load 2s 0s;
160+
-webkit-animation: load 2s 0s;
161+
-moz-animation: load 2s 0s;
162+
-o-animation: load 2s 0s;
163+
}
164+
165+
.bar.front::before{
166+
background-color: #1e90ff;
167+
}
168+
.bar.back::before{
169+
background-color: #1e90ff;
170+
}
171+
172+
.bar.learning::before{
173+
width: calc(20% - 10px);
174+
}
175+
176+
.bar.basic::before{
177+
width: calc(40% - 10px);
178+
}
179+
180+
.bar.intermediate::before{
181+
width: calc(60% - 10px);
182+
}
183+
184+
.bar.advanced::before{
185+
width: calc(80% - 10px);
186+
}
187+
188+
.bar.expert::before{
189+
width: calc(100% - 10px);
190+
}
191+
112192
/* Scrollbar */
113193

114194
::-webkit-scrollbar {

‎controller.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,25 @@ window.onload = () => {
22
const navMenu = document.querySelector('.nav-menu');
33
const navItems = document.querySelectorAll('.nav-item');
44
const hamburger = document.querySelector('.nav-toggle');
5-
5+
66
const toggle = e => e.classList.toggle('is-active');
77
const toggleNav = ({ target }) => Array.from(navMenu.classList).includes('is-active') ? toggle(navMenu) : null;
88

99
hamburger.addEventListener('click', () => toggle(navMenu, 'is-active'));
1010
Array.from(navItems).forEach(e => e.addEventListener('click', toggleNav));
1111
}
12+
13+
var delay = 500;
14+
$(".progress-bar").each(function (i) {
15+
$(this).delay(delay * i).animate({ width: $(this).attr('aria-valuenow') + '%' }, delay);
16+
17+
$(this).prop('Counter', 0).animate({
18+
Counter: $(this).text()
19+
}, {
20+
duration: delay,
21+
easing: 'swing',
22+
step: function (now) {
23+
$(this).text(Math.ceil(now) + '%');
24+
}
25+
});
26+
});

‎index.html‎

Lines changed: 43 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,9 @@
4141

4242
<div class="nav-right nav-menu">
4343
<a class="nav-item" href="#about">About</a>
44-
<a class="nav-item" href="#projects">Text 1</a>
45-
<a class="nav-item" href="#work">Text 2</a>
44+
<a class="nav-item" href="#projects">Text Goes Here</a>
45+
<a class="nav-item" href="#skills">Skills</a>
46+
<a class="nav-item" href="#generaltext">General Text</a>
4647
</div>
4748

4849
<span class="nav-toggle">
@@ -55,13 +56,13 @@
5556
<!-- About -->
5657
<section id="about" class="section about">
5758
<div class="container has-text-centered">
58-
<img class="avatar" src="assets/img/logo.png" alt="Text Goes Here" title="Text Goes Here">
59+
<img class="avatar" src="assets/img/logo.png" alt="Martonic Logo" title="Martonic Logo">
5960
</div>
6061
<div class="container"></br>
6162
<p class="intro">
62-
Text Goes Here | Text Goes Here | Text Goes Here | Text Goes Here | Text Goes Here
63-
Text Goes Here | Text Goes Here | Text Goes Here | Text Goes Here | Text Goes Here
64-
Text Goes Here | Text Goes Here | Text Goes Here | Text Goes Here | Text Goes Here
63+
This is where some text goes.
64+
And here is some more text.
65+
This website has been infested with kangaroos.
6566
</p>
6667
</div>
6768
</section>
@@ -85,6 +86,10 @@ <h3 class="title is-3">Text Goes Here</h3>
8586
</div>
8687
<div>
8788
<p>Text Goes Here</p>
89+
<p>Text Goes Here</p>
90+
<p>Text Goes Here</p>
91+
<p>Text Goes Here</p>
92+
<p>Text Goes Here</p>
8893
</div>
8994
</article>
9095
</div>
@@ -100,6 +105,10 @@ <h3 class="title is-3">Text Goes Here</h3>
100105
</div>
101106
<div>
102107
<p>Text Goes Here</p>
108+
<p>Text Goes Here</p>
109+
<p>Text Goes Here</p>
110+
<p>Text Goes Here</p>
111+
<p>Text Goes Here</p>
103112
</div>
104113
</article>
105114
</div>
@@ -115,6 +124,10 @@ <h3 class="title is-3">Text Goes Here</h3>
115124
</div>
116125
<div>
117126
<p>Text Goes Here</p>
127+
<p>Text Goes Here</p>
128+
<p>Text Goes Here</p>
129+
<p>Text Goes Here</p>
130+
<p>Text Goes Here</p>
118131
</div>
119132
</article>
120133
</div>
@@ -123,28 +136,39 @@ <h3 class="title is-3">Text Goes Here</h3>
123136
</div>
124137
</section>
125138

126-
<!-- Work -->
127-
<section id="work" class="section work">
139+
<!-- Skills -->
140+
141+
<section id="skills" class="section skills">
128142
<div class="container">
129143
<div class="has-text-centered">
130-
<h3 class="title is-3">Clickable Links</h3>
144+
<h3 class="title is-3">Skills</h3>
145+
131146
</div>
132-
<div class="work-container columns">
133-
<div class="column is-6 has-text-centered">
134-
<a target="_blank" href="https://www.google.com/"><img class=""
135-
src="assets/img/logo.png"></a>
136-
</div>
137-
<div class="column is-6 has-text-centered">
138-
<a target="_blank" href="https://www.google.com/"><img class=""
139-
src="assets/img/logo.png"></a>
140-
</div>
147+
<div style="margin-top: 20px;">
148+
<div class="bar learning" data-skill="Minecraft"></div>
149+
<div class="bar back basic" data-skill="Roblox"></div>
150+
<div class="bar back intermediate" data-skill="Fortnite"></div>
151+
<div class="bar front advanced" data-skill="PUBG"></div>
152+
<div class="bar front expert" data-skill="Escape From Tarkov"></div>
153+
</div>
154+
</div>
155+
</section>
156+
157+
<!-- General Text -->
158+
<section id="generaltext" class="section generaltext">
159+
<div class="container">
160+
<div class="has-text-centered">
161+
<h3 class="title is-3">General Text</h3>
162+
</div>
163+
<div class="container"></br>
164+
<p>Text Goes Here</p>
141165
</div>
142166
</div>
143167
</section>
144168

145169
<!-- Footer -->
146170
<section class="footer has-text-centered container">
147-
<h1>Website Created By Martin</h1>
171+
<h1>Martin's Portfolio | Last Updated 06/08/2021</h1>
148172
</section>
149173

150174
<!-- Scripts -->

0 commit comments

Comments
 (0)