-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
203 lines (203 loc) · 16.7 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
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Arvo:400,400i,700,700i" rel="stylesheet">
<link href="styles/normalize.css" type="text/css" rel="stylesheet">
<link href="styles/main.css" type="text/css" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="images/logo/favicon.ico"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<title>Marina Sideri | Web developer | Portfolio | Contact</title>
</head>
<body>
<div id="window-loading-cover">
<i class="fa fa-spinner fa-pulse fa-3x fa-fw" aria-hidden="true"></i>
</div>
<header class="banner">
<div class="logo-container">
<a class="logo__link" href="#projects">
<object class="logo__svg" type="image/svg+xml" data="images/logo/marina-sideri-logo.svg" tabindex="0">
<img src="images/logo/marina-sideri-logo-black.png" width="60.5px" alt="Logo for Marina Sideri">
</object>
</a>
<h1 class="logo__my-name">Marina Sideri</h1>
</div >
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__list__item"><a href="#about">About</a></li>
<li class="navigation__list__item"><a href="#projects">Projects</a></li>
<li class="navigation__list__item"><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<div class="container main-container">
<section id="about" class="container about-container target-offset container--background-dark">
<h2 class="about-container__heading">Welcome to my portfolio website<img class="profile-picture" src="images/about/marina-sideri-photo.jpg" alt="Profile picture of Marina Sideri"></h2>
<div class="about-container__text">
<p class="profile-details">I am a full-stack JavaScript web developer based in London, currently learning and working at <a class = "about-container__link" href="http://www.foundersandcoders.com/" target="_blank">Founders & Coders</a>.</p>
<p class="profile-details">With a civil engineering background and more than three years of experience in technical consultancy roles, I decided to transfer my engineering thinking into the creative world of web development.</p>
<p class="profile-details">I love building apps and websites and learning new technologies. Check out some of <a class = "about-container__link" href="#projects"> my projects</a>.</p>
<div class="about-container__links">
<a class = "about-container__link-button cv-link" href="assets/Marina-Sideri-CV.pdf">CV</a> <a class = "about-container__link-button contact-link" href="#contact">Contact</a>
</div>
</div>
</section>
<section id="projects" class="container project-container target-offset ">
<h2 class="project-container__heading">
Projects
</h2>
<div class="project-container__row row">
<figure id="escher-tribute" class="project-container__figure col-4">
<div class="project-container__figure-cover" visibility="hidden">
<p class="project-container__figure-description">
<img class="project-container__tech-icon" src="images/tech-icons/solo-icon.png" alt="Individual project">
<img class="project-container__tech-icon" src="images/tech-icons/HTML5_Logo_64.png" alt="HTML5 logo">
<img class="project-container__tech-icon" src="images/tech-icons/CSS3_Logo.png" alt="CSS3 logo"> <br>
A tribute web page to the graphic artist, M.C. Escher. Created using Bootstrap, as part of the <a href="https://www.freecodecamp.com" target="_blank">freeCodeCamp</a> front-end course.
Deployed on <a href="https://marisid.github.io/escher_tribute/" target="_blank">GitHub pages</a>.
</p>
</div>
<figcaption class="project-container__caption"><a class="project-container__link" href="https://github.com/marisid/escher_tribute" target="_blank">Tribute page to M.S. Escher</a></figcaption>
<img src="images/projects/escher_tribute/escher_tribute_ipad_crop.png" alt="Desktop view of my tribute page for M.S. Escher">
</figure>
<figure id="quote-machine" class="project-container__figure col-4">
<div class="project-container__figure-cover" visibility="hidden">
<p class="project-container__figure-description">
<img class="project-container__tech-icon" src="images/tech-icons/solo-icon.png" alt="Individual project">
<img class="project-container__tech-icon" src="images/tech-icons/HTML5_Logo_64.png" alt="HTML5 logo">
<img class="project-container__tech-icon" src="images/tech-icons/CSS3_Logo.png" alt="CSS3 logo">
<img class="project-container__tech-icon" src="images/tech-icons/JS_Logo.png" alt="JavaScript logo"> <br>
A random quote generator. Created using jQuery, as part of the <a href="https://www.freecodecamp.com" target="_blank">freeCodeCamp</a> front-end course.
Deployed on <a href="https://marisid.github.io/quote_machine/" target="_blank">GitHub pages</a>.
</p>
</div>
<figcaption class="project-container__caption"><a class="project-container__link" href="https://github.com/marisid/quote_machine/" target="_blank">Quote machine generator</a></figcaption>
<img src="images/projects/quote_machine/quote_machine_closeup.png" alt="View of my quote machine generator website">
</figure>
<figure id="autocomplete-app" class="project-container__figure col-4">
<div class="project-container__figure-cover" visibility="hidden">
<p class="project-container__figure-description">
<img class="project-container__tech-icon" src="images/tech-icons/team-icon.png" alt="Team project">
<img class="project-container__tech-icon" src="images/tech-icons/nodejs-logo.png" alt="Node.js logo">
<img class="project-container__tech-icon" src="images/tech-icons/HTML5_Logo_64.png" alt="HTML5 logo">
<img class="project-container__tech-icon" src="images/tech-icons/CSS3_Logo.png" alt="CSS3 logo"> <br>
A word finder app with autcomplete functionality and Google search redirection.
Created as a team project for the <a href="http://www.foundersandcoders.com/" target="_blank">Founders & Coders</a> course using a Node server setup. Deployed on <a href="https://nodetojoy-autocomplete.herokuapp.com/" target="_blank">Heroku</a>.
</p>
</div>
<figcaption class="project-container__caption"><a class="project-container__link" href="https://github.com/NodeGroup2/autocomplete-project" target="_blank">Autocomplete app</a></figcaption>
<img src="images/projects/autocomplete/autocomplete.gif" alt="Demo of autocomplete app">
</figure>
</div>
<div class="project-container__row row">
<figure id="globe-town-devs" class="project-container__figure col-3 ">
<div class="project-container__figure-cover" visibility="hidden">
<p class="project-container__figure-description">
<img class="project-container__tech-icon" src="images/tech-icons/team-icon.png" alt="Team project">
<img class="project-container__tech-icon" src="images/tech-icons/HTML5_Logo_64.png" alt="HTML5 logo">
<img class="project-container__tech-icon" src="images/tech-icons/CSS3_Logo.png" alt="CSS3 logo">
<img class="project-container__tech-icon" src="images/tech-icons/JS_Logo.png" alt="JavaScript logo"> <br>
A portfolio website to showcase <a href="http://www.foundersandcoders.com/" target="_blank">Founders & Coders</a> to the world.
Built as a team project based on a responsive web design and vanilla client-side JavaScript.
Deployed on <a href="https://globetowndevs.github.io/blog/" target="_blank">GitHub pages</a>.
</p>
</div>
<figcaption class="project-container__caption"><a class="project-container__link" href="https://github.com/GlobeTownDevs/blog/">Globe town devs website</a></figcaption>
<img src="images/projects/globe-town-devs/globe-town-devs-portfolio-mobile.jpeg" alt="Mobile view of Globe Town Devs">
</figure>
<figure id="weather-app" class="project-container__figure col-3">
<div class="project-container__figure-cover" visibility="hidden">
<p class="project-container__figure-description">
<img class="project-container__tech-icon" src="images/tech-icons/solo-icon.png" alt="Individual project">
<img class="project-container__tech-icon" src="images/tech-icons/HTML5_Logo_64.png" alt="HTML5 logo">
<img class="project-container__tech-icon" src="images/tech-icons/CSS3_Logo.png" alt="CSS3 logo">
<img class="project-container__tech-icon" src="images/tech-icons/JS_Logo.png" alt="JavaScript logo"> <br>
A web app that queries a weather API and shows the current weather based on the user location.
Created using jQuery, as part of the <a href="https://www.freecodecamp.com" target="_blank">freeCodeCamp</a> front-end course.
</p>
</div>
<figcaption class="project-container__caption"><a class="project-container__link" href="http://codepen.io/marisid/pen/zBZoJg" target="_blank">Weather app</a></figcaption>
<img src="images/projects/weather_app/weather-app-close-up.png" alt="View of weather app">
</figure>
<figure id="grags-app" class="project-container__figure col-3">
<div class="project-container__figure-cover" visibility="hidden">
<p class="project-container__figure-description">
<img class="project-container__tech-icon" src="images/tech-icons/team-icon.png" alt="Team project">
<img class="project-container__tech-icon" src="images/tech-icons/hapi-logo.png" alt="hapi.js logo">
<img class="project-container__tech-icon" src="images/tech-icons/HTML5_Logo_64.png" alt="HTML5 logo">
<img class="project-container__tech-icon" src="images/tech-icons/CSS3_Logo.png" alt="CSS3 logo"> <br>
A web app to search for recipes and request Tesco shopping lists for recipe ingredients.
Built as a team project for the <a href="http://www.foundersandcoders.com/" target="_blank">Founders & Coders</a> course using a hapi server setup and querying data from two web APIs.
Deployed on <a href="https://grags.herokuapp.com/" target="_blank">Heroku</a>.
</p>
</div>
<figcaption class="project-container__caption"><a class="project-container__link" href="https://github.com/NodeGroup2/GRAGS" target="_blank">Get Recipes And Groceries app</a></figcaption>
<img src="images/projects/grags/grags-app-mobile-1.png" alt="Mobile view of grags app">
</figure>
<figure id="news-visualiser" class="project-container__figure col-3">
<div class="project-container__figure-cover" visibility="hidden">
<p class="project-container__figure-description">
<img class="project-container__tech-icon" src="images/tech-icons/team-icon.png" alt="Team project">
<img class="project-container__tech-icon" src="images/tech-icons/HTML5_Logo_64.png" alt="HTML5 logo">
<img class="project-container__tech-icon" src="images/tech-icons/CSS3_Logo.png" alt="CSS3 logo">
<img class="project-container__tech-icon" src="images/tech-icons/JS_Logo.png" alt="JavaScript logo"> <br>
A responsive news feed website that queries two web APIs using vanilla client-side JavaScript.
Built as a team project for the <a href="http://www.foundersandcoders.com/" target="_blank">Founders & Coders</a> course.
</p>
</div>
<figcaption class="project-container__caption"><a class="project-container__link" href="https://github.com/GlobeTownDevs/api" target="_blank">News visualiser website</a></figcaption>
<img src="images/projects/news-visualiser/news-visualiser-mobile.jpeg" alt="Mobile view of news visualiser app">
</figure>
</div>
<div class="project-container__row row">
<figure id="ocdb-app" class="project-container__figure col-6">
<div class="project-container__figure-cover" visibility="hidden">
<p class="project-container__figure-description">
<img class="project-container__tech-icon" src="images/tech-icons/team-icon.png" alt="Team project">
<img class="project-container__tech-icon" src="images/tech-icons/hapi-logo.png" alt="hapi.js logo">
<img class="project-container__tech-icon" src="images/tech-icons/postgresql-logo.gif" alt="PostgreSQL logo">
<img class="project-container__tech-icon" src="images/tech-icons/handlebars-logo.png" alt="Handlebars.js logo">
<img class="project-container__tech-icon" src="images/tech-icons/HTML5_Logo_64.png" alt="HTML5 logo">
<img class="project-container__tech-icon" src="images/tech-icons/CSS3_Logo.png" alt="CSS3 logo"> <br>
A platform for writing and sharing reviews of coding resources.
Built as a team project for the <a href="http://www.foundersandcoders.com/" target="_blank">Founders & Coders</a> course using a hapi server setup, a PostgreSQL local database, Handlebars templates and session management using cookies.
</p>
</div>
<figcaption class="project-container__caption"><a class="project-container__link" href="https://github.com/NodeGroup2/OCD-B" target="_blank">Open Code Database app</a></figcaption>
<img src="images/projects/ocd-b/ocdb.gif" alt="Demo of OCD-B app">
</figure>
<figure id="gitpom-app" class="project-container__figure col-6">
<div class="project-container__figure-cover" visibility="hidden">
<p class="project-container__figure-description">
<img class="project-container__tech-icon" src="images/tech-icons/team-icon.png" alt="Team project">
<img class="project-container__tech-icon" src="images/tech-icons/hapi-logo.png" alt="hapi.js logo">
<img class="project-container__tech-icon" src="images/tech-icons/handlebars-logo.png" alt="Handlebars.js logo">
<img class="project-container__tech-icon" src="images/tech-icons/HTML5_Logo_64.png" alt="HTML5 logo">
<img class="project-container__tech-icon" src="images/tech-icons/CSS3_Logo.png" alt="CSS3 logo"> <br>
A time management app which integrates with GitHub using OAuth.
Built as a team project for the <a href="http://www.foundersandcoders.com/" target="_blank">Founders & Coders</a> course using a hapi server setup, Handlebars templates and session management using cookies.
</p>
</div>
<figcaption class="project-container__caption"><a class="project-container__link" href="https://github.com/The-Authenticators/gitpom" target="_blank">GitPom app</a></figcaption>
<img src="images/projects/gitpom/gitpom.gif" alt="Demo of GitPom app">
</figure>
</div>
</section>
<section id="contact" class="container contact-container target-offset container--background-dark">
<h2 class="contact-container__heading">Contact</h2>
<p>Get in touch for feedback, questions or even just to say hi!</p>
<ul class="contact__icons-list">
<li class="contact__icons-list__item"><a href="https://github.com/marisid" aria-label="github-link"><i class="fa fa-github fa-lg"></i></a></li>
<li class="contact__icons-list__item"><a href="https://uk.linkedin.com/in/marinasideri" aria-label="linkedin-link"><i class="fa fa-linkedin fa-lg"></i></a></li>
<li class="contact__icons-list__item"><a href="https://twitter.com/sid_marinako" aria-label="twitter-link"><i class="fa fa-twitter fa-lg"></i></a></li>
<li class="contact__icons-list__item"><a href="mailto:[email protected]" aria-label="email-link"><i class="fa fa-envelope fa-md"></i></a></li>
</ul>
</section>
</div>
<footer class="footer">
<p class="footer__copyright">2017 Marina Sideri © All rights reserved</p>
</footer>
<script src="js/app.js"></script>
</body>
</html>