-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
112 lines (87 loc) · 5.01 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home | Karl Alberto's Portfolio</title>
<link rel="icon" type="image/png" href="assets/karlFavicon.png" />
<!-- Using sha256, sha384 and sha512 SRI -->
<link href="./index-style.css" rel="stylesheet" integrity="sha256-oQN5etB47lxNCnCjP35Ft5HKrod4DzMukOHQsnlaD4Y= sha384-DPB/Ry+ySyEGXnjFw+c2K26FeImkBP0I92CbabnzfbaJNoqQ0SCPVB48d8edyu2e sha512-nB4r0rYWOqEKzaJ8iloiJb7s47qxf+kkzdQTAleb+UU+xUrM/zdX03wotCtIRf359Eoe+7RRVyOtRUGDGIrn4Q==" crossorigin="anonymous" />
<!-- Using Google webfonts for compatibility -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Play&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<!-- id's were mostly pre-emptively added to sections I felt would need styling -->
<img id="header-logo" type="image/png" src="assets/karlLogo.png" alt="Origami logo" height="50px" />
<h1>Karl Alberto</h1>
<nav id="main-nav">
<ul>
<li>Home</li>
<li><a href="work.html">Work</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<!-- id's are named similarly within defined sections -->
<section id="about">
<div id="about-pic">
<img src="assets/karlSquidward.jpg" type="image/jpg" alt="Karl with Squidward" height="300px" />
</div>
<div id="about-me">
<h2>About Me</h2>
<p>
Hi, I'm Karl. I have a background in Marketing and Advertising, as well as Customer Service and Community Management. I'm now taking on a new challenge: diving into Web Development, Cloud, and Cybersecurity!
</p>
</div>
</section>
<!-- Images to be removed in smaller screen breakpoints have extra id -->
<section id="interests">
<div id="interest-pic">
<img src="assets/porgKarl.jpg" type="image/jpg" alt="Karl in a Porg costume" />
<img class="cull-img" src="assets/origamiSquare.jpg" type="image/jpg" alt="Orizuru - origami cranes folded by Karl" />
<img src="assets/keyboardSwitches.jpg" type="image/jpg" alt="A selection of mechanical keyboard switches" />
<img class="cull-img" src="assets/afternoonTea.jpg" type="image/jpg" alt="Cappucino and banana bread" />
<img src="assets/pika3D.jpg" type="image/jpg" alt="Surprised pikachu 3D printing" />
</div>
<p>
My interests are varied, to the point of being ecclectic. You can find me nose deep reading up on anything: from video games to deep sea exploration; Formula 1 to tiny homes; mechanical keyboards to Roman antiquity - and this barely scratches the surface!
</p>
<p> While I do research into <em>too many</em> things, my main passions right now include:
<ul id="interest-list">
<!-- Shameless plug for my family's cosplay account -->
<li><a href="https://www.instagram.com/adorable.cosplay/" target="_blank">Cosplay</a> (mostly production, but I will put on an outfit with the fam)</li>
<li>Origami</li>
<li>Custom mechanical keyboards</li>
<li>Coffee</li>
<li>3D printing</li>
</ul>
</p>
</section>
<section id="persona">
<p>
I'm generally soft-spoken and introverted in real life, but put me on digital platform, and I can get fairly chatty. If you do see me out and about though, you can talk to me - I'm shy, but not completely anti-social <em>(I think)</em>.
</p>
<p id="closing">
Life is currently a balancing act between study and parenthood, but I'm keen to get back into the office life once I've acquired some more skills. Keep an eye out for my resume in your inbox soon!
</p>
</section>
<!-- Might add other pages in the future. Considering adding site logos, especially for smaller screens -->
<footer>
<nav id="socials">
<ul>
<li><a href="https://www.linkedin.com/in/karl-francis-alberto" target="_blank">LinkedIn</a></li>
<li><a href="https://twitter.com/Kei_Eff" target="_blank">Twitter</a></li>
<li><a href="https://stackoverflow.com/users/15528466/kei" target="_blank">Stackoverflow</a></li>
<li><a href="https://github.com/Kei-Eff" target="_blank">Github</a></li>
</ul>
</nav>
<div>
<span>Design by Karl Alberto | Copyright © 2021 | <a href="sitemap.xml">Sitemap</a></span>
</div>
</footer>
</body>
</html>