-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathwork.html
More file actions
165 lines (157 loc) · 8.19 KB
/
work.html
File metadata and controls
165 lines (157 loc) · 8.19 KB
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
<!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">
<link rel="icon" type="img/x-icon" href="img/portfolio-favicon.ico">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.production.css">
<title>Dörthe Kosicki - Portfolio!</title>
</head>
<body>
<!-- Header including the logo and the main navigation -->
<header class="page-header">
<a href="index.html"><img src="img/dk-logo.png" alt="logo of Dörthe Kosicki" class="page-header__item logo"></a>
<!-- Hamburger Icon -->
<div id="hamburger-icon" class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<!-- Navigation Links -->
<nav class="main-navigation page-header__item">
<div class="container highlightTextOut">
<ul role="menubar" class="navigation-list">
<li role="presentation">
<a href="index.html" role="menuitem" class="navigation-list__item">Home</a>
</li>
<li role="presentation">
<a href="about.html" role="menuitem" class="navigation-list__item">About Me</a>
</li>
<li role="presentation">
<a href="work.html" role="menuitem" class="navigation-list__item--active">Projects</a>
</li>
<li role="presentation">
<a href="contact.html" role="menuitem" class="navigation-list__item">Say hi!</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Main content -->
<main>
<h1 class="profile">My Journey Through Code</h1>
<div class="grid">
<!-- Grid items will live here -->
<div class="grid__item">
<h2>FlickPick (React)</h2>
<!-- <img src="img/flickpick-react.jpg" alt="FlickPick-React App Screenshot" class="project-screenshot"> -->
<img src="img/sign-up.JPG" alt="FlickPick-Angular Screenshot" class="project-screenshot">
<img src="img/login.JPG" alt="FlickPick-Angular Screenshot" class="project-screenshot">
<img src="img/fp-react-movies.png" alt="FlickPick-React App Screenshot" class="project-screenshot">
<img src="img/fp-react-profile.png" alt="FlickPick-React App Screenshot" class="project-screenshot">
<p>
As part of this project, I created a server-side component of a "movie" web application
that gives users access to information about various concert films, directors, and genres.
Users can perform CRUD operations on their personal information and create a list of their favorite movies.
</p>
<div class="link-container">
<a href="https://myflickpick.netlify.app/login" target="_blank">Live Demo</a><br>
<a href="https://github.com/codestun/FlickPick-React-client" target="_blank">See project on GitHub</a>
</div>
</div>
<div class="grid__item">
<h2>FlickPick (Angular)</h2>
<!-- <img src="img/flickpick-angular.jpg" alt="FlickPick-Angular Screenshot" class="project-screenshot"> -->
<img src="img/fp-angular-movies.png" alt="FlickPick-Angular Screenshot" class="project-screenshot">
<img src="img/fp-angular-profile.png" alt="FlickPick-Angular Screenshot" class="project-screenshot">
<img src="img/fp-angular-dialog.png" alt="FlickPick-Angular Screenshot" class="project-screenshot">
<p>
Welcome to FlickPick, a single-page, responsive movie app built with Angular Typescript. This client-side
interface
complements the existing server-side code, the <a href="https://github.com/codestun/FlickPick-API"
target="_blank">REST API and database</a>. FlickPick offers users access to a wide
array of information about movies, directors, and genres, and allows for personalized profile management.
</p>
<div class="link-container">
<a href="https://codestun.github.io/FlickPick-Angular-client/" target="_blank">Live Demo</a><br>
<a href="https://github.com/codestun/FlickPick-Angular-client" target="_blank">See project on GitHub</a>
</div>
</div>
<div class="grid__item">
<h2>Event Explorer</h2>
<img src="img/event-explorer.jpg" alt="Event Explorer App Screenshot" class="project-screenshot">
<p>
The Event Explorer is a serverless, progressive web application designed to enhance the event discovery
experience. Built using React and following test-driven development principles, this application allows users
to explore a variety of events using the Google Calendar API. Key features include event filtering by city,
offline functionality, and interactive data visualization. This project showcases advanced concepts like
serverless functions (AWS Lambda) and OAuth2 authentication, highlighting my skills in modern web app
development.
</p>
<div class="link-container">
<a href="https://codestun.github.io/event-explorer/" target="_blank">Live Demo</a><br>
<a href="https://github.com/codestun/event-explorer/" target="_blank">See project on GitHub</a>
</div>
</div>
<div class="grid__item">
<h2>Pokédex</h2>
<img src="img/pokedex.jpg" alt="Pokedex-App Screenshot" class="project-screenshot">
<img src="img/pokedex-dialog.jpg" alt="Pokedex-App Screenshot" class="project-screenshot">
<p>
This project is a Pokedex App that displays a list of Pokémon and their details using the PokéAPI.
The app is built using HTML, CSS, and JavaScript, and it utilizes the Bootstrap framework for styling and
responsiveness.
</p>
<div class="link-container">
<a href="https://codestun.github.io/pokedex-app/" target="_blank">Live Demo</a><br>
<a href="https://github.com/codestun/pokedex-app/" target="_blank">See project on GitHub</a>
</div>
</div>
<div class="grid__item">
<h2>Chat App</h2>
<video width="320" height="auto" controls>
<source src="video/chat-app.MP4" type="video/mp4" alt="Chat App Recording">
Your browser does not support the video tag.
</video>
<p>
This project is a chat application designed for mobile phones, built using React Native, which means it works
on both Android and iOS. The app lets users chat, share photos, their location, and audio recordings.
It was built using Google Firestore Database with Firebase Authentication, Expo and with React Native and its
GiftedChat Library.
</p>
<div class="link-container">
<a href="https://github.com/codestun/chat-app" target="_blank">See project on GitHub</a>
</div>
</div>
<div class="grid__item">
<h2>Let's Build Something Great Together</h2>
<img src="img/custom-project.png" alt="new project image" class="project-screenshot">
<p>
Ready to transform your vision into reality? I specialize in developing custom web and mobile solutions,
eagerly anticipating the next challenge. Drawing from a rich palette of technologies, I craft seamless digital
experiences that resonate with users. Let's collaborate to turn your innovative ideas into impactful
solutions.
</p>
<div class="link-container">
<a href="contact.html" role="menuitem" class="navigation-list__item">Contact Me</a>
</div>
</div>
</div>
</main>
<!-- Footer with links to social media profiles -->
<footer class="page-footer">
<div class="social-media">
<p>Find me on</p>
<a href="https://github.com/codestun" target="_blank"><img src="img/github-logo.svg" alt="Github"></a>
<a href="https://www.linkedin.com/in/dörthe-kosicki/" target="_blank"><img src="img/linkedin-logo.svg"
alt="LinkedIn"></a>
</div>
</footer>
<script src="js/main.js"> </script>
<script src="js/tota11y.min.js"></script>
</body>
</html>