-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (123 loc) · 6.45 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Tjeerd Verschragen</title>
<link rel="shortcut icon" type="image/x-icon" href="img/portfolio.png">
<!-- inject:css -->
<link rel="stylesheet" href="./css/app.min.css">
<!-- endinject -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,900">
</head>
<body class="background--about">
<main class="wrapper">
<div class="background-1">
<aside class="developer developer--about">
<img src="img/Tjeerd_Verschragen.png" class="developer__img" alt="">
<span class="developer__name">Tjeerd Verschragen</span>
<span class="developer__type">Fullstack Developer</span>
<span class="developer__spacer"></span>
<footer class="developer__footer">
<a href="https://github.com/tjeerddie" target="_blank"><i class="fa fa-lg fa-github-alt" aria-hidden="true"></i></a>
<a href="https://www.linkedin.com/in/tjeerd-verschragen/" target="_blank"><i class="fa fa-lg fa-linkedin" aria-hidden="true"></i></a>
</footer>
</aside>
</div>
<div class="background-2">
<nav class="nav">
<ul class="nav__list">
<li id="home" class="nav__list-item--phone">
<i class="fa fa-2x fa-home" aria-hidden="true"></i>
</li>
<li id="about" class="nav__list-item nav__list-item--active">
<i class="fa fa-2x fa-info-circle" aria-hidden="true"></i>
</li>
<li id="skill" class="nav__list-item">
<i class="fa fa-2x fa-sliders" aria-hidden="true"></i>
</li>
<li id="project" class="nav__list-item">
<i class="fa fa-2x fa-suitcase" aria-hidden="true"></i>
</li>
</ul>
</nav>
</div>
<div class="background-3">
<div class="container">
<section class="about">
<h1 class="about__title">I'm a Full-Stack developer...</h1>
<div class="about__text">
<p>
I'm a passionate Full-Stack Developer, with most of my
knowledge being from back-end.
</p>
<p>
I like to work in a team where I can learn from colleagues and
help them when necessary.
</p>
<p>
I am most experienced in the field of Javascript and PHP, further
I have experience in Node.js, D3.js, Grunt, Gulp, MongoDB and MySQL.
I also have experience in the frameworks: Laravel, AngularJS and Vue.js.
</p>
<p>
I am a fan of Scrum/Agile, It keeps me focused and I always know where
my colleagues are working on.
</p>
<p>
In my free time I generally play games, visit friends or improve my skills.
</p>
</div>
</section>
<section class="skill ghost">
<h1 class="skill__title">My skillset</h1>
<div class="skill__list">
<a class="skill__list-item" href="https://en.wikipedia.org/wiki/HTML5" target="_blank"><span>HTML(5)</span></a>
<a class="skill__list-item" href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank"><span>CSS(3)</span></a>
<a class="skill__list-item" href="http://sass-lang.com/" target="_blank"><span>SASS</span></a>
<a class="skill__list-item" href="https://en.wikipedia.org/wiki/JavaScript" target="_blank"><span>Javascript</span></a>
<a class="skill__list-item" href="http://php.net/" target="_blank"><span>PHP</span></a>
<a class="skill__list-item" href="https://laravel.com/" target="_blank"><span>Laravel</span></a>
<a class="skill__list-item" href="https://angularjs.org/" target="_blank"><span>AngularJs</span></a>
<a class="skill__list-item" href="https://angular.io/" target="_blank"><span>Angular</span></a>
<a class="skill__list-item" href="https://vuejs.org/" target="_blank"><span>Vue.js</span></a>
<a class="skill__list-item" href="https://nodejs.org/en/" target="_blank"><span>Node.js</span></a>
<a class="skill__list-item" href="https://d3js.org/" target="_blank"><span>D3.js</span></a>
<a class="skill__list-item" href="http://passportjs.org/" target="_blank"><span>Passport.js</span></a>
<a class="skill__list-item" href="https://expressjs.com/" target="_blank"><span>Express.js</span></a>
<a class="skill__list-item" href="https://gruntjs.com/" target="_blank"><span>Grunt</span></a>
<a class="skill__list-item" href="http://gulpjs.com/" target="_blank"><span>Gulp</span></a>
<a class="skill__list-item" href="https://git-scm.com/" target="_blank"><span>Git</span></a>
<a class="skill__list-item" href="https://www.mongodb.com/" target="_blank"><span>MongoDB</span></a>
<a class="skill__list-item" href="https://www.mysql.com/" target="_blank"><span>MySQL</span></a>
<a class="skill__list-item" href="https://wordpress.com/" target="_blank"><span>Wordpress</span></a>
</div>
</section>
<section class="project ghost">
<h1 class="project__title">Things I worked on</h1>
<div class="project__list">
<div class="project__list-item">
<img class="project__list-item--img" src="img/OD.jpg">
<span class="project__list-item--text">used languages: HTML, SASS, JS, Vue.js, PHP, Laravel</span>
</div>
<div class="project__list-item">
<img class="project__list-item--img" src="img/Competasite.jpg">
<span class="project__list-item--text">used languages: HTML, SASS, JS, Wordpress</span>
</div>
<div class="project__list-item">
<img class="project__list-item--img" src="img/CP.jpg">
<span class="project__list-item--text">used languages: HTML, SASS, JS, Wordpress, Vagrant, Grunt</span>
</div>
<div class="project__list-item">
<img class="project__list-item--img" src="img/hhs.jpg">
<span class="project__list-item--text">used languages: HTML, SASS, AngularJS, D3.JS, grunt</span>
</div>
</div>
</section>
</div>
</div>
</main>
<!-- inject:js -->
<script src="./js/app.min.js"></script>
<!-- endinject -->
</body>
</html>