-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
198 lines (183 loc) · 8.64 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyResume</title>
<link rel="stylesheet" href="./style/initial.css">
<link rel="stylesheet" href="./style/index.css">
<link rel="stylesheet" href="./style/test.css">
</head>
<body>
<div id="container" class="slider">
<div class="navigation">
<ul>
<a href="#introPage">
<li>Introduction</li>
</a>
<a href="#expPage">
<li>Education & Experience</li>
</a>
<a href="#skillPage">
<li>Skill</li>
</a>
<a href="#certPage">
<li>Certificate & Interests</li>
</a>
<a href="#sendPage">
<li>Send to E-mail</li>
</a>
</ul>
</div>
<div class="slide">
<div class="name">
<h1 class="text-name">Supitsara Deetoh</h1>
<h2 class="text-title">I am a full stack developer.</h2>
</div>
<div id="introPage" class="card">
<div class="card-left">
<img src="./style/profile.jpg" />
</div>
<div class="card-right">
<h4 class="sub-topic">About me</h4>
<p class="sub-detail">2 years of experience in web development,
writing and testing codes, solving problems,
implement feature based on user requirement
and specification</p>
</div>
</div>
</div>
<div id="expPage" class="slide second">
<div>
<h2>Education & Experience</h2>
</div>
<div class="box-of-education scroll-style">
<div class="edu-item">
<h4 class="sub-topic">education</h4>
<p class="sub-detail">Bachelor degree of Computer Engineering, Khonkaen University GPA : 3.30</p>
<span class="date-range">19 feb - 20 mar</span>
</div>
<div class="edu-item">
<h4 class="sub-topic">Intern at NECTEC NSTDA</h4>
<p class="sub-detail">เขียนบทความลง medium</p>
<span class="date-range">19 feb - 20 mar</span>
</div>
<div class="edu-item">
<h4 class="sub-topic">Full-stack developer at Silkspan Co. Ltd.</h4>
<p class="sub-detail">- ดูแลรักษาระบบ เพิ่ม feature ให้ เพิ่ม endpoint สร้างระบบ
- พัฒนา หน้าบ้าน และเอพีไอ หลังบ้าน ให้ทำงานด้วยกันได้ โดยเป็นไปตาม specification
- จัดทำเอกสาร Unit Test
- ตรวจสอบปัญหาที่เกิดขึ้น</p>
<span class="date-range">19 feb - 20 mar</span>
</div>
</div>
</div>
<div id="skillPage" class="slide third">
<div>
<h2>Skill</h2>
</div>
<div class="box-of-skill">
<img src="https://skillicons.dev/icons?i=html,js,css,nodejs,git,bootstrap" />
</div>
<div class="box-of-skill">
<img src="https://skillicons.dev/icons?i=jquery,vscode,postman,notion,stackoverflow,figma,bitbucket" />
</div>
<div class="box-of-skill last-row">
<img src="https://skillicons.dev/icons?i=php,py,java,react,redux,ts,vue" />
</div>
<span class="credit">@credit : https://skillicons.dev/</span>
</div>
<div id="certPage" class="slide fourth">
<div>
<h2>Certificate & Interests</h2>
</div>
<div class="carousel">
<div class="carousel-inner">
<a class="carousel-item" target="_blank" href="https://www.freecodecamp.org/certification/fccdf9952fe-3fa5-46bd-b006-8a8a213c8ffa/back-end-development-and-apis">
<h4 class="sub-topic">Freecodecamp</h4>
<p class="sub-detail">
Back End Developement
and APIs Certification
</p>
<img class="icon-cert" src="https://skillicons.dev/icons?i=nodejs" />
<span class="finish-date">27 oct 2021</span>
</a>
<a class="carousel-item" target="_blank" href="https://www.freecodecamp.org/certification/fccdf9952fe-3fa5-46bd-b006-8a8a213c8ffa/javascript-algorithms-and-data-structures">
<h4 class="sub-topic">Freecodecamp</h4>
<p class="sub-detail">
JavaScript Algorithms
and Data Structures Certification
</p>
<img class="icon-cert" src="https://skillicons.dev/icons?i=js" />
<span class="finish-date">5 jun 2022</span>
</a>
<a class="carousel-item" target="_blank" href="">
<h4 class="sub-topic">Udemy</h4>
<p class="sub-detail">
React - The Complete Guide 2024 (incl. React Router & Redux)
</p>
<img class="icon-cert" src="https://skillicons.dev/icons?i=react" />
<span class="finish-date">in progess..</span>
</a>
<a class="carousel-item" target="_blank" href="">
<h4 class="sub-topic">Udemy</h4>
<p class="sub-detail">
NodeJS - The Complete Guide (MVC, REST APIs, GraphQL, Deno)
</p>
<img class="icon-cert" src="https://skillicons.dev/icons?i=nodejs" />
<span class="finish-date">in progess..</span>
</a>
</div>
<div class="carousel-btn carousel-prev">❮</div>
<div class="carousel-btn carousel-next">❯</div>
</div>
<script>
const carousel = document.querySelector('.carousel');
const carouselInner = carousel.querySelector('.carousel-inner');
const prevBtn = carousel.querySelector('.carousel-prev');
const nextBtn = carousel.querySelector('.carousel-next');
const items = carousel.querySelectorAll('.carousel-item');
let currentIndex = 0;
function goToIndex(index) {
if (index < 0 || index >= items.length) return;
currentIndex = index;
const translateValue = -currentIndex * items[0].offsetWidth;
carouselInner.style.transform = `translateX(${translateValue}px)`;
}
prevBtn.addEventListener('click', () => {
goToIndex(currentIndex - 1);
});
nextBtn.addEventListener('click', () => {
goToIndex(currentIndex + 1);
});
</script>
</div>
<div id="sendPage" class="slide fourth">
<div>
<h2>Send to E-mail</h2>
</div>
<form>
<div class="row">
<input type="text" class="input-box" placeholder="reciepient...">
</div>
<div class="row">
<input type="text" class="input-box" placeholder="subject...">
</div>
<div class="row">
<textarea class="input-box" placeholder="typing..."></textarea>
</div>
<input type="submit" value="send">
</form>
</div>
</div>
<script>
var objTable = document.getElementById("container");
window.addEventListener("wheel", function () {
myFunc();
}, false);
function myFunc() {
console.log('in myFunc');
}
</script>
</body>
</html>