-
Notifications
You must be signed in to change notification settings - Fork 0
/
work.html
154 lines (143 loc) · 9.4 KB
/
work.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jolanda Tinge - Portfolio</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon-eiger-16x16.png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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=Lora&family=Montserrat:wght@500;700&display=swap" rel="stylesheet">
<!-- <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet"> -->
<!-- <link href="https://fonts.googleapis.com/css?family=Rajdhani&display=swap" rel="stylesheet"> -->
<link rel="stylesheet" type="text/css" href="css/style.production.css">
</head>
<body class="body body__work">
<header class="page-header">
<nav class="navbar fixed-top navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html"><img src="img/Logo_eigerjt.svg" height="30" class="d-inline-block align-top" alt="Personal logo of Jolanda Tinge" id="logo_Jol" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="navbar-nav">
<a class="nav-item nav-link" href="index.html">Home</a>
<a class="nav-item nav-link active text-primary" href="work.html">Portfolio<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="blog.html">Blog</a>
<a class="nav-item nav-link" href="about.html">About</a>
<a class="nav-item nav-link" href="contact.html">Contact</a>
</div>
</div>
</nav>
</header>
<!-- Main content -->
<section class="work">
<h1>Port<span class="text-outline">folio</span></h1>
<hr>
<br>
<div class="grid">
<!-- Grid items will live here -->
<div class="grid__item">
<div class="project-card">
<a href="https://joolanda.github.io/meet" target="_blank"><img class="screenshot" src="img/meet.png" width="400px" alt="A screenshot of chat apps pages"></a>
<h2>Meet App</h2>
<br>
<p>This is a serverless, progressive web app (React PWA) that uses Google Calender API. It fetches events so users can view a list of upcoming events. Users are able to sign in with their Google account and access the app offline. Practising with different ways of testing, including aspects of Test-Driven Development and Behavior-Driven Development.
</p>
<div>technologies used: React, AWS Lambda, Puppeteer</div>
<a href="https://github.com/Joolanda/meet.git" class="body-text__item" target="_blank">See on GitHub</a><br>
<a href="https://joolanda.github.io/meet" target="_blank"class="body-text__item">Live demo</a>
</div>
</div>
<div class="grid__item">
<div class="project-card">
<a href="https://github.com/Joolanda/MyFlix-Movie-app.git" target="_blank"><img class="screenshot" src="img/movie_square.png" width="400px" alt="A screenshot of chat apps pages"> </a>
<h2>MyFlix Movie app + database</h2>
<p>
Full stack web app that allows users to sign in and create a list of their favorite movies. MyFlix consists of well designed REST API that interacts with a MongoDB database. Developed with the MERN stack. The server side of the app processes user requests & performs operations against the data stored in the database.
</p>
<div>technologies used: MongoDB, Express.js, React, Node.js, and Redux.</div>
<a href="https://github.com/Joolanda/MyFlix-Movie-app.git" class="body-text__item" target="_blank">See on GitHub
</a></br>
<a href="casestudies/case_myflix.html" class="body-text__item" target="_blank">Case study</a>
</div>
</div>
<div class="grid__item">
<div class="project-card">
<a href="https://github.com/Joolanda/chat-app" target="_blank"><img class="screenshot" src="img/chat_testing.png" width="400px" alt="A screenshot of chat apps pages"> </a>
<h2>Chat App</h2>
<p>
My last achievement of the Full Stack Web Development Course is to build a mobile Chat App using React Native, Expo and Google Forestore Db. Besides a chat interface, users should also have the possibility to share images and their location. We are using this Kanban Board to visualize and optimize our workflow. It will contain the user stories, story points (f.e. Fibonacci-like format: 1, 2, 3, 5, 8, ...), and other handoff deliverables.<br>
</p>
<a href="https://github.com/Joolanda/chattown" class="body-text__item" target="_blank">See on GitHub</a><br>
<a href="https://github.com/Joolanda/chat-app" target="_blank"class="body-text__item">Live demo</a><br>
</div>
</div>
<div class="grid__item">
<div class="project-card">
<a href="https://joolanda.github.io/website-portfolio" target="_blank"><img class="screenshot" src="img/contact_square.png" width="400px" alt="A screenshot of Jolanda Tinges portfoliosite"> </a>
<h2>Portfolio Website</h2>
<br>
<p>
This responsive website is presenting my portfolio as a web developer. It was my first project on CareerFoundry Web developer Course and will be continuously updated. It's created in HTML & CSS from scratch with no framework used. It is fully responsive & contains CSS flexbox, grid, transitions, animations.
</p>
<div>technologies used: HTML, CSS, Bootstrap</div>
<a href="https://github.com/Joolanda/website-portfolio.git" class="body-text__item">See on GitHub</a><br>
<a href="https://joolanda.github.io/website-portfolio/" class="body-text__item" target="_blank">Live demo</a><br>
</div>
</div>
<div class="grid__item">
<div class="project-card">
<a href="https://joolanda.github.io/Pokedoki" target="_blank"><img class="screenshot" src="img/pokedoki.png" width="300px" alt="A screenshot of simple JS-app"> </a>
<h2>Pokédex app</h2>
<p>
This javascript app is a small web application with HTML, CSS, and JavaScript that loads data from an external API and enables the viewing of more details for a given list item (like a Pokémon) on demand when clicking on a list item. One verion using jQuery library and another version using Bootstrap.
</p>
<a href="https://github.com/Joolanda/Pokedoki.git" class="body-text__item">See on GitHub</a><br>
<a href="https://joolanda.github.io/Pokedoki" class="body-text__item" target="_blank">Live demo</a><br>
</div>
</div>
</section>
<!-- <section class="profile">
<h2>small<span class="text-outline">projects</span></h2>
<div class="project-sm-card">
<h3>My awesome quiz app</h3>
<p>
A basic quiz app using Angular and TypeScript
</p>
<a href="https://joolanda.github.io/my-awesome-quiz-app" target="_blank">Live demo</a>
</div>
</div>
<div class="project-sm-card">
<h3>To Do List</h3>
<p>
Simple to-do app, to learn the core concepts of Vue JS. Only with the use of Vue Material and CSS. Making your own To-Do list by adding, deleting and editing tasks.<br>
</p>
<a href="https://joolanda.github.io/To-Do-App" target="_blank">Live demo</a>
</div>
<br> -->
<footer class="page-footer">
<hr>
<div class="transition">
<a href="https://jolandatinge.de/">©2021 Jolanda Tinge </a>
<a href="https://jolandatinge.de/impressum.html"> Impressum </a>
</div>
<div class="social-media">
<div class="social-media">
<a href="https://github.com/Joolanda" target="_blank"><img src="img/github_313107.svg" alt="github lgo"></a>
<a href="https://twitter.com/701anda" target="_blank"><img src="img/Twitter_UI-01_2310223.svg" alt="Twitter"></a>
<a href="https://www.linkedin.com/in/jolanda-tinge" target="_blank"><img src="img/linkedin_jolt.svg" alt="LinkedIn"></a>
<a href="https://medium.com/@jolanda.tinge" target="_blank"><img src="img/medium_jolt.svg" alt="Medium"></a>
<!-- <a href="https://www.instagram.com/karlo_the_labradorable/" target="_blank"><img src="img/instagram_115703.svg" alt="Instagram"></a> -->
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="js/tota11y.min.js"></script>
</body>
</html>