-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
277 lines (257 loc) · 15.1 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<!DOCTYPE html>
<!--
Developer: Joel Rudsberg
Email: [email protected]
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Joel Rudsbergs personliga hemsida. Joel Rudsberg är en webbutvecklare och programmerare som letar efter sommarjobb 2018.">
<title>Joel Rudsberg | Programmerare</title>
<!-- Font Awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Montserrat Google Font -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700" rel="stylesheet">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<!-- HERO SECTION -->
<section id="hero-section">
<div class="dark-overlay d-flex justify-content-center align-items-center">
<div class="legend-inner pt-4">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center text-white">
<img src="img/joel-rudsberg-profilbild.jpg" alt="Joel Rudsberg profilbild headshot" class="img-fluid rounded-circle mb-3" id="profilbild">
<h1 class="mb-3 display-4">Hej, jag bygger hemsidor och annat spännande.<span class="lead d-block mt-2">Jag letar internship sommaren 2018 i Göteborg.</span></h1>
<a href="#contact-section"><button class="btn btn-outline-info btn-lg text-white">Kontakta mig</button></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- PROJECT SECTION -->
<section id="project-section" class="pb-4">
<div class="container">
<div class="info-header mb-5 text-center">
<h2 class="text-center display-4 d-block pt-5">Tidigare Arbeten</h2>
<p class="mt-4 text-center">En kollektion av projekt jag jobbat med där slutprodukten dagligen används av företag.</p>
</div>
<div class="row project pb-5 mt-5">
<div class="col-md-6 order-md-2">
<div class="d-flex h-100 w-100 flex-column justify-content-center">
<a href="http://tintin.coffee" target="_blank"><img class="img-fluid mx-auto" src="img/mockup-tintin-large-transparent.png" alt="Responsiv och mobilanpassad hemsida av café tintins hemsida."></a>
</div>
</div>
<div class="col-md-6 order-md-1">
<div id="project-tintin" class="project-text d-flex h-100 w-100 flex-column justify-content-center text-center mx-auto">
<h3 class="display-4">Café Tintin</h3>
<p class="text-muted">Café Tintin har varit ett välkänt café i Göteborg i 25 år. Tintins föregående hemsida var uråldrad, ej responsibel och gav en medioker användarupplevelse. Med hjälp av Bootstrap handkodade jag Tintins nya ansikte utåt.</p>
<a href="http://tintin.coffee/" target="_blank"><button class="btn btn-outline-info btn-lg mt-3">Besök Hemsida</button></a>
</div>
</div>
</div>
<div class="row testimony pb-5 pt-5">
<div class="col text-center py-3">
<blockquote class="quote blockquote">
Joel lyssnade på våra önskemål och skapade med dem en inbjudande och informativ hemsida med de funktioner vi önskade. Han bidrog även med egna idéer och var snabb med att återkoppla!
</blockquote>
<div class="pt-3">
<img src="img/kira-anderzen.png" class="img-fluid rounded-circle">
<small class="ml-2">Kira Anderzén, VD, Café Tintin</small>
</div>
</div>
</div>
<div class="row project pb-5 mt-5">
<div class="col-md-6 order-md-1">
<div class="d-flex h-100 w-100 flex-column justify-content-center">
<img class="mb-3 img-fluid mx-auto" src="img/okay-mockup-transparent.jpg" alt="Responsiv och mobilanpassad hemsida av okay shops hemsida.">
</div>
</div>
<div class="col-md-6 order-md-2">
<div id="project-dani" class="project-text d-flex h-100 w-100 flex-column justify-content-center text-center mx-auto">
<h3 class="display-4">Freeride HQ Engelberg</h3>
<p class="text-muted">Även känt som Okay Shop, är en kultförklarad skidbutik i svensktillhållet Engelberg i de Schweiziska alperna. Under min säsong fick jag äran att ge skidfantaster en bättre upplevelse på Danis hemsida. Sidan kommer publiceras inom några dagar.</p>
<a class="disabled" href="http://tintin.coffee/" target="_blank" title="Publiceras om några dagar!"><button class="disabled btn btn-outline-info btn-lg mt-3" disabled>Besök Hemsida</button></a>
</div>
</div>
</div>
<div class="row testimony last-testimony pb-5 pt-5">
<div class="col text-center py-3">
<blockquote class="quote blockquote">
Joel did quality work by fulfilling me and my clients need for a simple, clear and good-looking website. I'm very satisfied.
</blockquote>
<div class="pt-3">
<img src="img/dani-friedli.PNG" class="img-fluid rounded-circle">
<small class="ml-2">Dani Friedli, Ägare, Okay Shop</small>
</div>
</div>
</div>
</div>
</section>
<!-- PERSONAL PROJECT SECTION -->
<section id="pp-section">
<div class="container">
<div class="info-header mb-5 text-center">
<h2 class="text-center display-4 d-block pt-5">Personliga Projekt</h2>
<p class="mt-4 mb-3 text-center">När jag inte jobbar åt någon kund eller pluggar lär jag mig nya programmeringsspråk och teknologier genom att bygga projekt. Vill ni se mer exempel är ni hjärtligt välkomna att <a href="mailto:[email protected]" data-tool-tip="Svarar inom en dag!">emaila</a> mig.</p>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 text-center mb-5">
<div class="holder mb-3">
<div id="todo-background" class="background">
<div id="todo-layer" class="layer"></div>
</div>
</div>
<div class="title text-white">To-Do Applikation</div>
<p class="text-muted">En simpel applikation byggd med vanilla JavaScript som är designad för mobilanvändare. Jag använde mig av the module pattern. Localstorage används också för att lagra och hämta data.</p>
<a href="projects/todo/index.html" target="_blank"><button class="btn btn-block btn-lg btn-outline-info mt-3">Testa</button></a>
</div>
<div class="col-md-4 col-sm-6 text-center mb-5">
<div class="holder mb-3">
<div id="particle-background" class="background">
<div id="particle-layer" class="layer"></div>
</div>
</div>
<div class="title text-white">Partikelsimulation</div>
<p class="text-muted">En partikelsimulation byggd med HTML5 canvas element och vanilla JavaScript. I programmet används kollisionsdetektion och kollisioner och gravitation simuleras. Tryck på mellanslag för inställningar.</p>
<a href="projects/particles/index.html" target="_blank"><button class="btn btn-block btn-lg btn-outline-info mt-3">Testa</button></a>
</div>
<div class="col-md-4 col-sm-6 text-center mb-5">
<div class="holder mb-3">
<div id="schack-background" class="background">
<div id="schack-layer" class="layer"></div>
</div>
</div>
<div class="title text-white">Schack</div>
<p class="text-muted">Ett fullständigt schackspel byggd med Java och med en objektorienterad approach. Utvecklingen av GUI gjordes med JavaFX. Jag programmerade spelet när jag studerade software engineering i USA.</p>
<a href="projects/particles/index.html" target="_blank" class="disabled button-anchor"><button class="btn btn-block btn-lg btn-outline-info mt-3 disabled" title="Kan ej visa exemplet här" disabled>Testa</button></a>
</div>
<div id="wind" class="col-md-4 col-sm-6 text-center mb-5">
<div class="holder mb-3">
<div id="wind-background" class="background">
<div id="wind-layer" class="layer"></div>
</div>
</div>
<div class="title text-white">Aerodynamisk Analys</div>
<p class="text-muted">Ett analyseringsprogram byggt i Matlab som med data från ett vindtunneltest producerar en simulering av den foil som användes, genererar en tryckkoefficientgraf och visar i vilken angel of attack som ger maximal lyftkraft.</p>
<a href="projects/particles/index.html" target="_blank" class="disabled button-anchor"><button class="btn btn-block btn-lg btn-outline-info mt-3 disabled" title="Kan ej visa exemplet här" disabled>Testa</button></a>
</div>
</div>
</div>
</section>
<!-- SKILLS SECTION -->
<section id="skills-section" class="pb-5">
<div class="container">
<div class="info-header mb-5 text-center">
<h2 class="text-center display-4 d-block pt-5">Färdigheter</h2>
<p id="subtext" class="mt-4 mb-3 text-center">Vilka språk kan jag? Vilka frameworks kan jag? Vilka andra teknologier kan jag? Hur mycket kan jag i vardera delar? Här ger jag ett visuellt svar.</p>
</div>
<div class="row mb-3">
<div class="col text-center">
<p class="lead">Så här fungerar graderingen:</p>
<div class="progress" style="height: 25px">
<div class="progress-bar bg-danger" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">Nybörjare</div>
<div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">Cool</div>
<div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">Ninja</div>
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Rockstjärna*</div>
</div>
<p id="star-text" class="text-muted text-center mt-2">*Självutnämnd</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="skill mb-4">
<div class="lead mb-2 text-center">HTML/CSS</div>
<div class="progress" style="height: 15px">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
</div>
<div class="skill mb-4">
<div class="lead mb-2 text-center">JavaScript</div>
<div class="progress" style="height: 15px">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%"></div>
</div>
</div>
<div class="skill mb-4">
<div class="lead mb-2 text-center">Bootstrap 4</div>
<div class="progress" style="height: 15px">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 95%"></div>
</div>
</div>
<div class="skill mb-4">
<div class="lead mb-2 text-center">SASS</div>
<div class="progress" style="height: 15px">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%"></div>
</div>
</div>
<div class="skill mb-4">
<div class="lead mb-2 text-center">Androidutveckling</div>
<div class="progress" style="height: 15px">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 80%"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="skill mb-4">
<div class="lead mb-2 text-center">PHP</div>
<div class="progress" style="height: 15px">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 10%"></div>
</div>
</div>
<div class="skill mb-4">
<div class="lead mb-2 text-center">Java</div>
<div class="progress" style="height: 15px">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 70%"></div>
</div>
</div>
<div class="skill mb-4">
<div class="lead mb-2 text-center">Matlab</div>
<div class="progress" style="height: 15px">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 45%"></div>
</div>
</div>
<div class="skill mb-4">
<div class="lead mb-2 text-center">Git/Github Workflow</div>
<div class="progress" style="height: 15px">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 35%"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CONTACT SECTION -->
<section id="contact-section" class="pt-4">
<div class="container">
<div class="info-header pb-5 text-center">
<h2 class="text-center display-4 d-block pt-5">Kontakta Mig</h2>
<p id="subtext" class="mt-4 mb-3 text-center lead">Behöver ni en Chalmerist som IT intern sommaren 2018?</p>
<p class="lead text-center">Jag gör även frilansarbete. Berätta om dina projekt och idéer!</p>
<a href="mailto:[email protected]"><button class="mt-2 btn btn-lg btn-outline-success mb-3">Maila</button></a>
</div>
</div>
</section>
<!-- FOOTER SECTION -->
<section id="footer-section" class="py-4">
<div class="container">
<div class="row text-center mt-5">
<div class="col text-white">
<p class="text-muted">Handgjord av mig © 2018.</p>
<div class="d-flex justify-content-between mb-2">
<a href="https://www.facebook.com/joel.rudsberg" target="_blank"><i class="fa fa-facebook-square fa-2x"></i></a>
<a href="https://github.com/rudsberg" target="_blank"><i class="fa fa-github fa-2x"></i></a>
<a href="https://www.instagram.com/joelrudsberg/" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>
</div>
</div>
</div>
</div>
</section>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>