-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
332 lines (316 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
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="My Portfolio website, containing an about me section,
a projects section with the relevant work I have, and a contanct section with my details">
<link rel="icon" type="image/png" sizes="32x32" href="./dist/img/Hermann_Rasch.jpg">
<title> Hermann's Portfolio</title>
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
<link rel="stylesheet" href="./Css/styles.css" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@100&display=swap" rel="stylesheet">
</head>
<body>
<header class="page-header">
<nav class="main-navigation_page-header_item" id="sticky-nav-sm">
<ul role="menubar" class="navigation-list">
<li role="menuitem">
<a href="./index.html" class="navigation-list_item active">Hermann Rasch</a>
</li>
<li role="menuitem">
<a href="#container-about-me" class="navigation-list_item">About me</a>
</li>
<li role="menuitem">
<a href="#projects" class="navigation-list_item">Projects</a>
</li>
<li role="menuitem">
<a href="#contact" class="navigation-list_item">Contact</a>
</li>
</ul>
<div class="Hamburger-menu" aria-label="Toggle Menu" tabindex="0" id="sticky-nav-sm">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</header>
<br><br>
<main>
<div id="profile">
<div>
<h1 class="h1">Howdy Folks, Bienvenidos!</h1>
</div>
<br>
<div class="portrait-container">
<img class="portrait" src="./dist/img/Hermann_Rasch.jpg" alt="My Portrait" >
</div>
<div class="profile-text">
<br>
<p class="text">My name is Hermann, I am mexican-german Full-Stack Developer.</p><br>
<button class="button-check-code">
<a href="#projects" class="check-code"> Check out my code!</a>
</button>
<br>
<button class="button-cv">
<a href="./dist/downloads/Hermann Rasch_Full-Stack-CV.pdf" download="Hermann-Rasch_CV.pdf">
<img src="./dist/favicon/cv.png" class="cv-icon" alt="Download CV">
</a>
</button>
</div>
</div>
<br>
<div id="container-about-me">
<div id="about-me-info-container">
<div class="about-me-info">
<h2 id="about">About me</h2>
<p class="p-about">Hello there! I'm Hermann, a budding Fullstack Developer with a particular soft spot for the Frontend.
The magic of transforming ideas into tangible apps thrills me to my core.
My journey into coding began with a simple chat with friends, sparking a passion that led me to dive headfirst into this captivating world.
While I have a solid understanding of Backend processes, it's the creativity and visual impact of Frontend development that truly captures my heart.
Every day is a new opportunity for growth, aiming not just to enhance my skills but to leverage technology in ways that enrich lives and open doors to new possibilities for everyone.
</p>
</div>
<div class="about-me-info">
<img src="./dist/img/yo-Chichen.JPG" alt="México-Chichenitza" class="about-me-info-pic" >
</div>
</div>
<br><br>
<div class="skills-container">
<h1 class="my-skills"> My Skills:</h1>
<div class="container-skills">
<table>
<tr>
<th class="skills">Front-End </th>
</tr>
<tr>
<td>
<ul>
<li>Interfaces</li>
<li>Responsive designs, modals, and touch interactions</li>
<li>Web components</li>
<li>Accesible websites/ -apps</li>
<li>Progressive Web Applications</li>
<li>Mobile Apps (React-Native, Expo, PWA)</li>
<li>Test & Behavioral-Driven-Development</li>
<li>Continous Integration / Delivery</li>
</ul>
</td>
</tr>
<tr>
<th class="skills">Back-End</th>
</tr>
<tr>
<td>
<ul>
<li>NodeJS & express</li>
<li>Creation & Integration of APIs</li>
<li>Implementation and integration of Web Services like FaaS, BaaS</li>
<li>Relational & Non-Relational data bases</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
<br><br>
<div class="table-grid-container">
<div class="table-grid-strech">
<h2 class="tech-stack"> Tech Stack</h2>
<div class="table-grid">
<div class="grow">
<img src="./dist/Tech-stack img/html-5-logo.png" id="icon-tech-backg" alt="Tech-stack">
</div>
<div class="grow">
<img src="./dist/Tech-stack img/css-3.png" id="icon-tech-backg" alt="Tech-stack">
</div>
<div class="grow">
<img src="./dist/Tech-stack img/js.png" id="icon-tech-backg" alt="Tech-stack">
</div>
<div class="grow">
<img src="./dist/Tech-stack img/bootstrap.png" id="icon-tech-backg" alt="Tech-stack">
</div>
<div class="grow">
<img src="./dist/Tech-stack img/jquery.png" id="icon-tech" alt="Tech-stack">
</div>
<div class="grow">
<img src="./dist/Tech-stack img/mongodb.png" id="icon-tech" alt="Tech-stack">
</div>
<div class="grow">
<img src="./dist/Tech-stack img/express_js.png" id="icon-tech" alt="Tech-stack">
</div>
<div class="grow">
<img src="./dist/Tech-stack img/nodejs.png" id="icon-tech" alt="Tech-stack">
</div>
<div class="grow">
<img src="./dist/Tech-stack img/sass.png" id="icon-tech" alt="Tech-stack">
</div>
<div class="grow">
<img src="./dist/Tech-stack img/reactBootstrap.png" id="icon-tech" alt="Tech-stack">
</div>
<div class="grow">
<img src="./dist/Tech-stack img/angular-logo.png" id="icon-tech" alt="Tech-stack">
</div>
<div class="grow">
<img src="./dist/Tech-stack img/aws lambda.png" id="icon-tech" alt="Tech-stack">
</div>
<div class="grow">
<img src="./dist/Tech-stack img/Firebase-logo.png" id="icon-tech" alt="Tech-stack">
</div>
<div class="grow">
<img src="./dist/Tech-stack img/Typescript-logo.png" id="icon-tech" alt="Tech-stack">
</div>
<div class="grow">
<img src="./dist/Tech-stack img/python-o.png" id="icon-tech" alt="Tech-stack">
</div>
</div>
</div>
</div>
<br>
<div id="about-me-info-container">
<div class="about-me-info">
<p class="p-about">
Some other things about me:
I love sports specifically football, I enjoy hiking or simply having a walk around the surrounding nature. Natural Sciences are fascinating topics.
Additionally, Video Games are a nice relaxing but exciting diversion. I love Mexican food, but I love to be surprised by any other culinary experience.
Additionally, I enjoy how big cities offer diversity and lots of events (for instance Munich has always events going on).
</p>
</div>
<div class="about-me-info">
<img src="./dist/img/MUC-rathaus.jpg" alt="Munich-rathaus" class="about-me-info-pic">
</div>
</div>
</div>
</div>
<h2 id="projects">Projects</h2>
<div class="grid-container">
<div class="grid-item">
<h2 class="project-title">Chat App</h2>
<p class="project-p">
Chat App an App for mobile devices that will provide users a chat interface
and function options to choose and share images, as well as their location (a mock up Whats App or Telegram per se).
</p>
<br>
<a href="https://github.com/HerRA17/Chat-App" class="link-Example">
<img src="./dist/Projects portraits/Chat-app_demo.PNG" id="projects-img" alt="Chat-App Project image">
</a>
</div>
<div class="grid-item" id="movies-couch">
<h2 class="project-title">Movies-Couch client side</h2>
<p class="project-p"> Client side part of the Application "Movies-Couch", where the user will be able to initially
sign up or login to access relevant movie content.
Brows the different Movies the app displays. Additionally the user will be able to add his favorite movies
to a list. User will have available a Userpage where he can see his information, edit & delete/deregister
from the app.
</p>
<a href="https://github.com/HerRA17/movies-couch_client" class="link-Example">
<img src="./dist/Projects portraits/Movies-couch.png" id="projects-img" alt="Movies Couch Project image">
</a>
</div>
<div class="grid-item" id="Future-Estate">
<h2 class="project-title">Future Estate </h2>
<p class="project-p">Future Estate is a comprehensive real estate platform designed to connect potential property buyers
and renters with their next home. The application is structured into two main directories: api for backend services
and client for frontend interface, ensuring a clear separation of concerns and scalability.
</p>
<br>
<br>
<a href="https://future-estate.onrender.com" class="link-Example">
<img src="./dist/Projects portraits/Future-Estate-Home.png" id="projects-img" alt="Future Estate Project image">
</a>
</div>
<div class="grid-item">
<h2 class="project-title">Movies Couch - Angular</h2>
<p class="project-p"> Client side part of the Application "Movies-Couch", where the user will be able to initially sign up or login
to access relevant movie content.
The user can brows as well the different Movies the app displays. Additionally the user will be able to add his favorite movies
to a list. The User will have available a Profile page where he can see his information, edit & deregister
from the app.
</p>
<br>
<a href="https://github.com/HerRA17/moviesCouch-Angular-client" class="link-Example">
<img src="./dist/Projects portraits/angular-preview.png" id="projects-img" alt="Movies-Couch Angular Project image">
</a>
<br>
</div>
<div class="grid-item">
<h2 class="project-title">Movies Couch API</h2>
<p class="project-p"> The Server component of a Movies Couch application. The web application will provide users with access to information about
different movies, directors, and genres. Users will be able to sign up, update their personal information, and create a list of their
favorite movies.
</p>
<br>
<a href="https://github.com/HerRA17/movies-couch_api" class="link-Example">
<img src="./dist/Projects portraits/Movies-Couch_API.png" id="projects-img" alt="Movies-Couch_API Project image">
</a>
</div>
<div class="grid-item" id="Book-Catalogue">
<h2 class="project-title">Book Catalogue</h2>
<p class="project-p">The Book Catalogue app is a comprehensive web application designed to manage a collection of books effectively.
It serves as an interactive platform where users can explore a variety of books, each detailed with essential information
like title, author, subgenre, and publishing year. The application's main strength lies in its CRUD (Create, Read, Update, Delete)
functionality, allowing for seamless management of the book inventory.
</p>
<br>
<a href="https://github.com/HerRA17/Book-Catalogue" class="link-Example">
<img src="./dist/Projects portraits/Book-Catalogue.png" id="projects-img" alt="Book-Catalogue Project image">
</a>
</div>
<div class="grid-item" id="pokedex">
<h2 class="project-title">Pokédex</h2>
<p class="project-p">Small web application that loads data from an external API (Pokemons from an external source).
Additionally enables viewing loaded data items in detail (height, weight, types).
About 150 pokemons available.
</p>
<br>
<a href="https://herra17.github.io/Pokedex_App/" class="link-Example">
<img src="./dist/Projects portraits/pokedeks_preview.png" id="projects-img" alt="Pokedex Project image">
</a>
</div>
<div class="grid-item" id="to-do-list">
<h2 class="project-title">To do list</h2>
<p class="project-p">To do list app, the app allows user to insert data, cross off and remove it.
</p>
<br>
<a href="https://herra17.github.io/to-do-list-app/" class="link-Example">
<img src="./dist/Projects portraits/Todo-list_preview.png" id="projects-img" alt="To do list Project image">
</a>
</div>
</div>
</main>
<br><br>
<footer class="page-footer">
<div>
<h2 id="Contact">Contact</h2>
<div class="contact-info" id="contact">
<img src="./dist/favicon/gmail.png" alt="email" id="email-icon">
<p class="contact-details">[email protected]</p>
<img src="./dist/favicon/smartphone-call.png" alt="phone" id="phone-icon">
<p class="contact-details">+015209504022</p>
</div>
<p class="find-me">Find me on!</p>
</div>
<div class="social-media">
<a href="https://github.com/HerRA17" class="anchor-media">
<img class="github-icon" src="./dist/img/github-svgrepo-com.svg" alt="Github" >
</a>
<a href="https://www.linkedin.com/in/hermann-gustav-rasch-6118b1b9/" class="anchor-media">
<img class="linkedin-icon" src="./dist/img/linkedin-svgrepo-com.svg" alt="Linkedin" >
</a>
</div>
<div class="credit">
<a href="https://www.flaticon.com/free-icons/css-3" title="css 3 icons">Css 3, Bootstrap, React icons created by Freepik - Flaticon</a>
<br>
<a href="https://www.flaticon.com/free-icons/phone" title="phone icons">Phone icons created by Freepik - Flaticon</a>
<br>
<a href="https://www.flaticon.com/free-icons/gmail" title="gmail icons">Gmail icons created by Pixel perfect - Flaticon</a>
<br>
<a href="https://www.flaticon.com/de/kostenlose-icons/mehr" title="mehr Icons">Mehr Icons erstellt von gravisio - Flaticon</a>
<br>
<a href="https://www.flaticon.com/free-icons/businessman" title="businessman icons">Businessman icons created by Freepik - Flaticon</a>
</div>
</footer>
<!-- <script src="js/tota11y.min.js"></script> -->
<script src="./js/hamburger-function.js"></script>
</body>
</html>