├── .DS_Store
├── img
    ├── portfolio.png
    ├── sandhika.jpg
    └── projects
    │   ├── 1.jpg
    │   ├── 2.jpg
    │   ├── 3.jpg
    │   ├── 4.jpg
    │   ├── 5.jpg
    │   ├── twice.png
    │   ├── tech-docs.png
    │   ├── landing-page.png
    │   └── twice-survey.png
├── .cpanel.yml
├── style.css
└── index.html


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandhikagalih/portfolio-fcc/HEAD/.DS_Store


--------------------------------------------------------------------------------
/img/portfolio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandhikagalih/portfolio-fcc/HEAD/img/portfolio.png


--------------------------------------------------------------------------------
/img/sandhika.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandhikagalih/portfolio-fcc/HEAD/img/sandhika.jpg


--------------------------------------------------------------------------------
/img/projects/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandhikagalih/portfolio-fcc/HEAD/img/projects/1.jpg


--------------------------------------------------------------------------------
/img/projects/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandhikagalih/portfolio-fcc/HEAD/img/projects/2.jpg


--------------------------------------------------------------------------------
/img/projects/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandhikagalih/portfolio-fcc/HEAD/img/projects/3.jpg


--------------------------------------------------------------------------------
/img/projects/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandhikagalih/portfolio-fcc/HEAD/img/projects/4.jpg


--------------------------------------------------------------------------------
/img/projects/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandhikagalih/portfolio-fcc/HEAD/img/projects/5.jpg


--------------------------------------------------------------------------------
/img/projects/twice.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandhikagalih/portfolio-fcc/HEAD/img/projects/twice.png


--------------------------------------------------------------------------------
/img/projects/tech-docs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandhikagalih/portfolio-fcc/HEAD/img/projects/tech-docs.png


--------------------------------------------------------------------------------
/img/projects/landing-page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandhikagalih/portfolio-fcc/HEAD/img/projects/landing-page.png


--------------------------------------------------------------------------------
/img/projects/twice-survey.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandhikagalih/portfolio-fcc/HEAD/img/projects/twice-survey.png


--------------------------------------------------------------------------------
/.cpanel.yml:
--------------------------------------------------------------------------------
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
8 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | .jumbotron {
 2 |   padding-top: 6rem;
 3 |   background-color: #e2edff;
 4 |   height: 100vh;
 5 |   position: relative;
 6 | }
 7 | 
 8 | .wave1 {
 9 |   position: absolute;
10 |   bottom: 0;
11 |   left: 0;
12 | }
13 | 
14 | #projects {
15 |   background-color: #e2edff;
16 | }
17 | 
18 | section {
19 |   padding-top: 5rem;
20 | }
21 | 
22 | /* Media Query ketika dibuka di mobile */
23 | @media (max-width: 576px) {
24 |   .btn-github {
25 |     width: 90%;
26 |   }
27 | 
28 |   .navbar {
29 |     background-color: black !important;
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  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 |     <!-- My CSS -->
 20 |     <link rel="stylesheet" href="style.css" />
 21 | 
 22 |     <title>My Portfolio | Sandhika Galih</title>
 23 |   </head>
 24 |   <body id="home">
 25 |     <!-- Navbar -->
 26 |     <nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow-sm fixed-top" id="navbar">
 27 |       <div class="container">
 28 |         <a class="navbar-brand" href="#">Sandhika Galih</a>
 29 |         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 30 |           <span class="navbar-toggler-icon"></span>
 31 |         </button>
 32 |         <div class="collapse navbar-collapse" id="navbarNav">
 33 |           <ul class="navbar-nav ms-auto">
 34 |             <li class="nav-item">
 35 |               <a class="nav-link active" aria-current="page" href="#home">Home</a>
 36 |             </li>
 37 |             <li class="nav-item">
 38 |               <a class="nav-link" href="#about">About</a>
 39 |             </li>
 40 |             <li class="nav-item">
 41 |               <a class="nav-link" href="#projects">Projects</a>
 42 |             </li>
 43 |             <li class="nav-item">
 44 |               <a class="nav-link" href="#contact">Contact</a>
 45 |             </li>
 46 |           </ul>
 47 |         </div>
 48 |       </div>
 49 |     </nav>
 50 |     <!-- Akhir Navbar -->
 51 | 
 52 |     <!-- Jumbotron -->
 53 |     <section class="jumbotron text-center" id="welcome-section">
 54 |       <img src="img/sandhika.jpg" alt="Sandhika Galih" width="200" class="rounded-circle img-thumbnail" />
 55 |       <h1 class="display-4">Sandhika Galih</h1>
 56 |       <p class="lead">Lecturer | Content Creator</p>
 57 |       <a href="https://github.com/sandhikagalih" target="_blank" class="btn btn-dark btn-github" id="profile-link">Follow my GitHub <i class="bi bi-github"></i></a>
 58 |       <svg class="wave1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
 59 |         <path
 60 |           fill="#ffffff"
 61 |           fill-opacity="10"
 62 |           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"
 63 |         ></path>
 64 |       </svg>
 65 |     </section>
 66 |     <!-- Akhir Jumbotron -->
 67 | 
 68 |     <!-- About -->
 69 |     <section id="about">
 70 |       <div class="container">
 71 |         <div class="row text-center mb-3">
 72 |           <div class="col">
 73 |             <h2>About Me</h2>
 74 |           </div>
 75 |         </div>
 76 |         <div class="row justify-content-center fs-5 text-center">
 77 |           <div class="col-md-4">
 78 |             <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure mollitia voluptatum corrupti sint delectus facilis pariatur recusandae! Eveniet, iure debitis?</p>
 79 |           </div>
 80 |           <div class="col-md-4">
 81 |             <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>
 82 |           </div>
 83 |         </div>
 84 |       </div>
 85 |       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
 86 |         <path
 87 |           fill="#e2edff"
 88 |           fill-opacity="10"
 89 |           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"
 90 |         ></path>
 91 |       </svg>
 92 |     </section>
 93 |     <!-- Akhir About -->
 94 | 
 95 |     <!-- Projects -->
 96 |     <section id="projects">
 97 |       <div class="container">
 98 |         <div class="row text-center mb-3">
 99 |           <div class="col">
100 |             <h2>My Projects</h2>
101 |           </div>
102 |         </div>
103 |         <div class="row justify-content-center">
104 |           <div class="col-md-4 mb-3">
105 |             <div class="card project-tile">
106 |               <img src="img/projects/twice.png" class="card-img-top" alt="Project 1" />
107 |               <div class="card-body">
108 |                 <h5 class="card-title">Twice Tribute Page</h5>
109 |                 <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>
110 |                 <a href="https://sandhikagalih.github.io/twice-tribute-page/" target="_blank" class="btn btn-primary">Detail Project &raquo;</a>
111 |               </div>
112 |             </div>
113 |           </div>
114 |           <div class="col-md-4 mb-3">
115 |             <div class="card project-tile">
116 |               <img src="img/projects/twice-survey.png" class="card-img-top" alt="Project 2" />
117 |               <div class="card-body">
118 |                 <h5 class="card-title">Twice Survey Form</h5>
119 |                 <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>
120 |                 <a href="https://sandhikagalih.github.io/twice-survey-form/" target="_blank" class="btn btn-primary">Detail Project &raquo;</a>
121 |               </div>
122 |             </div>
123 |           </div>
124 |           <div class="col-md-4 mb-3">
125 |             <div class="card project-tile">
126 |               <img src="img/projects/tech-docs.png" class="card-img-top" alt="Project 3" />
127 |               <div class="card-body">
128 |                 <h5 class="card-title">Technical Documentation</h5>
129 |                 <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>
130 |                 <a href="https://sandhikagalih.github.io/fcc-technical-documentation" target="_blank" class="btn btn-primary">Detail Project &raquo;</a>
131 |               </div>
132 |             </div>
133 |           </div>
134 |           <div class="col-md-4 mb-3">
135 |             <div class="card project-tile">
136 |               <img src="img/projects/landing-page.png" class="card-img-top" alt="Project 4" />
137 |               <div class="card-body">
138 |                 <h5 class="card-title">Landing Page</h5>
139 |                 <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>
140 |                 <a href="https://sandhikagalih.github.io/landing-page-css-grid/" target="_blank" class="btn btn-primary">Detail Project &raquo;</a>
141 |               </div>
142 |             </div>
143 |           </div>
144 |           <div class="col-md-4 mb-3">
145 |             <div class="card project-tile">
146 |               <img src="img/projects/5.jpg" class="card-img-top" alt="Project 5" />
147 |               <div class="card-body">
148 |                 <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>
149 |               </div>
150 |             </div>
151 |           </div>
152 |         </div>
153 |       </div>
154 | 
155 |       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
156 |         <path
157 |           fill="#ffffff"
158 |           fill-opacity="10"
159 |           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"
160 |         ></path>
161 |       </svg>
162 |     </section>
163 |     <!-- Akhir Projects -->
164 | 
165 |     <!-- Contact -->
166 |     <section id="contact">
167 |       <div class="container">
168 |         <div class="row text-center mb-3">
169 |           <div class="col">
170 |             <h2>Contact Me</h2>
171 |           </div>
172 |         </div>
173 |         <div class="row justify-content-center">
174 |           <div class="col-md-6">
175 |             <div class="alert alert-success alert-dismissible fade show d-none my-alert" role="alert">
176 |               <strong>Terimakasih!</strong> Pesan anda sudah kami terima.
177 |               <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
178 |             </div>
179 |             <form name="wpu-contact-form">
180 |               <div class="mb-3">
181 |                 <label for="name" class="form-label">Nama Lengkap</label>
182 |                 <input type="text" class="form-control" id="name" aria-describedby="name" name="nama" />
183 |               </div>
184 |               <div class="mb-3">
185 |                 <label for="email" class="form-label">Email</label>
186 |                 <input type="email" class="form-control" id="email" aria-describedby="email" name="email" />
187 |               </div>
188 |               <div class="mb-3">
189 |                 <label for="pesan" class="form-label">Pesan</label>
190 |                 <textarea class="form-control" id="pesan" rows="3" name="pesan"></textarea>
191 |               </div>
192 |               <button type="submit" class="btn btn-primary btn-kirim">Kirim</button>
193 | 
194 |               <button class="btn btn-primary btn-loading d-none" type="button" disabled>
195 |                 <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
196 |                 Loading...
197 |               </button>
198 |             </form>
199 |           </div>
200 |         </div>
201 |       </div>
202 |       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
203 |         <path
204 |           fill="#0d6efd"
205 |           fill-opacity="10"
206 |           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"
207 |         ></path>
208 |       </svg>
209 |     </section>
210 |     <!-- Akhir Contact -->
211 | 
212 |     <!-- Footer -->
213 |     <footer class="bg-primary text-white text-center pb-5">
214 |       <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>
215 |     </footer>
216 |     <!-- Akhir Footer -->
217 | 
218 |     <script
219 |       src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
220 |       integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
221 |       crossorigin="anonymous"
222 |     ></script>
223 | 
224 |     <script>
225 |       const scriptURL = 'https://script.google.com/macros/s/AKfycbzjWwvjJihKz3-24SxEnHM5XFjNPgQd_dv3uD_fgjLSp_4AAXsC6IC4C_ECvWyLkGsuBg/exec';
226 |       const form = document.forms['wpu-contact-form'];
227 |       const btnKirim = document.querySelector('.btn-kirim');
228 |       const btnLoading = document.querySelector('.btn-loading');
229 |       const myAlert = document.querySelector('.my-alert');
230 | 
231 |       form.addEventListener('submit', (e) => {
232 |         e.preventDefault();
233 |         // ketika tombol submit diklik
234 |         // tampilkan tombol loading, hilangkan tombol kirim
235 |         btnLoading.classList.toggle('d-none');
236 |         btnKirim.classList.toggle('d-none');
237 |         fetch(scriptURL, { method: 'POST', body: new FormData(form) })
238 |           .then((response) => {
239 |             // tampilkan tombol kirim, hilangkan tombol loading
240 |             btnLoading.classList.toggle('d-none');
241 |             btnKirim.classList.toggle('d-none');
242 |             // tampilkan alert
243 |             myAlert.classList.toggle('d-none');
244 |             // reset formnya
245 |             form.reset();
246 |             console.log('Success!', response);
247 |           })
248 |           .catch((error) => console.error('Error!', error.message));
249 |       });
250 |     </script>
251 |     <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
252 |   </body>
253 | </html>
254 | 


--------------------------------------------------------------------------------