Skip to content

Commit e5361b7

Browse files
seaxwiseaxwi
committed
Portfolio enhancements and clean up.
1 parent 2b3fa91 commit e5361b7

File tree

8 files changed

+176
-234
lines changed

8 files changed

+176
-234
lines changed

‎Codepen-Button-White-Large.png‎

12.5 KB
Loading

‎GitHub-Mark-Light-32px.png‎

1.53 KB
Loading

‎ccv.png‎

15.2 KB
Loading

‎djupvik.png‎

671 KB
Loading

‎index.html‎

Lines changed: 95 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -3,119 +3,131 @@
33
<html lang="sv">
44

55
<head>
6-
<title>Sebastian Axel Wikström :: front-end developer</title>
7-
8-
<!-- Bootstrap: Latest compiled and minified CSS -->
9-
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> -->
6+
<title>Sebastian Axel Wikstr&#246;m :: front-end developer</title>
107

118
<!-- Ensure proper rendering and touch zooming -->
129
<meta name="viewport" content="width=device-width, initial-scale=1">
1310

1411
<!-- Stylesheets -->
1512
<link rel="stylesheet" href="styles/reset.css">
16-
<link rel="stylesheet" href="styles/style.css">
1713
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
14+
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
15+
<link rel="stylesheet" href="styles/style.css">
1816

19-
<!-- Smooth scroll -->
17+
<!-- jQuery -->
2018
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
19+
20+
<!-- Smooth Scrolling -->
2121
<script>
22-
$(document).ready(function(){
23-
// Add smooth scrolling to all links
24-
$("a").on('click', function(event) {
25-
26-
// Make sure this.hash has a value before overriding default behavior
27-
if (this.hash !== "") {
28-
// Prevent default anchor click behavior
29-
event.preventDefault();
30-
31-
// Store hash
32-
var hash = this.hash;
33-
34-
// Using jQuery's animate() method to add smooth page scroll
35-
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
36-
$('html, body').animate({
37-
scrollTop: $(hash).offset().top
38-
}, 800, function(){
39-
40-
// Add hash (#) to URL when done scrolling (default click behavior)
41-
window.location.hash = hash;
42-
});
43-
} // End if
22+
$(document).ready(function() {
23+
// Add to all links
24+
$("a").on('click', function(event) {
25+
26+
// Make sure this.hash has a value
27+
if (this.hash !== "") {
28+
// Prevent default click behavior
29+
event.preventDefault();
30+
31+
// Store hash
32+
var hash = this.hash;
33+
34+
// jQuery's animate() method
35+
$('html, body').animate({
36+
scrollTop: $(hash).offset().top
37+
}, 500, function() {
38+
39+
// Add hash (#) to URL
40+
window.location.hash = hash;
41+
});
42+
}
43+
});
4444
});
45-
});
4645
</script>
4746
</head>
4847

4948
<body>
50-
<div class="page fs bg">
51-
<h1 id="name">Sebastian Axel Wikstr&#246;m</h1>
52-
<h2 id="job-title">front-end developer</h2>
53-
<p id="portfolio-link"><a href="#portfolio"><i class="fa fa-chevron-down"></i></a></p>
54-
<!--
55-
<form action="#portfolio">
56-
<input id="portfolio-button" type="submit" value="PROJECTS" />
57-
</form>
58-
-->
49+
<div class="page first-page">
50+
<h1 id="your-name">Sebastian Wikstr&#246;m</h1>
51+
<h2 id="your-title">front-end developer</h2>
52+
<a id="portfolio-link" href="#portfolio"><i class="fa fa-chevron-down"></i></a>
5953
</div>
6054

6155
<div id="portfolio" class="page">
6256
<h1>Projects</h1>
6357

6458
<div class="wrapper">
59+
<!-- Project 0 -->
6560
<div class="box">
66-
<div class="project-title-box">
67-
<h3 class="project-item project-title">Luhn</h3>
61+
<div class="project-image-panel">
62+
<img class="project-image" src="omniquiz.png" alt="">
6863
</div>
69-
<div class="project-top">
70-
<img class="project-image" src="ccv.png" alt="">
71-
<div class="flex-col">
72-
<p class="project-item">Tech: HTML, Bootstrap, Javascript</p>
73-
<p class="project-item">Validation of credit cards.</p>
64+
<div class="project-info">
65+
<h2 class="project-title">OmniQuiz</h2>
66+
<hr>
67+
<p>Tech: React, Node.js (Express)</p>
68+
<hr>
69+
<p>Coming soon!</p>
70+
<div class="project-bottom">
71+
<a class="w3-btn w3-white w3-round-large w3-disabled"><i class="fa fa-external-link"></i> DEMO</a>
72+
<a class="w3-btn w3-white w3-round-large w3-disabled"><i class="fa fa-code"></i> CODE</a>
7473
</div>
7574
</div>
76-
<div class="project-bottom">
77-
<a class="green-hover" href="https://seaxwi.github.io/luhn"><i class="fa fa-external-link"></i> DEMO</a>
78-
<a class="red-hover" href="https://github.com/seaxwi/luhn"><i class="fa fa-code"></i> CODE</a>
79-
</div>
8075
</div>
76+
<!-- Project 1 -->
8177
<div class="box">
82-
<div class="project-title-box">
83-
<h3 class="project-item project-title">seaxwi.github.io</h3>
78+
<div class="project-image-panel">
79+
<img class="project-image" src="ccv.png" alt="">
8480
</div>
85-
<div class="project-top">
86-
87-
<img class="project-image" src="seaxwi.png" alt="">
88-
<div class="flex-col">
89-
90-
<p class="project-item">Tech: HTML, CSS</p>
91-
<p class="project-item">Personal webpage built mainly in pure HTML/CSS with some JS-enhancements.</p>
81+
<div class="project-info">
82+
<h2 class="project-title">Luhn</h2>
83+
<hr>
84+
<p>Tech: HTML, Bootstrap, Javascript</p>
85+
<hr>
86+
<p>Validation of credit cards.</p>
87+
<div class="project-bottom">
88+
<a href="https://seaxwi.github.io/luhn" target="_blank" class="w3-btn w3-white w3-round-large w3-hover-green"><i class="fa fa-external-link"></i> DEMO</a>
89+
<a href="https://github.com/seaxwi/luhn" target="_blank" class="w3-btn w3-white w3-round-large w3-hover-red"><i class="fa fa-code"></i> CODE</a>
9290
</div>
9391
</div>
94-
<div class="project-bottom">
95-
<a class="green-hover" href=""><i class="fa fa-external-link"></i> DEMO</a>
96-
<a class="red-hover" href="https://github.com/seaxwi/seaxwi.github.io"><i class="fa fa-code"></i> CODE</a>
97-
</div>
9892
</div>
93+
<!-- Project 2 -->
9994
<div class="box">
100-
<div class="project-title-box">
101-
<h3 class="project-item project-title">Djupviks Hamn</h3>
95+
<div class="project-image-panel">
96+
<img class="project-image" src="seaxwi.png" alt="">
10297
</div>
103-
<div class="project-top">
104-
<img class="project-image" src="djupvik.png" alt="">
105-
<div class="flex-col">
106-
<p class="project-item">Tech: HTML, CSS, Javascript</p>
107-
<p class="project-item">Website with responsive CSS and JS-navbar.</p>
98+
<div class="project-info">
99+
<h2 class="project-title">seaxwi.github.io</h2>
100+
<hr>
101+
<p>Tech: HTML, CSS</p>
102+
<hr>
103+
<p>Personal webpage built mainly in pure HTML/CSS with some JS-enhancements.</p>
104+
<div class="project-bottom">
105+
<a href="" class="w3-btn w3-white w3-round-large w3-hover-green"><i class="fa fa-external-link"></i> DEMO</a>
106+
<a href="https://github.com/seaxwi/seaxwi.github.io" target="_blank" class="w3-btn w3-white w3-round-large w3-hover-red"><i class="fa fa-code"></i> CODE</a>
108107
</div>
109108
</div>
110-
<div class="project-bottom">
111-
<a class="green-hover" href="https://seaxwi.github.io/djupvik"><i class="fa fa-external-link"></i> DEMO</a>
112-
<a class="red-hover" href="https://github.com/seaxwi/djupvik"><i class="fa fa-code"></i> CODE</a>
109+
</div>
110+
<!-- Project 3 -->
111+
<div class="box">
112+
<div class="project-image-panel">
113+
<img class="project-image" src="djupvik.png" alt="">
114+
</div>
115+
<div class="project-info">
116+
<h2 class="project-title">Djupviks Hamn</h2>
117+
<hr>
118+
<p>Tech: HTML, Bootstrap, Javascript</p>
119+
<hr>
120+
<p>Website with responsive CSS and JS-navbar.</p>
121+
<div class="project-bottom">
122+
<a href="https://seaxwi.github.io/djupvik" target="_blank" class="w3-btn w3-white w3-round-large w3-hover-green"><i class="fa fa-external-link"></i> DEMO</a>
123+
<a href="https://github.com/seaxwi/djupvik" target="_blank" class="w3-btn w3-white w3-round-large w3-hover-red"><i class="fa fa-code"></i> CODE</a>
124+
</div>
113125
</div>
114126
</div>
115127
</div>
116128

117129
<div class="contact-box center">
118-
<h1 id="contactme">Contact me</h1>
130+
<h1 id="contact-me">Contact me</h1>
119131

120132
<form action="https://formspree.io/xbjpjpke" method="POST">
121133

@@ -130,13 +142,20 @@ <h1 id="contactme">Contact me</h1>
130142

131143
<input type="submit" value="Submit">
132144
</form>
145+
</div>
146+
</div>
133147

134-
<h1 id="links">Links</h1>
148+
<footer>
149+
<p>&copy; 2020 Sebastian Wikstr&#246;m</p>
150+
<div class="logo-link-container">
135151
<a href="https://github.com/seaxwi">
136-
<img src="GitHub-Mark-Light-64px.png" alt="github mark">
152+
<img class="logo-link" src="GitHub-Mark-Light-64px.png" alt="github logo">
153+
</a>
154+
<a href="https://codepen.io/seaxwi">
155+
<img class="logo-link" src="Codepen-Button-White-Large.png" alt="codepen logo">
137156
</a>
138157
</div>
139-
</div>
158+
</footer>
140159
</body>
141160

142161
</html>

‎omniquiz.png‎

64.5 KB
Loading

‎seaxwi.png‎

620 KB
Loading

0 commit comments

Comments
 (0)