-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
227 lines (216 loc) · 11.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
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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>
<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=Roboto+Flex:opsz,wdth,wght,GRAD@8..144,32,420,-40;8..144,40,400,0;8..144,100,800,0;8..144,100,1000,0&family=Space+Grotesk:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/CSS/main.css" />
<link rel="stylesheet" href="/CSS/media.css" />
<link rel="stylesheet" href="/CSS/loading.css" />
<link rel="icon" type="image/x-icon" href="./ASSETS/Favicon/favicon.ico" />
<title>Suthee G. 😎</title>
</head>
<body id="top" class="body">
<div class="loading-container">
<img
class="loading-star"
src="/ASSETS/SVGs/Star about.svg"
alt="Blue Star Icon"
/>
<p>loading.</p>
</div>
<header class="header">
<div class="header-wrapper">
<div class="header-content">
<span
class="logo"
onclick='window.scrollTo({top: 0, behavior: "smooth"});'
>
Suthee
</span>
<ul class="nav-links">
<li>
<a class="underline link-to-about">About</a>
</li>
<li>
<a class="underline link-to-projects">Work</a>
</li>
<li>
<a class="underline link-to-contact">Contact</a>
</li>
</ul>
</div>
<div class="line header-line"></div>
</div>
</header>
<section class="intro section" data-color="#121212">
<div class="container">
<h1 class="intro-line1 line1-slide"></h1>
<h1 class="lineMid-slide"></h1>
<div class="intro-line2">
<h1 class="line2-slide"></h1>
<p class="intro-p">
I’m passionate about creating exceptional applications with stunning
interfaces and expandable functionalities.
</p>
</div>
</div>
<div class="scroll">
<p class="scroll-down">Scroll Down</p>
<img
class="arrow-down"
src="./ASSETS/SVGs/down arrow.svg"
alt="Down Arrow Icon"
/>
</div>
</section>
<section class="about section" id="about" data-color="#1C232E">
<div class="container">
<div class="about-icon aboutInView">
<img
class="about-star"
src="/ASSETS/SVGs/Star about.svg"
alt="Blue Star Icon"
/>
<p>About</p>
</div>
<div class="hello aboutInView">
<h3>Hello.</h3>
<h3>I’M Suthee</h3>
</div>
<p class="about-content aboutInView">
I'm a creative full-stack software engineer passionate about building
scalable and engaging applications. I specialize in developing dynamic
web experiences with React and TypeScript, architecting robust
backends with Node, Express, and MongoDB, and designing RESTful APIs
with clean, efficient code—all while leveraging Git for seamless
collaboration.
<br /><br />
I thrive on problem-solving, continuous learning, and collaboration,
with a strong interest in web animation, 3D development, and immersive
experiences. My goal is to craft innovative solutions that make a
positive impact. Let’s build something great together!
</p>
</div>
</section>
<section class="projects section" id="projects" data-color="#121212">
<div class="container projContainer">
<div class="projects-heading projInView">
<img
class="proj-star"
src="/ASSETS/SVGs/Star Projects.svg"
alt="Blue Star Icon"
/>
<p>Selected Projects</p>
</div>
</div>
</section>
<section class="contact section" id="contact" data-color="#1C232E">
<div class="container">
<div class="contact-heading contactInView">
<img
class="contact-star"
src="/ASSETS/SVGs/Star Contact.png"
alt="Blue Star Icon"
/>
<p>Contact</p>
</div>
<div class="interested">
<h3 class="contactInView">
I’M ALWAYS <br />
INTERESTED IN
</h3>
<div class="swiper swiper1">
<div class="swiper-wrapper swiper-wrapper1"></div>
</div>
</div>
<div class="questions contactInView">
<p>
Got a question or want to work together on some project? <br />
Please reach out!
</p>
</div>
<button class="btn email-btn contactInView">
<div class="swiper swiper2">
<div class="swiper-wrapper swiper-wrapper2">
<h4 class="email swiper-slide">SutheeDeveloper@gmail.com</h4>
<h4 class="copied swiper-slide">Copied!</h4>
</div>
</div>
</button>
<span class="copy-email"> Click to copy </span>
</div>
</section>
<footer class="footer">
<div class="line footer-line"></div>
<div class="footer-content">
<p>
Developed by
<a href="https://github.com/sutheedev" target="_blank" class="myName">
Suthee Gomootsukhavadee
</a>
</p>
<ul class="social-links">
<li onclick="window.open('https://www.linkedin.com/in/sutheeg/')">
<svg
width="22"
height="22"
viewBox="0 0 22 22"
fill="currentcolor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.82562 21.8306H0.471875V7.81027H4.82562V21.8306ZM2.64641 5.89777C1.25422 5.89777 0.125 4.74465 0.125 3.35246C0.125 2.68374 0.390647 2.04241 0.863503 1.56956C1.33636 1.0967 1.97769 0.831055 2.64641 0.831055C3.31512 0.831055 3.95645 1.0967 4.42931 1.56956C4.90216 2.04241 5.16781 2.68374 5.16781 3.35246C5.16781 4.74465 4.03812 5.89777 2.64641 5.89777ZM21.1203 21.8306H16.7759V15.0056C16.7759 13.379 16.7431 11.2931 14.5123 11.2931C12.2487 11.2931 11.9019 13.0603 11.9019 14.8884V21.8306H7.55281V7.81027H11.7284V9.72277H11.7894C12.3706 8.62121 13.7905 7.45871 15.9087 7.45871C20.315 7.45871 21.125 10.3603 21.125 14.129V21.8306H21.1203Z"
fill="white"
/>
</svg>
</li>
<li onclick="window.open('https://github.com/sutheedev')">
<svg
width="22"
height="22"
viewBox="0 0 22 22"
fill="currentcolor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.14896 17.3965C7.14896 17.4833 7.05158 17.5528 6.9288 17.5528C6.78908 17.5658 6.6917 17.4963 6.6917 17.3965C6.6917 17.3096 6.78908 17.2401 6.91186 17.2401C7.03888 17.2271 7.14896 17.2966 7.14896 17.3965ZM5.83223 17.2011C5.80259 17.2879 5.88727 17.3878 6.01428 17.4138C6.12436 17.4573 6.25138 17.4138 6.27678 17.327C6.30219 17.2401 6.22174 17.1403 6.09473 17.1012C5.98465 17.0708 5.86186 17.1142 5.83223 17.2011ZM7.7036 17.1272C7.58082 17.1576 7.49614 17.2401 7.50884 17.34C7.52154 17.4269 7.63162 17.4833 7.75864 17.4529C7.88142 17.4225 7.9661 17.34 7.9534 17.2532C7.94069 17.1707 7.82638 17.1142 7.7036 17.1272ZM10.4895 0.487305C4.61711 0.487305 0.124969 5.05982 0.124969 11.0827C0.124969 15.8984 3.08021 20.0193 7.30138 21.4696C7.84332 21.5695 8.03384 21.2264 8.03384 20.9442C8.03384 20.675 8.02114 19.1899 8.02114 18.278C8.02114 18.278 5.05743 18.9293 4.43505 16.9839C4.43505 16.9839 3.95239 15.7203 3.25803 15.3946C3.25803 15.3946 2.28848 14.7129 3.32578 14.7259C3.32578 14.7259 4.38001 14.8128 4.96005 15.8462C5.88727 17.5224 7.4411 17.0404 8.04654 16.7538C8.14392 16.059 8.41912 15.577 8.72396 15.2904C6.35723 15.0212 3.96932 14.6695 3.96932 10.4921C3.96932 9.29796 4.2911 8.69872 4.96852 7.93446C4.85844 7.65221 4.49856 6.48845 5.0786 4.98599C5.96348 4.70374 7.99997 6.15843 7.99997 6.15843C8.84674 5.91526 9.75703 5.78933 10.6588 5.78933C11.5607 5.78933 12.4709 5.91526 13.3177 6.15843C13.3177 6.15843 15.3542 4.6994 16.2391 4.98599C16.8191 6.4928 16.4592 7.65221 16.3492 7.93446C17.0266 8.70306 17.4415 9.30231 17.4415 10.4921C17.4415 14.6825 14.9478 15.0169 12.581 15.2904C12.9705 15.6335 13.3008 16.2848 13.3008 17.3053C13.3008 18.7687 13.2881 20.5794 13.2881 20.9355C13.2881 21.2178 13.4828 21.5608 14.0205 21.4609C18.2544 20.0193 21.125 15.8984 21.125 11.0827C21.125 5.05982 16.3619 0.487305 10.4895 0.487305ZM4.24029 15.4641C4.18525 15.5075 4.19795 15.6074 4.26993 15.6899C4.33767 15.7594 4.43505 15.7898 4.49009 15.7333C4.54513 15.6899 4.53243 15.59 4.46045 15.5075C4.39271 15.4381 4.29533 15.4077 4.24029 15.4641ZM3.78303 15.1124C3.7534 15.1688 3.79574 15.2383 3.88041 15.2817C3.94815 15.3252 4.03283 15.3121 4.06247 15.2513C4.09211 15.1949 4.04977 15.1254 3.96509 15.082C3.88041 15.0559 3.81267 15.069 3.78303 15.1124ZM5.15481 16.6583C5.08707 16.7147 5.11247 16.845 5.20985 16.9275C5.30723 17.0274 5.43001 17.0404 5.48505 16.9709C5.54009 16.9145 5.51469 16.7842 5.43001 16.7017C5.33686 16.6018 5.20985 16.5888 5.15481 16.6583ZM4.67215 16.0199C4.6044 16.0634 4.6044 16.1763 4.67215 16.2761C4.73989 16.376 4.8542 16.4194 4.90924 16.376C4.97699 16.3196 4.97699 16.2067 4.90924 16.1068C4.84997 16.0069 4.73989 15.9635 4.67215 16.0199Z"
fill="white"
/>
</svg>
</li>
<li onclick="window.open('https://codepen.io/sutheedev')">
<svg
width="22"
height="22"
viewBox="0 0 22 22"
fill="currentcolor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.7265 6.69388L11.1289 0.295441C10.8013 0.0938497 10.4517 0.092004 10.1211 0.295441L0.523426 6.69388C0.277332 6.8579 0.125 7.15092 0.125 7.44385V13.8422C0.125 14.1352 0.277332 14.4282 0.523467 14.5923L10.1211 20.9916C10.4487 21.1932 10.7983 21.195 11.1289 20.9916L20.7266 14.5923C20.9727 14.4282 21.125 14.1352 21.125 13.8422V7.44385C21.125 7.15092 20.9727 6.8579 20.7265 6.69388ZM11.5273 2.73288L18.5938 7.44385L15.4414 9.55324L11.5273 6.93993V2.73288ZM9.72266 2.73288V6.93993L5.80858 9.55324L2.65624 7.44385L9.72266 2.73288ZM1.92969 9.13136L4.19141 10.6431L1.92969 12.1548V9.13136ZM9.72266 18.5533L2.65624 13.8423L5.80858 11.7329L9.72266 14.3462V18.5533ZM10.625 12.7759L7.43747 10.6431L10.625 8.51026L13.8125 10.6431L10.625 12.7759ZM11.5273 18.5533V14.3462L15.4414 11.7329L18.5938 13.8423L11.5273 18.5533ZM19.3203 12.1548L17.0586 10.6431L19.3203 9.13136V12.1548Z"
fill="white"
/>
</svg>
</li>
</ul>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script src="/JS/projects.js"></script>
<script src="/JS/main.js"></script>
</body>
</html>