-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
240 lines (223 loc) · 11.5 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
228
229
230
231
232
233
234
235
236
237
238
239
240
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<!-- Boostrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css">
<!-- Aos -->
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<!-- my css -->
<link rel="stylesheet" href="style.css" />
<title>My Portfolio | Yoga Setiawan </title>
</head>
<body id="home">
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light shadow-sm fixed-top"
style="background-color: rgb(60, 248, 12);">
<div class="container">
<a class="navbar-brand" href="#">Yoga Setiawan</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- akhir navbar -->
<!-- jumbotron -->
<section class="jumbotron text-center">
<img src="img/Yoga Setiawan.jpg" alt="Yoga Setiawan" width="200"
class="rounded-circle img-thumbnail" />
<h1 class="display-4 fw-bold">Yoga Setiawan</h1>
<p class="lead fw-bold">Student | Web Developer</p>
<a class="navbar-brand p-0" href="https://www.google.com/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#000000" fill-opacity="1" d="M0,96L48,96C96,96,192,96,288,
128C384,160,480,224,576,213.3C672,203,768,117,864,117.3C960,117,1056,203,1152,208C1248,213,1344,139,1392,101.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,
320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
</a>
</section>
<!-- Akhir Jumbotron -->
<!-- About -->
<section id="about">
<div class="container">
<div class="row text-center mb-3">
<div class="col">
<h2 class="fw-bold text-white">About Me</h2>
</div>
</div>
<div class="row justify-content-center fs-5 text-center">
<div class="col-md-4 text-light" data-aos="fade-up-right" data-aos-duration="1000">
<p>I am someone who is trying to have a career in the field that I like, namely web developer, because for me this web developer is really profitable for me and also this is something that I aspire to or want from the beginning.</p>
</div>
<div class="col-md-4 text-light" data-aos="fade-down-left" data-aos-duration="1000" data-aos-delay="200">
<p>I am a person who is very enthusiastic in doing anything because for me, I am a person who gets dizzy easily when there is an unfinished task. And I also always try to give the best for anyone, because for me satisfaction is in your hands.
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#ffff4b" fill-opacity="1" d="M0,64L80,
96C160,128,320,192,480,192C640,192,800,128,960,112C1120,96,1280,128,1360,144L1440,160L1440,320L1360,320C1280,320,
1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path></svg>
</section>
<!-- Akhir About -->
<!-- Projects -->
<section id="projects">
<div class="container">
<div class="row text-center mb-3">
<div class="col">
<h2 class="fw-bold">My Projects</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-4 mb-3">
<div class="card" data-aos="flip-left" data-aos-duration="500">
<img src="img/Projects/5.jpg" class="card-img-top" alt="projects 1">
<div class="card-body">
<p class="card-text">When I Started Coding I Created A Portfolio Using Visual Code Software On My Laptop By Windows 2007.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card" data-aos="flip-left" data-aos-duration="500" data-aos-delay="100">
<img src="img/Projects/7.jpg" class="card-img-top" alt="projects 1">
<div class="card-body">
<p class="card-text">Some views of the results of the coding that I made through html, css and assisted by Bootstrap I use bootstrap version 5.1.3.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card" data-aos="flip-left" data-aos-duration="500" data-aos-delay="200">
<img src="img/Projects/8.jpg" class="card-img-top" alt="projects 1">
<div class="card-body">
<p class="card-text">photo of my laptop along with half a page of my portfolio, as well as a few variations of my acoustic guitar and don't forget my mouse.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card" data-aos="flip-left" data-aos-duration="500" data-aos-delay="300">
<img src="img/Projects/6.jpg" class="card-img-top" alt="projects 1">
<div class="card-body">
<p class="card-text">this is me coding my project entitled "my portfolio".</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card" data-aos="flip-left" data-aos-duration="500" data-aos-delay="400">
<img src="img/Projects/11.jpg" class="card-img-top" alt="projects 1">
<div class="card-body">
<p class="card-text">I'm Trying To Configure Google Sheets So When You Give Me Feedback About Me, I Can Receive It.</p>
</div>
</div>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#000000" fill-opacity="1" d="M0,160L48,165.3C96,171,192,181,288,165.3C384,149,480,107,576,90.7C672,75,768,85,864,117.3C960,149,1056,203,1152,202.7C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,
320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
</section>
<!-- Akhir Projects -->
<!-- Contact -->
<section id="contact">
<div class="container">
<div class="row text-center mb-3">
<div class="col">
<h2 class="fw-bold text-light">Contact Me</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="alert alert-success alert-dismissible fade show d-none my-alert" role="alert">
<strong>Thank You!</strong> Pesan Anda Telah Kami Terima.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<form name="YOGA-Contact-Form">
<div class="mb-3">
<label for="Name" class="form-label text-light">Nama Lengkap</label><i class="bi bi-box-arrow-in-down-right text-light"></i>
<input type="text" class="form-control" id="name" aria-describedby="name" name="nama"/>
</div>
<div class="mb-3">
<label for="Email" class="form-label text-light">Email</label><i class="bi bi-box-arrow-in-down-right text-light"></i>
<input type="email" class="form-control" id="email" aria-describedby="email" name="email"/>
</div>
<div class="mb-3">
<label for="Pesan" class="form-label text-light">Pesan</label><i class="bi bi-box-arrow-in-down-right text-light"></i>
<textarea class="form-control" id="Pesan" rows="3" name="pesan"></textarea>
</div>
<button type="submit" class="btn btn-primary btn-kirim text-light">Kirim</button>
<button class="btn btn-primar btn-loading d-none" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
</form>
</div>
</div>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#ffff4b" fill-opacity="1" d="M0,96L48,96C96,96,192,96,288,128C384,160,480,224,576,213.3C672,203,768,117,864,117.3C960,117,1056,203,1152,208C1248,213,1344,139,1392,101.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,
320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
</section>
<!-- Akhir Contact -->
<!-- Footer -->
<footer style="background-color: #ffff4b; color: black; text-align: center; padding-bottom: 3%;">
<p> <i class="bi bi-dot"></i>Created With <i class="bi bi-suit-heart"></i> by <a href="https://www.instagram.com/yogaaeslurrr/" class="text-black fw-bold">
Yoga Setiawan </a> <i class="bi bi-dot"></i> </p>
</footer>
<!-- Akhir Footer -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbw3ibmk0KaDWN_IBeLu_PpIRMghabJkVcLqf0qEf_Qk5evEgWtUAOrC-yNiVOVlguPUug/exec'
const form = document.forms['YOGA-Contact-Form']
const btnKirim = document.querySelector('.btn-kirim')
const btnLoading = document.querySelector('.btn-loading')
const myAlert = document.querySelector('.my-alert')
form.addEventListener('submit', e => {
e.preventDefault()
// ketika tombol submit diklik
// tampilkan tombol loading,hilangkan tombol kirim
btnLoading.classList.toggle('d-none');
btnKirim.classList.toggle('d-none');
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => {
// tampilkan tombol kirim,hilangkan tombol loading
btnLoading.classList.toggle('d-none');
btnKirim.classList.toggle('d-none');
// tampilkan alert
myAlert.classList.toggle('d-none');
// reset form
form.reset('')
console.log('Success!', response);
})
.catch(error => console.error('Error!', error.message))
});
</script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
once: true,
});
</script>
</body>
</html>