-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
151 lines (136 loc) · 6.71 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="dark">
<meta name="description" content="An undergraduate student who wants to become better Software Engineer" />
<meta name="keywords" content="Thisitha Wickramarachchi, Thisitha Wickramaarachchi, Thizh Wick" />
<meta name="google-site-verification" content="8ttwbOKq9eFt6en9DZ38XdbdQXeyiZ5-RejtDOpqX8U" />
<link rel="icon" type="image/x-icon" href="/assets/T.ico">
<meta property="og:title" content="Thisitha Wickramarachchi" />
<meta property="og:description" content="An undergraduate student who wants to become better Software Engineer" />
<title>Thisitha Wickramarachchi (Thizh Wick)</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Gluten&effect=fire-animation">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/mouse2.css">
<link rel="stylesheet" href="./styles/mobile-styles.css">
<link rel="stylesheet" href="./styles/desktop-styles.css">
<script>
function isDesktopMode() {
return window.innerWidth > 767;
}
function showOverlayThizh() {
if (isDesktopMode()) {
document.getElementById("overlay-me").style.display = "block";
}
}
function closeOverlayThizh() {
if (isDesktopMode()) {
document.getElementById("overlay-me").style.display = "none";
}
}
function showOverlayCV() {
if (isDesktopMode()) {
var overlayCV = document.getElementById("overlay-cv");
if (overlayCV.style.display === "block") {
overlayCV.style.display = "none";
} else {
overlayCV.style.display = "block";
}
}
}
window.onclick = function (event) {
var myBox = document.getElementById('overlay-cv');
if (isDesktopMode() && event.target.contains(myBox) && event.target !== myBox) {
myBox.style.display = 'none';
}
}
window.onscroll = function () {
if (isDesktopMode()) {
var overlay = document.getElementById("overlay-me");
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
overlay.style.display = "block";
} else {
overlay.style.display = "none";
}
}
};
</script>
</head>
<body>
<html>
</body>
<div>
<div class="wrapper">
<div class="navbar">
<nav>
<ul>
<li><a href="https://linktr.ee/thizh" style="cursor: pointer;" id="resume">linktree</a></li>
<li onclick="showOverlayCV()" style="cursor: pointer;" id="resume">résumé</a></li>
</ul>
</nav>
</div>
<div class="row">
<div class="col">
<h1 class="name">Thisitha Wickramaarachchi</h1>
<p style="font-size: 20px;">AKA <span style="font-family: 'Gluten'; font-size: 30px;"
class="font-effect-fire-animation">Thizh Wick</span></p>
<div style="flex-direction: row;">
<button type="button" onclick="showOverlayThizh()" class="thizh">Who Tf is Thizh?</button>
<button type="button" class="resume-btn">résumé</button></a>
</div>
</div>
<div class="col">
<div class="container">
<div class="hero-circle">
<div class="hero-rotate" id="circle">
<div class="social">
<a href="https://github.com/Thizh" aria-label="my github"><img src="./assets/github.png"
alt="my github" /></a>
</div>
<div class="social">
<a href="https://discordapp.com/users/926325270133227600" aria-label="my discord"><img
src="./assets/discord.png" alt="my discord" /></a>
</div>
<div class="social">
<a href="https://www.linkedin.com/in/thizh" aria-label="my linkedin"><img
src="./assets/linkedin.png" alt="my linkedin" /></a>
</div>
<div class="social">
<a href="mailto:[email protected]" aria-label="my mail"><img src="./assets/gmail.png"
alt="my mail" /></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h1 id="topic1">Who Am I?</h1>
<div id="overlay-me">
<div id="close-button" onclick="closeOverlayThizh()">X</div>
<div id="overlay-content">
<p class="paragraphs"><span class="greet">Greetings!</span> I am a passionate and dedicated software
engineering undergraduate at the prestigious Open University of Sri Lanka. My journey into the world of
technology and programming has been a thrilling adventure.</p><br /><br />
<p class="paragraphs">As a student with a relentless curiosity and a hunger for knowledge, I've immersed
myself in the ever-evolving field of programming. Through my academic pursuits and personal projects,
I've honed my skills and embraced the art of problem-solving. My journey is fueled by a desire to create
innovative solutions and to explore the limitless possibilities of code.</p><br /><br />
<p class="paragraphs">My commitment to excellence is reflected in my dedication to mastering various
programming languages, software development methodologies, and emerging technologies. I relish the
challenges that programming presents and thrive in the pursuit of elegant, efficient, and creative
solutions.</p><br /><br />
</div>
</div>
<h1 id="topic1">résumé?</h1>
<iframe id="overlay-cv" src="https://drive.google.com/file/d/1yQf6nd9f4X5jJhW8ZDIYBy9-Fl4wko1s/preview">
</iframe>
<canvas></canvas>
</body>
</html>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js'></script>
<script src='https://unpkg.com/[email protected]/dist/webgl-fluid.umd.min.js'></script>
<script src="./script.js"></script>
</html>