-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
195 lines (182 loc) · 10 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Portfolio Site</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header container">
<div class="header_container">
<div class="header_pict">
<img class="pict" src="img/profile_pict.png" alt="profile_pict">
</div>
<div class="headings">
<h1 class="heading_title"> KATERINA MAKRI </h1>
<p class="heading_subtitle"> JUNIOR FRONT-END DEVELOPER </p>
</div>
</div>
<hr class="line">
</header>
<section class="background_img">
<h1> Hi, I am Katerina</h1>
<h2> Find me on: </h2>
<div>
<a href="https://www.linkedin.com/in/katerina-makri-9a6758127/" target="_blank">
<div class="icon">
<img class="linkedin_img" src="img/linkedin-logo.png" alt="linkedin_img">
</div>
</a>
<a href="https://github.com/katerinamakri" target="_blank">
<div class="icon">
<img class="remote_img" src="img/GitHub-Mark.png" alt="github_img">
</div>
</a>
<a href="https://codepen.io/KaterinaM/" target="_blank">
<div class="icon">
<img class="codepen_img" src="img/network.png" alt="codepen_img">
</div>
</a>
</div>
</section>
<section class="container">
<h2 class="work_title">Featured Work</h2>
<div class="projects_container">
<div class="project_border">
<article class="project">
<div class="img_container">
<img class="project_img" src="https://raw.githubusercontent.com/katerinamakri/ping-coming-soon-page/master/design/desktop-preview.jpg" alt="ping_coming_soon_page_preview">
</div>
<div class="bottom">
<h3 class="project_title">Ping coming soon page</h3>
<p class="description">This project is part of the challenges of Frontend Mentor. It is a simple landing page built with HTML and CSS. </p>
<a href="https://katerinamakri.github.io/ping-coming-soon-page/">Live Demo</a>
<a class="github-page" href="https://github.com/katerinamakri/ping-coming-soon-page">View on Github</a>
</div>
</article>
</div>
<div class="project_border">
<article class="project">
<div class="img_container">
<img class="project_img" src="https://raw.githubusercontent.com/katerinamakri/signup-form/master/design/desktop-preview.jpg" alt="signup_form_preview">
</div>
<div class="bottom">
<h3 class="project_title">Intro component with sign up form</h3>
<p class="description">This project is part of the challenges of Frontend Mentor. It is a sign up form built with AngularJs. </p>
<a href="https://katerinamakri.github.io/signup-form/">Live Demo</a>
<a class="github-page" href="https://github.com/katerinamakri/signup-form">View on Github</a>
</div>
</article>
</div>
<div class="project_border">
<article class="project">
<div class="img_container">
<img class="project_img" src="https://raw.githubusercontent.com/katerinamakri/clipboard-landing-page/master/design/desktop-preview.jpg" alt="landing_page_preview">
</div>
<div class="bottom">
<h3 class="project_title">Clipboard landing page</h3>
<p class="description">This project is part of the challenges of Frontend Mentor. It is a simple landing page built with HTML and CSS. </p>
<a href="https://katerinamakri.github.io/clipboard-landing-page/">Live Demo</a>
<a class="github-page" href="https://github.com/katerinamakri/clipboard-landing-page">View on Github</a>
</div>
</article>
</div>
<div class="project_border">
<article class="project">
<div class="img_container">
<img class="project_img" src="https://raw.githubusercontent.com/katerinamakri/Portfolio_Website/master/img/quote_machine_preview.PNG" alt="quote_machine_preview">
</div>
<div class="bottom">
<h3 class="project_title">Random Quote Machine</h3>
<p class="description">This project was created for Front End Libraries Certification by freeCodeCamp.org. It displays random quotes which is fetched by Mashape API. </p>
<a href="https://katerinamakri.github.io/quote-machine/">Live Demo</a>
<a class="github-page" href="https://github.com/katerinamakri/quote-machine">View on Github</a>
</div>
</article>
</div>
<div class="project_border">
<article class="project">
<div class="img_container">
<img class="project_img" src="https://raw.githubusercontent.com/katerinamakri/Portfolio_Website/master/img/co-working_spaces_preview.PNG" alt="co-working_spaces_preview">
</div>
<div class="bottom">
<h3 class="project_title">React App: Co-working spaces in Athens</h3>
<p class="description">This project is about to develop a single page application that displays co-working spaces in Athens using Google Maps. The goal of the project is to add functionality to this map including highlighted locations, third-party data about those locations and various ways to browse the content.</p>
<a href="https://katerinamakri.github.io/react-neighborhood-map/">Live Demo</a>
<a class="github-page" href="https://github.com/katerinamakri/react-neighborhood-map">View on Github</a>
</div>
</article>
</div>
<div class="project_border">
<article class="project">
<div class="img_container">
<img class="project_img" src="https://raw.githubusercontent.com/katerinamakri/Portfolio_Website/master/img/my-reads-preview.PNG" alt="my-reads-preview">
</div>
<div class="bottom">
<h3 class="project_title">MyReads: A Book Tracking App</h3>
<p class="description">The goal of MyReads project is to create a bookshelf app that user is allowed to select and categorize books he have read, are currently reading, or want to read. The project emphasizes using React to build the application and provides an API server and client library that student will use to persist information as the user interact with the application.</p>
<a href="https://github.com/katerinamakri/reactnd-project-myreads">View on Github</a>
</div>
</article>
</div>
<div class="project_border">
<article class="project">
<div class="img_container">
<img class="project_img" src="https://raw.githubusercontent.com/katerinamakri/Portfolio_Website/master/img/restaurant-reviews-preview.JPG" alt="restaurant-reviews-preview">
</div>
<div class="bottom">
<h3 class="project_title">Restaurant Reviews App</h3>
<p class="description">For the Restaurant Reviews projects, we incrementally converted a static webpage to a mobile-ready web application. We took a static design that is devoid of accessibility and we changed the design to respond to screens of a different size and to be accessible for the use of the screen reader. We also added a service worker to begin the process of creating a seamless offline experience for our users.</p>
<a href="https://github.com/katerinamakri/mws-restaurant-stage-1">View on Github</a>
</div>
</article>
</div>
<div class="project_border">
<article class="project">
<div class="img_container">
<img class="project_img" src="https://raw.githubusercontent.com/katerinamakri/Portfolio_Website/master/img/frogger_preview.PNG" alt="frogger_preview">
</div>
<div class="bottom">
<h3 class="project_title">Classic Arcade Game</h3>
<p class="description">In this game you have a Player and Enemies (Bugs). The goal of the player is to pass on the other side of the grass, without crashing into any of the enemies. The player can move left, right, up and down. The enemies move in varying speeds on the paved block portion of the scene. Once a the player collides with an enemy, the player moves back to the start square and he looses a life. He has three shots. Once the player pass on the other side of the grass he earns points.</p>
<a href="https://katerinamakri.github.io/frontend-arcade-game/">Live Demo</a>
<a class="github-page" href="https://github.com/katerinamakri/frontend-arcade-game">View on Github</a>
</div>
</article>
</div>
<div class="project_border">
<article class="project">
<div class="img_container">
<img class="project_img" src="https://raw.githubusercontent.com/katerinamakri/Portfolio_Website/master/img/Matching_game_Preview.PNG" alt="Matching_game_Preview">
</div>
<div class="bottom">
<h3 class="project_title">Memory Game</h3>
<p class="description">The game board consists of sixteen "cards" arranged in a grid. The deck is made up of eight different pairs of cards, each with different symbols on one side. The cards are arranged randomly on the grid with the symbol face down. The gameplay rules are very simple: flip over two hidden cards at a time to locate the ones that match!.</p>
<a href="https://katerinamakri.github.io/fend-project-memory-game/">Live Demo</a>
<a class="github-page" href="https://github.com/katerinamakri/fend-project-memory-game">View on Github</a>
</div>
</article>
</div>
<div class="project_border">
<article class="project">
<div class="img_container">
<img class="project_img" src="https://raw.githubusercontent.com/katerinamakri/Portfolio_Website/master/img/pixel_art.PNG" alt="pixel_art_img">
</div>
<div class="bottom">
<h3 class="project_title">Pixel Art</h3>
<p class="description">I built a single-page web app that allows users to draw pixel art on a customizable canvas.The users are able to:</p>
<ul>
<li>Dynamically set the size of the table as an N by M grid. </li>
<li>Choose a color. </li>
<li>Click a cell in the grid to fill that cell with chosen color.</li>
</ul>
<a href="https://katerinamakri.github.io/Pixel_Art_Maker/">Live Demo</a>
<a class="github-page" href="https://github.com/katerinamakri/Project-Pixel-Art-Maker">View on Github</a>
</div>
</article>
</div>
</div>
</section>
</body>
</html>