-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (89 loc) · 4.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Edwin Otten</title>
<meta name="description" content="Edwin is an Azure Cloud specialist based in based in the Netherlands with over 10 years of experience developing full-stack web applications.">
<meta name="author" content="Edwin Otten">
<link rel="canonical" href="https://edwinotten.com/">
<!-- Styling -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" media="print" onload="this.media='all'; this.onload=null;">
<!-- Colors -->
<style>
.btn-linkedin {
--bs-btn-bg: #0a66c2;
--bs-btn-border-color: #0a66c2;
--bs-btn-hover-bg: #004182;
--bs-btn-hover-border-color: #004182;
--bs-btn-color: #fff;
--bs-btn-hover-color: #fff;
--bs-btn-active-color: #fff;
--bs-btn-disabled-color: #fff;
}
.btn-github {
--bs-btn-bg: #1B1F22;
--bs-btn-border-color: #1B1F22;
--bs-btn-hover-bg: #060606;
--bs-btn-hover-border-color: #060606;
--bs-btn-color: #fff;
--bs-btn-hover-color: #fff;
--bs-btn-active-color: #fff;
--bs-btn-disabled-color: #fff;
}
.btn-primary {
--bs-btn-bg: #6610f2;
--bs-btn-border-color: #6610f2;
--bs-btn-hover-bg: #3d0a91;
--bs-btn-hover-border-color: #3d0a91;
}
:root {
--bs-emphasis-color: #3d0a91;
}
</style>
<!-- Favicons -->
<meta name="theme-color" content="#712cf9">
<!-- Lazy load bootstrap icons -->
<link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"></noscript>
</head>
<body>
<main class="bg-dark-subtle overflow-auto">
<h1 class="visually-hidden">Edwin Otten</h1>
<div class="container-fluid bg-light shadow mb-4">
<div class="container col-xxl-8 px-4 py-1 py-m-5">
<div class="row flex-md-row-reverse justify-content-center align-items-center g-5 py-5">
<div class="col-10 col-sm-8 col-md-6 col-lg-4">
<img src="./portrait-edwin-otten.webp" class="d-block mx-lg-auto img-fluid rounded" alt="Portrait photo of Edwin Otten" width="400" height="400" loading="eager">
</div>
<div class="col-12 col-md-6">
<p class="display-5 fw-bold text-body-emphasis lh-1 mb-3">Hi there!</p>
<p class="lead">I'm Edwin Otten. I'm an Azure Cloud specialist based in based in the Netherlands with over 10 years of experience developing full-stack web applications.</p>
<p>I started my career in web & mobile app development, and shifted my attention to Azure Cloud in early 2018. I've been hooked on Azure ever since. Helping customers bring their applications to the cloud and developing cloud-native (serverless) solutions. I'm continuously learning new things and automate my work as much as possible (CI/CD, test automation, code analysis, Infrastructure-as-Code, and RBAC assignments).</p>
</div>
</div>
</div>
</div>
<div class="container-fluid bg-dark-subtle">
<div class="container col-xl-8 pt-5 pb-5">
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg bg-light mb-5">
<div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
<h2 class="fw-bold lh-1">Find me online</h2>
<p>On LinkedIn you'll find my most recent resume. On Medium I post articles that are hands-on and help solve technical challenges. You can also check out my GitHub profile to see the open source projects I work on in my spare time.</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start my-4 mb-lg-3">
<a type="button" class="btn btn-linkedin btn-lg px-4" href="https://nl.linkedin.com/in/ottenedwin">LinkedIn <i class="bi-linkedin ms-1"></i></a>
<a type="button" class="btn btn-dark btn-lg px-4" href="https://medium.com/@otten.nl">Medium <i class="bi-medium ms-1"></i></a>
<a type="button" class="btn btn-github btn-lg px-4" href="https://github.com/EdwinOtten">GitHub <i class="bi-github ms-1"></i></a>
</div>
</div>
<div class="col-lg-4 offset-lg-1 p-0 overflow-hidden">
<img src="./sportlink_to_mailchimp_screenshot.webp" alt="Screenshot of the sportlink_to_mailchimp application" width="675" height="445" loading="lazy">
</div>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous" defer></script>
</body>
</html>