-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
170 lines (132 loc) · 9.76 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/rayson_logo.jpg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rayson Yeap</title>
</head>
<body class="light-theme">
<div class="experience">
<canvas class="experience-canvas"></canvas>
</div>
<div class="preloader">
<div class="preloader-wrapper">
<div class="loading">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
<div>Inspired By Boko33</div>
<div class="page" asscroll-container>
<div class="toggle-bar">
<div class="navbar">
<a class="navbar-item" href="#about">About Me</a>
<a class="navbar-item" href="#work">My Work</a>
<a class="navbar-item" href="#contact">Contact Me</a>
</div>
<div class="sun-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path fill='currentColor' d="M480 696q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280 576q0-83 58.5-141.5T480 376q83 0 141.5 58.5T680 576q0 83-58.5 141.5T480 776ZM80 616q-17 0-28.5-11.5T40 576q0-17 11.5-28.5T80 536h80q17 0 28.5 11.5T200 576q0 17-11.5 28.5T160 616H80Zm720 0q-17 0-28.5-11.5T760 576q0-17 11.5-28.5T800 536h80q17 0 28.5 11.5T920 576q0 17-11.5 28.5T880 616h-80ZM480 296q-17 0-28.5-11.5T440 256v-80q0-17 11.5-28.5T480 136q17 0 28.5 11.5T520 176v80q0 17-11.5 28.5T480 296Zm0 720q-17 0-28.5-11.5T440 976v-80q0-17 11.5-28.5T480 856q17 0 28.5 11.5T520 896v80q0 17-11.5 28.5T480 1016ZM226 378l-43-42q-12-11-11.5-28t11.5-29q12-12 29-12t28 12l42 43q11 12 11 28t-11 28q-11 12-27.5 11.5T226 378Zm494 495-42-43q-11-12-11-28.5t11-27.5q11-12 27.5-11.5T734 774l43 42q12 11 11.5 28T777 873q-12 12-29 12t-28-12Zm-42-495q-12-11-11.5-27.5T678 322l42-43q11-12 28-11.5t29 11.5q12 12 12 29t-12 28l-43 42q-12 11-28 11t-28-11ZM183 873q-12-12-12-29t12-28l43-42q12-11 28.5-11t27.5 11q12 11 11.5 27.5T282 830l-42 43q-11 12-28 11.5T183 873Zm297-297Z"/></svg>
</div>
<button class="toggle-button">
<div class="toggle-circle"></div>
</button>
<div class="moon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path fill='currentColor' d="M480 936q-150 0-255-105T120 576q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444 396q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480 936Zm0-80q88 0 158-48.5T740 681q-20 5-40 8t-40 3q-123 0-209.5-86.5T364 396q0-20 3-40t8-40q-78 32-126.5 102T200 576q0 116 82 198t198 82Zm-10-270Z"/></svg>
</div>
</div>
<div class="page-wrapper" asscroll>
<section class="hero">
<div class="hero-wrapper">
<div class="intro-text">Welcome to my portfolio!</div>
<div class="expand-wrapper">
<!-- <div class="scroll">
</div> -->
<svg xmlns="http://www.w3.org/2000/svg" height="36" viewBox="0 -960 960 960" width="36s"><path fill="currentColor" d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"/></svg>
</div>
<div class="hero-main">
<h1 class="hero-main-title">Rayson Yeap</h1>
<p class="hero-main-subtitle">NUS Computer Science</p>
</div>
<div class="hero-second">
<p class="hero-second-subheading first-subheading">Rayson Yeap</p>
<p class="hero-second-subheading second-subheading">Portfolio</p>
</div>
</div>
</section>
<div class="first-move section-margin"></div>
<section class="first-section section left">
<div class="progress-wrapper progress-bar-wrapper-left">
<div class="progress-bar"></div>
</div>
<div id="about" class="section-intro-wrapper">
<h1 class="section-title">
<span class="section-title-text">About me</span>
<div class="section-title-decoration styleOne"></div>
<div class="section-title-decoration styleTwo"></div>
<div class="section-title-decoration styleThree"></div>
</h1>
<span class="section-number">01</span>
</div>
<div class="section-detail-wrapper">
<h3 class="section-heading">Hi! I'm Rayson</h3>
<p class="section-text">I'm currently a Year 2 student studying Computer Science at the National University of Singapore. As a a dedicated and ambitious computer science student at NUS. I am fascinated by the limitless possibilities that technology offers and constantly strive to expand my knowledge and skills in the field.</p>
<h3 class="section-heading">Education and Background</h3>
<p class="section-text">After taking up many modules in CS, I have developed a rigorous foundation in topics like programming, algorithms and data structures. I have a genuine passion for problem-solving and have developed a keen interest in Web3 technologies. I am excited and look forward to opportunities to hone my skills and enhance my understanding of the tech landscape.</p>
<h3 class="section-heading">Personal Interests and Hobbies</h3>
<p class="section-text">In my free time, I enjoy working on personal projects that I find an interest in. Currently, I am interested in web development and building applications that both function well and are aesthetically appealing. I also find enjoyment in playing games like Chess and musical instruments.</p>
</div>
</section>
<div class="second-move section-margin"></div>
<section class="second-section section right">
<div class="progress-wrapper progress-bar-wrapper-right">
<div class="progress-bar blue-background"></div>
</div>
<div id="work" class="section-intro-wrapper blue-border">
<h1 class="section-title blue-border blue-text">
<span class="section-title-text blue-text">My Work</span>
<div class="section-title-decoration styleOne blue-border"></div>
<div class="section-title-decoration styleTwo blue-border"></div>
<div class="section-title-decoration styleThree blue-background blue-border"></div>
</h1>
<span class="section-number blue-text">02</span>
</div>
<div class="section-detail-wrapper">
<h3 class="section-heading">Metaverse Mayhem</h3>
<p class="section-text">Designed a responsive full-stack web3 application using React, Node and Solidity
allowing users to collect cards as NFTs, trade cards between players and use such
cards in a turn-based strategy game. Awarded the Judge's Choice under NUS Orbital Programme <br /> <a href="https://metaverse-mayhem.vercel.app">Try it here!</a> <br /> <a href="https://metaverse-mayhem.onrender.com/">Backend!</a></p>
<h3 class="section-heading">3D Thrifting Marketplace</h3>
<p class="section-text">A Web Application that functions as a marketplace where thrifters can sell their clothes. Buyers can visualise listings on 3D models.</p>
<h3 class="section-heading">Coursework</h3>
<p class="section-text">In addition to my personal projects, I have also tackled many different academic assignments that have broadened my perspectives on different aspects of computer science. These have given me a solid foundation in areas like software development and data structures and strengthened my problem-solving skills.</p>
</div>
</section>
<div class="third-move section-margin"></div>
<section class="third-section section left">
<div class="progress-wrapper progress-bar-wrapper-left">
<div class="progress-bar green-background"></div>
</div>
<div id="contact" class="section-intro-wrapper green-border green-text">
<h1 class="section-title green-border green-text">
<span class="section-title-text green-text">Contact me</span>
<div class="section-title-decoration styleOne green-border"></div>
<div class="section-title-decoration styleTwo green-border"></div>
<div class="section-title-decoration styleThree green-background green-border"></div>
</h1>
<span class="section-number green-text">03</span>
</div>
<div class="section-detail-wrapper">
<h3 class="section-heading">Email and Phone</h3>
<p class="section-text">Feel free to get in touch with me via email at <b>yeaprayson@gmail.com</b> or <b>rayson.yeap@u.nus.edu</b>. If you prefer to have a conversation, you can reach me on <a href="https://t.me/respirayson">telegram</a>. I am excited to connect with like-minded individuals to discuss ideas and opportunities.</p>
<h3 class="section-heading">LinkedIn and GitHub</h3>
<p class="section-text">Stay connected with me on <a href="https://www.linkedin.com/in/rayson-yeap/?originalSubdomain=sg">LinkedIn</a>. You can also explore my <a href="https://github.com/respirayson">GitHub</a> profile to disccover my coding projects and contributions.</p>
</div>
</section>
</div>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>