-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcases.html
167 lines (159 loc) · 8.62 KB
/
cases.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
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Beyza Cevik - Cases</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.typekit.net/wew8ael.css">
<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=Mulish&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/7a5bc158b3.js" crossorigin="anonymous"></script>
<link rel="icon" href="assests/Favicon.svg" type="image/x-icon">
<link rel="stylesheet" href="cases.css">
<script src="script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!--navbar-->
<nav class="navbar fixed-top navbar-expand-lg p-3">
<div class="container">
<a class="navbar-brand" href="#">
<img src="assests/Favicon.svg" alt="favicon initialen" class="favicon" /></a>
<button class="navbar-toggler" onclick="toggleNavbar()" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#aboutMeSection">ABOUT ME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CASES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#assignmentSection">ASSIGNMENTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#contactSection">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<button id="scrollButton" onclick="scrollToTop()">
<span>↑</span>
</button>
<div class="container" id="casesSection">
<div class="col-12 subTitles">
<h1 class="caseTitle">CASES</h1>
<p>My first case! Exciting isn't it?</p>
</div>
<div class="row">
<div class="col-12 col-lg-8 caseInfo">
<h2 class="titleText">Let me introduce you ... <b class="job">Job</b><b class="ahoi"> Ahoi!</b></h2>
<p class="casesText mt-3">In subject Workplace Learning 2, we had the opportunity to participate in an
exciting project, where we
were outsourced by the company <b class="colorChange">Salamander!</b> The project revolved around
developing <br>a job matching app for
the metal, construction and logistics sectors, and creating a launch <br>website to present the
benefits
of
the app.<br><br>
The project's requirements were that the app should be <b class="colorChange"> fast, simple and
user-friendly </b>, and keep the
concept approachable without the need for a CV. Use of the app is completely free <br>for
candidates,
they
can browse completely anonymously and therefore only need to share <br>personal information during
the
application process.
</p>
</div>
<div class="col-12 col-lg-4 mt-3 mb-5 containerLogo">
<img src="assests/LOGO_JOB_AHOI_FINAL-02.png" alt="lOGO foto" class="caseLogo" />
<p class="credits"><i>Credits to my colleague Sam for creating this Logo</i></p>
</div>
</div>
<h2 class="subtitle">My Team</h2>
<div class="row teamRow">
<div class="col-6 teamCol">
<img src="assests/IMG_6556_v2.png" alt="team picture" class="teamPicture" />
</div>
<div class="col-6 teamCol">
<img src="assests/IMG_6569.png" alt="team picture" class="teamPicture" />
</div>
</div>
<div class="row jobAhoiSection">
<div class="col-12 col-lg-4 containerIconLogo">
<img src="assests/LOGO_JOB_AHOI_FINAL-07.png" alt="icon logo" class="iconCaseLogo" />
</div>
<div class="col-12 col-lg-8">
<h2 class="jobahoitext"><b class="job">Job</b><b class="ahoi"> Ahoi</b>? Pirates??</b></h2>
<p class="paragraphText jobahoitext">
Yeah, you heard it right, <b class="ahoi"> Ahoi!</b><br><br>
At Job Ahoi, our inspiration comes from the adventurous spirit of pirates. We are always on the
lookout
for treasure — where the treasure represents your dream job!<br><br>
Our logo draws inspiration from an ancient pirate map and the compass. <br>The path shown on
the map symbolizes the journey Job Ahoi takes with each client towards their dream job, while the
compass ensures that both the client<br> and Job Ahoi are always heading in the right direction.
</p>
</div>
</div>
<div class="row brandbookSection">
<div class="col-12 col-lg-8 designInfo">
<h2 class="codingText"><b>Coding & Brandbook</b></h2>
<p class="paragraphText">
Within the project, I had the responsibility of being part of the team as a front-end developer. In
a
group of 5, I worked with two other colleagues to build the launch website, where I was specifically
responsible for <b class="colorChange"> creating the index page, implementing card elements, coding
the
navigation and footer, and applying some responsiveness.</b>
And we created all of this with HTML, CSS and JavaScript.
<br><br><b class="colorChange"> I also
made 6 JavaScript codes :</b> sign in/up, navigation bar that changes after signing in, an
automated
counter, body loading and modal that appears when you checkout.
<br><br>
The designs themselves were created by the other 2 colleagues. They chose blue as the primary color
of
trust and loyalty towards our customers.... and blue from the sea! We are pirates remember?
After the branding was discussed, I created the brand guidelines with Illustrator.
<br><br>
Check out <a href="assests/Eindreflectie_WPL2.pdf" target="_blank" class="linkEind colorChange">my
final reflection
(dutch)</a>
if you want to know more about my experience I have gained through this project, and what I have
learned
from it.
</p>
</div>
<div class="col-12 col-lg-4 borderbuttons">
<div class="text-center borders">
<a href="assests/Brandidentity%20(1).pdf" target="_blank">Brand Guideline Job Ahoi</a>
</div>
<div class="text-center borders">
<a href="https://jobahoi.netlify.app/" target="_blank">Website Job Ahoi<br><i>Username:
[email protected]<br>password:
test1234</i></a>
</div>
</div>
</div>
</div>
<footer>
<p>Designed and developed with love by me.</p>
<p>@ Beyza Cevik</p>
</footer>
</body>
</html>