-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (129 loc) · 5.75 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
<!DOCTYPE html>
<html lang="sv-SE">
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Portfolio</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href="styles.css" type='text/css' media='screen'>
<script src='main.js'></script>
</head>
<body>
<header class="header">
<nav class="navbar">
<a href="#home" class="active">Start</a>
<a href="#about">Om</a>
<a href="#earlier">Tidigare</a>
<a href="#contact">Kontakt</a>
</nav>
</header>
<section class="home" id="home">
<div class="home-content">Hej, mitt namn är Filip <span class="wave">👋</span>
<h3>@Chas Academy</h3>
<p>
Fullstack, Opensource
</p>
<div class="btn-box">
<a href="#"><span id="cv">CV</span><img src="misc/download_icon.svg" alt="CV" id="icon"></a>
</div>
</div>
<div style="overflow: hidden; border-radius: 32px;">
<iframe width="320" height="320" src="https://www.youtube.com/embed/y2OHIr_CZ4s"
title="Pikachu | HTML CSS JavaScript" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</section>
<section class="container">
<div>
<h3 id="about">Om Mig</h3>
<br>
<p>Mitt namn är Filip och jag är bosatt på Södermalm i Stockholm. <br>Just nu studerar jag
Fullstack-utveckling
på Chas Academy.
<br><br>
Mina planer för framtiden involverar en fördjupning inom utveckling och all sorts teknik. Jag vill samla
så mycket information och prova så mycket som möjligt för att ge mig själv en tydlig bild av vad jag
senare planerar att bli bäst på. Det som intresserade mig mest av webb-utveckling specifikt var
möjligheten att kunna utnyttja flera av mina starkaste egenskaper: färg, design, felsökning, lagarbete,
min generella effektivitet framför en datorskärm byggd av oändliga timmar av spelande, surfande och
lärande.
</p>
</div>
<div>
<h3>Intressen</h3>
<br>
<p>Jag älskar i princip allt som involverar färg, design och kreativitet. Idrott har alltid varit en stor
del av mitt liv, lagsporter specifikt.<br> Jag har spelat fotboll och bandy sedan jag var liten och
tränar
fotboll ännu, där jag spelar i samma lag som för 25 år sedan. Forza Högalid!
<br><br>
På fritiden gillar jag annars att syssla med musik, musikproduktion, att resa, fotboll, statistik och
sports-betting, men det absolut bästa är att umgås med goda vänner.
</p>
</div>
<div>
<h3>Tidigare</h3>
<br>
<p>Min karriär innan jag startade med utveckling var målare.<br> Jag har jobbat som målare i över 10 år
sedan
jag tog examen från gymnasiet. Det har gett mig möjligheten att uttrycka mig kreativt och meningsfullt
samtidigt som det gett mig erfarenhet av att jobba som en del av ett lag, vilket jag älskar.<br><br>
Övergången från måleri till utveckling var naturlig och spännande. Jag ser fram emot att kunna jobba med
någonting nytt men som fortfarande låter mig omges av färg, design och estetik - det som jag trivs bäst
med.
</p>
</div>
</section>
<section>
<h2 class="header2" id="earlier">Tidigare</h2>
<div class="earlier-images">
<img src="./images/thumbnail_IMG_0512.jpg" alt="#">
<img src="./images/thumbnail_IMG_0549.jpg" alt="#">
<img src="./images/thumbnail_IMG_0568.jpg" alt="#">
<img src="./images/thumbnail_IMG_0772.jpg" alt="#">
<img src="./images/thumbnail_IMG_1276.jpg" alt="#">
<img src="./images/thumbnail_IMG_1278.jpg" alt="#">
<img src="./images/thumbnail_IMG_1289.jpg" alt="#">
<img src="./images/thumbnail_IMG_2297.jpg" alt="#">
<img src="./images/thumbnail_IMG_2312.jpg" alt="#">
<img src="./images/thumbnail_IMG_3478.jpg" alt="#">
<img src="./images/thumbnail_IMG_8939.jpg" alt="#">
<img src="./images/thumbnail_IMG_8940.jpg" alt="#">
</div>
</section>
<section>
<h2 class="header2" id="contact">Kontakt</h2>
<div class="table-details">
<table class="table-contact-desktop">
<thead>
<tr>
<th>Namn</th>
<th>Telefon</th>
<th>Email</th>
</tr>
</thead>
<tr>
<td>Filip Kasper</td>
<td>072-7425395</td>
<td>[email protected]</td>
</tr>
</table>
<table class="table-contact-mobile">
<tr>
<td>Namn</td>
<td>Filip Kasper</td>
</tr>
<tr>
<td>Telefon</td>
<td>072-7425395</td>
</tr>
<tr>
<td>Email</td>
<td>[email protected]</td>
</tr>
</table>
</div>
</section>
</body>
</html>