-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathabout.html
More file actions
92 lines (84 loc) · 5.34 KB
/
about.html
File metadata and controls
92 lines (84 loc) · 5.34 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello, I'm John.</title>
<link rel="icon" href="imgs/favicon.svg">
<meta property="og:title" content="Rare Drop">
<meta name="description" content="A programmer who thrives in collaborative and innovative spaces. Building human-centric tools, inspiring people, and bringing impactful ideas to life.">
<meta property="og:description" content="A programmer who thrives in collaborative and innovative spaces. Building human-centric tools, inspiring people, and bringing impactful ideas to life.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://raw.githubusercontent.com/RareDrops/RareDrops.github.io/refs/heads/main/imgs/raredrop_opengraph.png">
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <!-- icon import: https://fontawesome.com/search -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
</head>
<body class="main-content">
<div class="navbar">
<nav>
<ul>
<li><a href="" class="control control-1 active-btn no-underline" data-id="home">RAREDRP</a></li>
<li class="show-on-mobile" onclick=toggleSidebar()><i class="fa-solid fa-bars" style="padding: 18px; cursor: pointer; margin-right: 5vw;"></i></li>
<li class="hide-on-mobile"><a href="index.html" class="control control-2" data-id="home">Home</a></li>
<li class="hide-on-mobile"><a href="index.html#portfolio" class="control control-3" data-id="portfolio">Portfolio</a></li>
<li class="hide-on-mobile"><a href="#about" class="control control-4" data-id="about">About</a></li>
<li class="hide-on-mobile"><a href="#contact" class="control control-5" data-id="contact">Contact</a></li>
</ul>
</nav>
<ul class="sidebar">
<li><a href="index.html" class="control" data-id="home">Home</a></li>
<li><a href="index.html#portfolio" class="control" data-id="portfolio">Portfolio</a></li>
<li><a href="about.html" class="control" data-id="about">About</a></li>
<li><a href="#contact" class="control" data-id="contact">Contact</a></li>
</ul>
</div>
<main>
<section class="section" id = "about">
<div class="div-block-centered">
<div class="fade-in" style="animation-delay: 0.75s;">
<h1 class="heading-4">Welcome to my tiny <br> corner of the internet.</h1>
<img class="image-1" src="imgs/20250105_184202_cropped.jpg" width="920" sizes="(max-width: 991px) 90vw, 50vw" alt="Me at Mission Bay, Auckland." loading="lazy">
</div>
<div class="about-text fade-in-up" style="animation-delay: 1.75s;">
At the end of 8th grade when my teacher asked us to write down our future aspirations in the yearbook, I wrote that I wanted to become a software developer. While I had no idea at the time, I now know that being a developer means thinking outside the frame. It means asking the right questions, developing a critical & thoughtful process, implementing an idea with strong craft — and above all else, advocating for collaboration.
<br>
<br>
What excites me about developing/designing applications is being able to work at the crossroads of design, technology, business, & psychology. What inspires me about developing applications is being able to blend creativity with problem-solving, crafting solutions that are not only functional but also deeply intuitive and impactful.
<br>
<br>
When I'm not coding in Visual Studio Code, I'm probably chilling at home listening to music or playing games. When I'm not online, I'm probably engaging in fruitful activies and conversations, finding inspiration and motivation, inching through my bookshelf, or taking a nap.
<br>
<br>
<div class="middle-container">
<span class="middle-text margin-bottom-1 margin-top-1">- John</span>
</div>
</div>
</div>
</section>
<section class="section contact" id = "contact">
<div class = "footnote-block div-block-2">
<div class="divider-2"></div>
<div class="text-span-6 more-padding heading-2">Have a question, some feedback, or an idea? Please, please send it my way.</div>
<div class="text-block-1">
<a href="mailto:droprares@gmail.com" target="_blank" class="footer-links">→ Email</a>
<a href="https://github.com/RareDrops" target="_blank" class="footer-links">→ GitHub</a>
<a href="https://www.linkedin.com" target="_blank" class="footer-links">→ LinkedIn</a>
<a target="_blank" class="footer-links" onclick=discordpopup()>→ Discord</a>
<script type="text/javascript">
function discordpopup(){
alert("Discord ID: raredrop");
}
</script>
</div>
</div>
</section>
</main>
<script defer src="app.js"></script>
</body>
</html>