-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
189 lines (183 loc) · 12.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="static/styles.css">
<title>Portfolio - Erik V. F</title>
</head>
<body>
<header class="row col-12">
<nav class="navbar-expand-sm navbar-dark" id="nav">
<div class="container px-4 px-lg-5 col-12">
<button class="navbar-toggler text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
</button>
<div class="collapse navbar-collapse col-8" id="navbarResponsive">
<ul class="navbar-nav ms-auto py-4 py-lg-0 fit-content">
<li class="nav-item"><a class="nav-link text-white px-lg-3 py-3 py-lg-4" href="#django">Django</a></li>
<li class="nav-item"><a class="nav-link text-white px-lg-3 py-3 py-lg-4" href="#chjs">CSS/HTML/JS</a></li>
<li class="nav-item"><a class="nav-link text-white px-lg-3 py-3 py-lg-4" href="#python">Python</a></li>
<li class="nav-item"><a class="nav-link text-white px-lg-3 py-3 py-lg-4" href="#react">React</a></li>
<li class="nav-item"><a class="nav-link text-white px-lg-3 py-3 py-lg-4" href="#collab">Collaborative projects</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="card-deck d-flex d-inline-item mb-5 mt-3 row justify-content-center">
<div class="card col-md-6 col-10 m-1 d-flex">
<div class="card-title"><h2 class="text-center">Portfolio - Erik V. Forsman</h2></div>
<div class="card-body text-center"><p>I am a Junior Software Developer with an education from Code Institute. The education is in full-stack development. Among other things, I know Bootstrap, React, Flask and Django. On top of that, I am learning Elm.</p></div>
</div>
</div>
<div class="row justify-content-around">
<img class="icon" id="django" src="media/terminal-solid.svg" alt="terminal icon">
<h1 class="text-center">Django</h1>
</div>
<div class="card-deck d-flex d-inline-item mb-5 row justify-content-center">
<div class="card col-md-6 col-10 m-1 d-flex">
<div class="card-title text-center"><h2>City theatre</h2></div>
<div class="card-body text-center">
<p>A website for an imaginary theatre. The user can place and see bookings. It was made using Django, PostgreSQL and Bootstrap. </p>
<ul>
<li><a href="https://theatre-booking-ci.herokuapp.com/booking/" target="_blank">Deployed site</a></li>
<li><a href="https://github.com/11bus11/theatre-booking" target="_blank">Repository</a></li>
</ul>
</div>
</div>
<div class="card col-md-6 col-10 m-1 d-flex d-inline-item">
<div class="card-title text-center"><h2>Dino's book store</h2></div>
<div class="card-body text-center">
<p>An online book store (made up) created with Django, Bootstrap, PostgreSQL and JavaScript. For the payments I used Stripe.</p>
<ul>
<li><a href="https://book-store-ci.herokuapp.com/" target="_blank">Deployed site</a></li>
<li><a href="https://github.com/11bus11/book-store1" target="_blank">Repository</a></li>
</ul>
</div>
</div>
</div>
<div class="row justify-content-around">
<img class="icon" id="chjs" src="media/code-solid.svg" alt="code icon">
<h1 class="text-center">Css/html/js</h1>
</div>
<div class="card-deck d-flex d-inline-item mb-5 row justify-content-center">
<div class="card col-md-6 col-10 m-1 d-flex d-inline-item">
<div class="card-title text-center"><h2>Lizard-Spock extension</h2></div>
<div class="card-body text-center">
<p>A version of rock paper scissors, with the extra choices “lizard” and “Spock” (from the tv-series “The Big Bang Theory”). This web application was made using HTML, CSS and JavaScript.</p>
<ul>
<li><a href="https://11bus11.github.io/lizard-spock-extension/" target="_blank">Deployed site</a></li>
<li><a href="https://github.com/11bus11/lizard-spock-extension" target="_blank">Repository</a></li>
</ul>
</div>
</div>
<div class="card col-md-6 col-10 m-1 d-flex d-inline-item">
<div class="card-title text-center"><h2>About cats</h2></div>
<div class="card-body text-center">
<p>Website with information about cats. It was made with HTML and CSS.</p>
<ul>
<li><a href="https://11bus11.github.io/about-cats/" target="_blank">Deployed site</a></li>
<li><a href="https://github.com/11bus11/about-cats" target="_blank">Repository</a></li>
</ul>
</div>
</div>
</div>
<div class="row justify-content-around">
<img class="icon" id="python" src="media/python.svg" alt="python-icon">
<h1 class="text-center">python</h1>
</div>
<div class="card-deck d-flex d-inline-item mb-5 row justify-content-center">
<div class="card col-md-6 col-10 m-1 d-flex d-inline-item">
<div class="card-title text-center"><h2>Data analysys</h2></div>
<div class="card-body text-center">
<p>A program that tells the user how many percents of the answers to a form is yes, no and no answer. Gets its data from a google sheets document and inputs the results into the same document. The language used was python.</p>
<ul>
<li><a href="https://data-analysis-ci.herokuapp.com/" target="_blank">Deployed site</a></li>
<li><a href="https://github.com/11bus11/data-analysis" target="_blank">Repository</a></li>
</ul>
</div>
</div>
</div>
<div class="row justify-content-around">
<img class="icon" id="react" src="media/react.svg" alt="react icon">
<h1 class="text-center">react</h1>
</div>
<div class="card-deck d-flex d-inline-item mb-5 row justify-content-center">
<div class="card col-md-6 col-10 m-1 d-flex d-inline-item">
<div class="card-title text-center"><h2>Adopt an animal</h2></div>
<div class="card-body text-center">
<p>A site for adopting animals. Made with React. The information about the animals are fetched from an API.</p>
<ul>
<li><a href="" target="_blank">Deployed site</a></li>
<li><a href="" target="https://github.com/11bus11/adopt-an-animal">Repository</a></li>
</ul>
</div>
</div>
<div class="card col-md-6 col-10 m-1 d-flex d-inline-item">
<div class="card-title text-center"><h2>Percipa photography</h2></div>
<div class="card-body text-center">
<p>Comming soon!</p>
<ul>
<li><a href="" target="_blank">Deployed site</a></li>
<li><a href="" target="_blank">Repository</a></li>
</ul>
</div>
</div>
</div>
<div class="row justify-content-around">
<img class="icon" id="collab" src="media/people-group-solid.svg" alt="group icon">
<h1 class="text-center">collaborative projects</h1>
</div>
<div class="card-deck d-flex d-inline-item mb-5 row justify-content-center">
<div class="card col-md-6 col-10 m-1 d-flex d-inline-item">
<img class="card-image" src="media/CI-jan-hackathon.png" alt="january hackathon badge">
<div class="card-title text-center"><h2>Snappy savings</h2></div>
<div class="card-body text-center">
<p>This project was created during a Hackathon in January 2023. It is a website that calculates if you can afford to buy something.</p>
<ul>
<li><a href="https://snappy-savings.herokuapp.com/" target="_blank">Deployed site</a></li>
<li><a href="https://github.com/MiaRasmussen05/Hackathon-Jan-23"target="_blank">Repository</a></li>
</ul>
</div>
</div>
<div class="card col-md-6 col-10 m-1 d-flex d-inline-item">
<img class="card-image" src="media/CI-feb-hackathon.png" alt="february hackathon badge">
<div class="card-title text-center"><h2>Helping Hands 2023</h2></div>
<div class="card-body text-center">
<p>Me and my team created this project during the Code Institute February hackathon. The theme was "World NGO day", so my theme created a website for finding interesting NGOs to donate to and for finding events to take part in. We won 1st place with this project.</p>
<ul>
<li><a href="https://helping-hand-ci.herokuapp.com/" target="_blank">Deployed site</a></li>
<li><a href="https://github.com/jackcrosbie/hackathon-feb" target="_blank">Repository</a></li>
</ul>
</div>
</div>
<div class="card col-md-6 col-10 m-1 d-flex d-inline-item">
<img class="card-image" src="media/CI-mar-hackathon.png" alt="march hackathon badge">
<div class="card-title text-center"><h2>ChatWIT</h2></div>
<div class="card-body text-center">
<p>My team created a website where the user can chat with different important women in tech. The theme for this hackathon (march) was “Women in tech”. We created the website using (among others) Flask and ChatGPT.</p>
<ul>
<li><a href="https://women-in-tech-hackathon.herokuapp.com/" target="_blank">Deployed site</a></li>
<li><a href="https://github.com/keironchaudhry/women-in-tech-hackathon" target="_blank">Repository</a></li>
</ul>
</div>
</div>
</div>
</main>
<footer>
<h1 class="text-center mt-2">Contact</h1>
<p class="text-center">linkedin: <a class="text-white" href="https://www.linkedin.com/in/erik-vodopivec-forsman-485b61217/?lipi=urn%3Ali%3Apage%3Ad_flagship3_feed%3BFluAbyywQLSUW%2B4BA5a1Mw%3D%3D" target="_blank">Erik vodopivec forsman</a></p>
<p class="text-center">email: [email protected]</p>
<p class="text-center mb-0">github: <a class="text-white" href="https://github.com/11bus11" target="_blank">11bus11</a></p>
</footer>
</body>
</html>