Skip to content

Commit 439af05

Browse files
bangjcbangjc
committed
Initial commit
0 parents  commit 439af05

15 files changed

+446
-0
lines changed

‎.cpanel.yml

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
deployment:
3+
tasks:
4+
- export DEPLOYPATH=/home/u3864172/public_html/
5+
- /bin/cp index.html $DEPLOYPATH
6+
- /bin/cp style.css $DEPLOYPATH
7+
- /bin/cp -R img $DEPLOYPATH

‎.gitattributes

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

‎img/keyboards/1.png

176 KB
Loading

‎img/keyboards/2.png

95.9 KB
Loading

‎img/keyboards/3.png

140 KB
Loading

‎img/portfolio.png

154 KB
Loading

‎img/projects/1.jpg

57.7 KB
Loading

‎img/projects/2.jpg

41.2 KB
Loading

‎img/projects/3.jpg

71.3 KB
Loading

‎img/projects/4.jpg

49.7 KB
Loading

‎img/projects/5.jpg

49.1 KB
Loading

‎img/sandhika.jpg

36.2 KB
Loading

‎index.html

+333
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,333 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<!-- Required meta tags -->
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
8+
<!-- Bootstrap CSS -->
9+
<link
10+
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
11+
rel="stylesheet"
12+
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
13+
crossorigin="anonymous"
14+
/>
15+
16+
<!-- Bootstrap Icons -->
17+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
18+
19+
<!-- AOS -->
20+
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
21+
22+
<link
23+
rel="stylesheet"
24+
href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css"
25+
integrity="sha512-Velp0ebMKjcd9RiCoaHhLXkR1sFoCCWXNp6w4zj1hfMifYB5441C+sKeBl/T/Ka6NjBiRfBBQRaQq65ekYz3UQ=="
26+
crossorigin="anonymous"
27+
/>
28+
29+
<!-- My CSS -->
30+
<link rel="stylesheet" href="style.css" />
31+
32+
<title>My Portfolio | Sandhika Galih</title>
33+
</head>
34+
<body id="home">
35+
<!-- Navbar -->
36+
<nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow-sm fixed-top">
37+
<div class="container">
38+
<a class="navbar-brand" href="#">Sandhika Galih</a>
39+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
40+
<span class="navbar-toggler-icon"></span>
41+
</button>
42+
<div class="collapse navbar-collapse" id="navbarNav">
43+
<ul class="navbar-nav ms-auto">
44+
<li class="nav-item">
45+
<a class="nav-link active" aria-current="page" href="#home">Home</a>
46+
</li>
47+
<li class="nav-item">
48+
<a class="nav-link" href="#about">About</a>
49+
</li>
50+
<li class="nav-item">
51+
<a class="nav-link" href="#projects">Projects</a>
52+
</li>
53+
<li class="nav-item">
54+
<a class="nav-link" href="#contact">Contact</a>
55+
</li>
56+
</ul>
57+
</div>
58+
</div>
59+
</nav>
60+
<!-- Akhir Navbar -->
61+
62+
<!-- Jumbotron -->
63+
<section class="jumbotron text-center">
64+
<img src="img/sandhika.jpg" alt="Sandhika Galih" width="200" class="rounded-circle img-thumbnail" />
65+
<h1 class="display-4">Sandhika Galih</h1>
66+
<p class="lead">Lecturer | Content Creator</p>
67+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
68+
<path
69+
fill="#ffffff"
70+
fill-opacity="10"
71+
d="M0,64L48,80C96,96,192,128,288,128C384,128,480,96,576,80C672,64,768,64,864,96C960,128,1056,192,1152,186.7C1248,181,1344,107,1392,69.3L1440,32L1440,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"
72+
></path>
73+
</svg>
74+
</section>
75+
<!-- Akhir Jumbotron -->
76+
77+
<!-- About -->
78+
<section id="about">
79+
<div class="container">
80+
<div class="row text-center mb-3">
81+
<div class="col" data-aos="fade-down">
82+
<h2>About Me</h2>
83+
</div>
84+
</div>
85+
<div class="row justify-content-center fs-5 text-center">
86+
<div class="col-md-4" data-aos="fade-right">
87+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure mollitia voluptatum corrupti sint delectus facilis pariatur recusandae! Eveniet, iure debitis?</p>
88+
</div>
89+
<div class="col-md-4" data-aos="fade-left">
90+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est quibusdam animi odit unde sequi voluptatibus quo rem perferendis eos, numquam in porro cumque a hic!</p>
91+
</div>
92+
</div>
93+
</div>
94+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
95+
<path
96+
fill="#e2edff"
97+
fill-opacity="10"
98+
d="M0,96L48,122.7C96,149,192,203,288,192C384,181,480,107,576,80C672,53,768,75,864,101.3C960,128,1056,160,1152,165.3C1248,171,1344,149,1392,138.7L1440,128L1440,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"
99+
></path>
100+
</svg>
101+
</section>
102+
<!-- Akhir About -->
103+
104+
<!-- Projects -->
105+
<section id="projects">
106+
<div class="container">
107+
<div class="row text-center mb-3">
108+
<div class="col">
109+
<h2>My Projects</h2>
110+
</div>
111+
</div>
112+
<div class="row justify-content-center">
113+
<div class="col-md-4 mb-3" data-aos="flip-right">
114+
<div class="card">
115+
<img src="img/projects/1.jpg" class="card-img-top" alt="Project 1" />
116+
<div class="card-body">
117+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
118+
</div>
119+
</div>
120+
</div>
121+
<div class="col-md-4 mb-3" data-aos="flip-right" data-aos-delay="500">
122+
<div class="card">
123+
<img src="img/projects/2.jpg" class="card-img-top" alt="Project 2" />
124+
<div class="card-body">
125+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
126+
</div>
127+
</div>
128+
</div>
129+
<div class="col-md-4 mb-3" data-aos="flip-right" data-aos-delay="1000">
130+
<div class="card">
131+
<img src="img/projects/3.jpg" class="card-img-top" alt="Project 3" />
132+
<div class="card-body">
133+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
134+
</div>
135+
</div>
136+
</div>
137+
<div class="col-md-4 mb-3" data-aos="flip-right" data-aos-delay="500">
138+
<div class="card">
139+
<img src="img/projects/4.jpg" class="card-img-top" alt="Project 4" />
140+
<div class="card-body">
141+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
142+
</div>
143+
</div>
144+
</div>
145+
<div class="col-md-4 mb-3" data-aos="flip-right" data-aos-delay="1000">
146+
<div class="card">
147+
<img src="img/projects/5.jpg" class="card-img-top" alt="Project 5" />
148+
<div class="card-body">
149+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
150+
</div>
151+
</div>
152+
</div>
153+
</div>
154+
</div>
155+
156+
<section id="my-keyboards">
157+
<div class="container">
158+
<div class="row text-center mb-3">
159+
<div class="col">
160+
<h2>My Keyboards</h2>
161+
</div>
162+
</div>
163+
<div class="row">
164+
<div class="col-md-6 col-lg-4 mb-3">
165+
<div class="keyboard-box">
166+
<h4 class="keyboard-name">Keychron K2</h4>
167+
<img src="img/keyboards/3.png" alt="Keychron K3" class="keyboard-img" />
168+
<a href="#" class="btn btn-light keyboard-detail-button">Show Details</a>
169+
</div>
170+
</div>
171+
<div class="col-md-6 col-lg-4 mb-3">
172+
<div class="keyboard-box">
173+
<h4 class="keyboard-name">Womier RGB</h4>
174+
<img src="img/keyboards/1.png" alt="Womier RGB" class="keyboard-img" />
175+
<a href="#" class="btn btn-light keyboard-detail-button">Show Details</a>
176+
</div>
177+
</div>
178+
<div class="col-md-6 col-lg-4 mb-3">
179+
<div class="keyboard-box">
180+
<h4 class="keyboard-name">Red Dragon</h4>
181+
<img src="img/keyboards/2.png" alt="Red Dragon" class="keyboard-img" />
182+
<a href="#" class="btn btn-light keyboard-detail-button">Show Details</a>
183+
</div>
184+
</div>
185+
</div>
186+
</div>
187+
</section>
188+
189+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
190+
<path
191+
fill="#ffffff"
192+
fill-opacity="10"
193+
d="M0,192L30,208C60,224,120,256,180,245.3C240,235,300,181,360,181.3C420,181,480,235,540,261.3C600,288,660,288,720,272C780,256,840,224,900,218.7C960,213,1020,235,1080,245.3C1140,256,1200,256,1260,250.7C1320,245,1380,235,1410,229.3L1440,224L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"
194+
></path>
195+
</svg>
196+
</section>
197+
<!-- Akhir Projects -->
198+
199+
<!-- Contact -->
200+
<section id="contact">
201+
<div class="container">
202+
<div class="row text-center mb-3">
203+
<div class="col">
204+
<h2>Contact Me</h2>
205+
</div>
206+
</div>
207+
<div class="row justify-content-center">
208+
<div class="col-md-6">
209+
<div class="alert alert-success alert-dismissible fade show d-none my-alert" role="alert">
210+
<strong>Terimakasih!</strong> Pesan anda sudah kami terima.
211+
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
212+
</div>
213+
<form name="wpu-contact-form">
214+
<div class="mb-3">
215+
<label for="name" class="form-label">Nama Lengkap</label>
216+
<input type="text" class="form-control" id="name" aria-describedby="name" name="nama" />
217+
</div>
218+
<div class="mb-3">
219+
<label for="email" class="form-label">Email</label>
220+
<input type="email" class="form-control" id="email" aria-describedby="email" name="email" />
221+
</div>
222+
<div class="mb-3">
223+
<label for="pesan" class="form-label">Pesan</label>
224+
<textarea class="form-control" id="pesan" rows="3" name="pesan"></textarea>
225+
</div>
226+
<button type="submit" class="btn btn-primary btn-kirim">Kirim</button>
227+
228+
<button class="btn btn-primary btn-loading d-none" type="button" disabled>
229+
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
230+
Loading...
231+
</button>
232+
</form>
233+
</div>
234+
</div>
235+
</div>
236+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
237+
<path
238+
fill="#0d6efd"
239+
fill-opacity="10"
240+
d="M0,128L30,149.3C60,171,120,213,180,224C240,235,300,213,360,192C420,171,480,149,540,160C600,171,660,213,720,197.3C780,181,840,107,900,101.3C960,96,1020,160,1080,197.3C1140,235,1200,245,1260,234.7C1320,224,1380,192,1410,176L1440,160L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"
241+
></path>
242+
</svg>
243+
</section>
244+
<!-- Akhir Contact -->
245+
246+
<!-- Footer -->
247+
<footer class="bg-primary text-white text-center pb-5">
248+
<p>Created with <i class="bi bi-heart-fill text-danger"></i> by <a href="https://www.instagram.com/sandhikagalih/" class="text-white fw-bold">Sandhika Galih</a></p>
249+
</footer>
250+
<!-- Akhir Footer -->
251+
252+
<script
253+
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
254+
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
255+
crossorigin="anonymous"
256+
></script>
257+
258+
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
259+
260+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
261+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/TextPlugin.min.js"></script>
262+
263+
<script>
264+
gsap.from('.img-thumbnail', { duration: 2, rotationX: 360 });
265+
gsap.from('.navbar', { duration: 1.5, opacity: 0, y: '-100%', ease: 'bounce' });
266+
gsap.from('.display-4', { delay: 1, duration: 1, opacity: 0, x: '-10%' });
267+
268+
gsap.registerPlugin(TextPlugin);
269+
gsap.to('.lead', { delay: 1.5, duration: 2, text: 'Lecturer | Content Creator' });
270+
271+
const galleryImages = document.querySelectorAll('.gallery-img');
272+
const delayTimes = [0, 50, 100, 150, 200, 250, 300, 350, 400, 450];
273+
274+
function shuffleArray(array) {
275+
for (var i = array.length - 1; i > 0; i--) {
276+
var j = Math.floor(Math.random() * (i + 1));
277+
var temp = array[i];
278+
array[i] = array[j];
279+
array[j] = temp;
280+
}
281+
return array;
282+
}
283+
const newDelay = shuffleArray(delayTimes);
284+
galleryImages.forEach((img, i) => {
285+
img.dataset.aos = 'fade-up';
286+
img.dataset.aosDelay = i * 50 + '';
287+
// img.dataset.aosDelay = newDelay[i];
288+
});
289+
290+
AOS.init({
291+
once: true,
292+
duration: 3000,
293+
});
294+
</script>
295+
296+
<script>
297+
const scriptURL = 'https://script.google.com/macros/s/AKfycbzjWwvjJihKz3-24SxEnHM5XFjNPgQd_dv3uD_fgjLSp_4AAXsC6IC4C_ECvWyLkGsuBg/exec';
298+
const form = document.forms['wpu-contact-form'];
299+
const btnKirim = document.querySelector('.btn-kirim');
300+
const btnLoading = document.querySelector('.btn-loading');
301+
const myAlert = document.querySelector('.my-alert');
302+
303+
form.addEventListener('submit', (e) => {
304+
e.preventDefault();
305+
// ketika tombol submit diklik
306+
// tampilkan tombol loading, hilangkan tombol kirim
307+
btnLoading.classList.toggle('d-none');
308+
btnKirim.classList.toggle('d-none');
309+
fetch(scriptURL, { method: 'POST', body: new FormData(form) })
310+
.then((response) => {
311+
// tampilkan tombol kirim, hilangkan tombol loading
312+
btnLoading.classList.toggle('d-none');
313+
btnKirim.classList.toggle('d-none');
314+
// tampilkan alert
315+
myAlert.classList.toggle('d-none');
316+
// reset formnya
317+
form.reset();
318+
console.log('Success!', response);
319+
})
320+
.catch((error) => console.error('Error!', error.message));
321+
});
322+
</script>
323+
324+
<script type="text/javascript" src="js/vanilla-tilt.min.js"></script>
325+
<script type="text/javascript">
326+
VanillaTilt.init(document.querySelectorAll('.keyboard-box'), {
327+
max: 35,
328+
speed: 1000,
329+
glare: true,
330+
});
331+
</script>
332+
</body>
333+
</html>

0 commit comments

Comments
 (0)