-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
129 lines (123 loc) · 12.3 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta property="og:image" content="https://kainoa.ca/public/logo.png" />
<meta property="og:title" content="A Software Development Portfolio" />
<meta property="og:description" content="Hey I'm Kainoa 👋🏻 I work as a full stack developer in British Columbia, Canada. Check out my socials and some of my professional works." />
<title>Kainoa Seaman</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Belleza&family=Cardo:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> </head>
<body class="d-flex bg-dark">
<div class="body-container d-flex w-100 mx-auto flex-column">
<header class="mb-auto">
<div class="navbar fixed-top pt-2 px-4 d-flex justify-content-between flex-sm-row
flex-column bg-dark">
<h3 class="mb-0 logo justify-content-center align-self-center">Ks.</h3>
<nav class="nav nav-masthead justify-content-center">
<a class="nav-link fw-bold py-1 px-0 active" aria-current="page" href="#home">Home</a>
<a class="nav-link fw-bold py-1 px-0" href="#about">About</a>
<a class="nav-link fw-bold py-1 px-0" href="#testimonials">Testimonials</a>
<a class="nav-link fw-bold py-1 px-0" href="#contact">Contact</a>
</nav>
</div>
</header>
<main class="d-flex px-5 flex-column">
<div id="home" class="d-flex flex-column">
<img class="rounded-circle align-self-center my-3" id="portrait-placeholder" src="public/portrait-placeholder.jpg">
<h3 class="text-center mb-1 title" id="name"><span>K</span>AINOA <span>S</span>EAMAN</h1>
<p class="lead text-center">Kainoa embodies grit, creative problem-solving, and emotional intelligence in personal and professional contexts. He's a versatile full-stack developer, with secondary expertise in Azure cloud, quality assurance, and technical writing. He's a knowledge seeker and avid learner.</p>
<p class="lead text-center mb-2">Check out his github portfolio, visit his social pages, or contact using the icons below 👇🏼</p>
<div class="icons-container mb-5 d-flex justify-content-center bg-dark py-2">
<a href="https://www.linkedin.com/in/kainoa-seaman/">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-linkedin mx-2" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/>
</svg>
</a>
<a href="https://github.com/compSciKai/">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-github mx-2" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
</svg>
</a>
<a href="tel:6048032990">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-phone mx-2" viewBox="0 0 16 16">
<path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
<path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/>
</svg>
</a>
<a href="mailto:kaigra@icloud.com">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-envelope-at mx-2" viewBox="0 0 16 16">
<path d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2zm3.708 6.208L1 11.105V5.383zM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2z"/>
<path d="M14.247 14.269c1.01 0 1.587-.857 1.587-2.025v-.21C15.834 10.43 14.64 9 12.52 9h-.035C10.42 9 9 10.36 9 12.432v.214C9 14.82 10.438 16 12.358 16h.044c.594 0 1.018-.074 1.237-.175v-.73c-.245.11-.673.18-1.18.18h-.044c-1.334 0-2.571-.788-2.571-2.655v-.157c0-1.657 1.058-2.724 2.64-2.724h.04c1.535 0 2.484 1.05 2.484 2.326v.118c0 .975-.324 1.39-.639 1.39-.232 0-.41-.148-.41-.42v-2.19h-.906v.569h-.03c-.084-.298-.368-.63-.954-.63-.778 0-1.259.555-1.259 1.4v.528c0 .892.49 1.434 1.26 1.434.471 0 .896-.227 1.014-.643h.043c.118.42.617.648 1.12.648m-2.453-1.588v-.227c0-.546.227-.791.573-.791.297 0 .572.192.572.708v.367c0 .573-.253.744-.564.744-.354 0-.581-.215-.581-.8Z"/>
</svg>
</a>
<a href="https://www.facebook.com/kainoa.seaman">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-facebook mx-2" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/>
</svg>
</a>
<a href="https://wa.me/16048032990">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-whatsapp mx-2" viewBox="0 0 16 16">
<path d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232"/>
</svg>
</a>
</div>
</div>
<div class="mb-5">
<h4 class="title" id="about"><span>A</span>BOUT</h4>
<p class="">Kainoa specializes in designing user interfaces in the React framework, implementing robust frontend codebases with Typescript, and scalable backend applications in Node.js, and .NET.</p>
<p>In March 2024, Kainoa exited an exciting role with Collabware, where he gained a range of technical skills. He wore many hats, gaining knowledge as a technical writer, QA engineer, frontend engineer, and backend engineer. Armed with his skillset, he's excited for a new chapter.</p>
<p>Currently, he's been refining his technical skills with a full-stack bootcamp from Udemy, discovering nuances and new trends. Following studies will focus on the .NET framework, for a more specialized skillset.</p>
<p>Outside of his professional life, Kainoa focuses on his family: his partner, his one year old boy, and two year old pup.</p>
</div>
<div class="testimonials mb-5">
<h4 class="title" id="testimonials"><span>T</span>ESTIMONIALS</h4>
<p>Here is a couple instances of positive and anonymous feedback I've received from my professional life.</p>
<figure>
<p>"Kainoa excels in seeking clarification when faced with uncertainty. Instead of passively avoiding the unknown, he actively engages in the learning process by proactively asking pertinent questions. His testing approach is characterized by thoroughness, consistently revealing additional issues or bugs that may have been overlooked by the testing suite or were not initially considered by the team. Kainoa's commitment to going above and beyond in both learning and testing contributes significantly to the overall quality of our work."</p>
<figcaption class="blockquote-footer">
Co-worker at <cite title="Source Title">Collabware</cite>
</figcaption>
</figure>
<figure>
<p>"Kainoa is really good at following through with the requirements he is given when it comes to his work. He is fully committed to making sure that each requirement is met and takes the required time and care that the issues need to make sure that they are carried out properly. Kainoa has a really vast knowledge of the system..."</p>
<figcaption class="blockquote-footer">
Co-worker at <cite title="Source Title">Collabware</cite>
</figcaption>
</figure>
<figure>
<p>"Kainoa is a diligent worker that can context switch where needed, he really is a swiss army knife of a player for the company. I really enjoy working with him as he has a great eye for detail and bouncing ideas off him is beneficial and seamless"</p>
<figcaption class="blockquote-footer">
Co-worker at <cite title="Source Title">Collabware</cite>
</figcaption>
</figure>
<figure>
<p>"Kainoa is a great team player. No matter the task, he is always there to offer support in any way he can. He is very vocal in his opinions and contributes lots to group discussions..."</p>
<figcaption class="blockquote-footer">
Co-worker at <cite title="Source Title">Collabware</cite>
</figcaption>
</figure>
<figure>
<p>"Kainoa is one of the most personable/approachable people that I have met in Collabware. He is a very easy person to talk to and find mutual ground on almost any topic."</p>
<figcaption class="blockquote-footer">
Co-worker at <cite title="Source Title">Collabware</cite>
</figcaption>
</figure>
</div>
<div class="text-center">
<h4 class="title" id="contact"><span>C</span>ONTACT</h4>
<p class="mb-1"><span class="contact title">Phone </span><a class="text-decoration-none text-white-50" href="tel:6048032990">604-803-2990</a></p>
<p><span class="contact title text-decoration-none">Email </span><a id="email" class="text-decoration-none" href="mailto:kaigra@icloud.com">kaigra@icloud.com</a></p>
</div>
</main>
<footer class="mt-auto text-white-50">
<p class="py-1 mt-4 text-center"><small>Inspired by the Bootstrap <a class="text-decoration-none text-white-50" href="https://getbootstrap.com/docs/5.3/examples/cover/#">Cover example</a></small></p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>