├── assets ├── img │ ├── 1.png │ ├── projek1.jpg │ └── projek2.jpg ├── js │ └── script.js └── css │ └── style.css ├── .gitignore ├── README.md └── index.html /assets/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fifovalle/WEBSITE-PORTOFOLIO-PRIBADI/HEAD/assets/img/1.png -------------------------------------------------------------------------------- /assets/img/projek1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fifovalle/WEBSITE-PORTOFOLIO-PRIBADI/HEAD/assets/img/projek1.jpg -------------------------------------------------------------------------------- /assets/img/projek2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fifovalle/WEBSITE-PORTOFOLIO-PRIBADI/HEAD/assets/img/projek2.jpg -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | let typed = new Typed(".teks", { 2 | strings: ["Sedang Belajar JavaScript", "Developer Pemula"], 3 | typeSpeed: 60, 4 | backSpeed: 60, 5 | backDelay: 1000, 6 | loop: true, 7 | }); 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by https://www.toptal.com/developers/gitignore/api/windows,visualstudiocode 2 | # Edit at https://www.toptal.com/developers/gitignore?templates=windows,visualstudiocode 3 | 4 | ### VisualStudioCode ### 5 | .vscode/* 6 | !.vscode/settings.json 7 | !.vscode/tasks.json 8 | !.vscode/launch.json 9 | !.vscode/extensions.json 10 | !.vscode/*.code-snippets 11 | 12 | # Local History for Visual Studio Code 13 | .history/ 14 | 15 | # Built Visual Studio Code Extensions 16 | *.vsix 17 | 18 | ### VisualStudioCode Patch ### 19 | # Ignore all local history of files 20 | .history 21 | .ionide 22 | 23 | ### Windows ### 24 | # Windows thumbnail cache files 25 | Thumbs.db 26 | Thumbs.db:encryptable 27 | ehthumbs.db 28 | ehthumbs_vista.db 29 | 30 | # Dump file 31 | *.stackdump 32 | 33 | # Folder config file 34 | [Dd]esktop.ini 35 | 36 | # Recycle Bin used on file shares 37 | $RECYCLE.BIN/ 38 | 39 | # Windows Installer files 40 | *.cab 41 | *.msi 42 | *.msix 43 | *.msm 44 | *.msp 45 | 46 | # Windows shortcuts 47 | *.lnk 48 | 49 | # End of https://www.toptal.com/developers/gitignore/api/windows,visualstudiocode -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | **Selamat Datang di "Portofolio Pribadi" Website! 🚀** 2 | 3 | Jelajahi karya terbaru dan keterampilan saya dalam dunia pengembangan perangkat lunak. Dari aplikasi web hingga proyek mobile, temukan ragam proyek yang mencerminkan dedikasi saya dalam teknologi. 4 | 5 | ### 🚧 Status Proyek 6 | 7 | - **Status:** Selesai 8 | - **Tanggal Rilis Diharapkan:** September 2023 9 | 10 | ### 🚀 Fitur Utama 11 | 12 | - **Beranda:** Pelajari lebih lanjut tentang latar belakang dan minat saya. 13 | - **Tentang:** Temukan informasi lebih lanjut tentang siapa saya dan apa yang saya lakukan. 14 | - **Layanan:** Jelajahi layanan atau penawaran yang saya sediakan. 15 | - **Keterampilan:** Lihat daftar keterampilan kunci yang saya miliki. 16 | - **Proyek:** Telusuri proyek sampingan yang mungkin menarik perhatian Anda. 17 | - **Kontak:** Hubungi saya untuk kolaborasi, diskusi, atau pertanyaan lebih lanjut. 18 | 19 | ## 🛠️ Teknologi yang Digunakan 20 | 21 | - **Bahasa Pemrograman:** JavaScript. 22 | - **Alat Pengembangan:** Visual Studio Code, Git. 23 | - **Pengembangan Web:** HTML, CSS. 24 | 25 | ## 📷 Preview Halaman 26 | 27 | Berikut adalah beberapa tampilan halaman website : 28 | 29 | ![Screenshot 2023-08-30 133640](https://github.com/fifovalle/WEBSITE-PORTOFOLIO-PRIBADI/assets/90078068/69d7a7f7-4295-4ff1-8ebb-01ab11a28143) 30 | ![Screenshot 2023-08-30 133651](https://github.com/fifovalle/WEBSITE-PORTOFOLIO-PRIBADI/assets/90078068/a17d0897-1278-4e90-9403-59da60896ca2) 31 | ![Screenshot 2023-08-30 133707](https://github.com/fifovalle/WEBSITE-PORTOFOLIO-PRIBADI/assets/90078068/0b37f2dd-6ae0-40f1-8570-e10f007e7c9b) 32 | ![Screenshot 2023-08-30 133716](https://github.com/fifovalle/WEBSITE-PORTOFOLIO-PRIBADI/assets/90078068/933ced45-d721-4437-bc5a-4d73bac06ece) 33 | ![Screenshot 2023-08-30 133728](https://github.com/fifovalle/WEBSITE-PORTOFOLIO-PRIBADI/assets/90078068/b270d03a-b110-4d10-b4dd-be513df7c61c) 34 | ![Screenshot 2023-08-30 133736](https://github.com/fifovalle/WEBSITE-PORTOFOLIO-PRIBADI/assets/90078068/9c59484e-2d8e-4952-b8b9-2e3baf9b8ea3) 35 | 36 | ## 📬 Kontak 37 | 38 | Ingin berkolaborasi atau mendiskusikan proyek? Jangan ragu untuk menghubungi saya melalui email di [fifanaufal10@gmail.com](mailto:fifanaufal10@gmail.com) atau terhubung dengan saya di [WhatsApp](https://wa.me/+6282318334287). 39 | 40 | ### 🙏 Kontribusi 41 | 42 | Kontribusi dan umpan balik dari komunitas sangat dihargai. Jika Anda ingin berkontribusi, silakan buat _pull request_ atau buka _issue_. 43 | 44 | ### 👨‍💻 Cara Menjalankan Proyek 45 | 46 | 1. Clone repositori ini ke direktori web server Anda. 47 | 48 | ``` 49 | git clone https://github.com/fifovalle/WEBSITE-PORTOFOLIO-PRIBADI.git 50 | ``` 51 | 52 | 2. Buka file `index.html` di peramban web Anda. 53 | 54 | Terima kasih atas antusiasme Anda menantikan kehadiran website ini! 🙌 55 | 56 |
57 | © 2023 [Naufal FIFA] 58 |
59 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Naufal FIFA 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 29 |
30 | 31 | 32 | 33 |
34 |
35 |

Halo, Teman Teman

36 |

Saya Naufal FIFA

37 |

Saya

38 |

Saya web developer pemula, yang sedang belajar javascript, dan web inilah tempat bermain saya untuk 39 | mempamerkan project saya atau untuk track perjalanan belajar saya di web developer in

40 | foto 41 |
42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 | Ketahui Saya Lebih Lanjut 53 |
54 |
55 | 56 | 57 | 58 |
59 |
60 | foto 61 |
62 |
63 |

Tentang Saya

64 |

Developer Pemula!

65 |

66 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic temporibus odit quidem ipsam corporis 67 | similique nesciunt minima provident velit sit molestias, labore, iusto eum eveniet nulla recusandae 68 | distinctio animi rerum omnis itaque sapiente. Totam, distinctio, ipsa debitis tempore nostrum possimus a 69 | aperiam, perspiciatis id porro harum repellendus. Est, consectetur temporibus! 70 |

71 | Ketahui Saya Lebih Lanjut 72 |
73 |
74 | 75 | 76 | 77 |
78 |
79 |
80 |

Layanan Saya

81 |
82 |
83 | 84 |

CODING

85 |

86 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos atque ducimus adipisci 87 | reprehenderit dicta maiores repellendus quidem possimus cupiditate vel, architecto veritatis 88 | eaque blanditiis error unde esse quasi quaerat rem maxime, recusandae sapiente facere 89 | tempora magnam! Facilis laudantium ex eaque. 90 |

91 | Pelajari Lebih Lanjut 92 |
93 |
94 | 95 |

DESAIN

96 |

97 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos atque ducimus adipisci 98 | reprehenderit dicta maiores repellendus quidem possimus cupiditate vel, architecto veritatis 99 | eaque blanditiis error unde esse quasi quaerat rem maxime, recusandae sapiente facere 100 | tempora magnam! Facilis laudantium ex eaque. 101 |

102 | Pelajari Lebih Lanjut 103 |
104 |
105 |
106 |
107 | 108 |
109 | 110 | 111 | 112 |

Keterampilan Saya

113 |
114 |
115 |

Keterampilan Teknis

116 |
117 |
118 |
119 | HTML 120 |
121 |
122 | 123 |
124 |
125 |
126 |
127 | CSS 128 |
129 |
130 | 131 |
132 |
133 |
134 |
135 | JAVASCRIPT 136 |
137 |
138 | 139 |
140 |
141 |
142 |
143 | PHP 144 |
145 |
146 | 147 |
148 |
149 |
150 |
151 | REACT 152 |
153 |
154 | 155 |
156 |
157 |
158 |
159 | NODE JS 160 |
161 |
162 | 163 |
164 |
165 |
166 |
167 | MONGO DB 168 |
169 |
170 | 171 |
172 |
173 |
174 |
175 | EXPRESS JS 176 |
177 |
178 | 179 |
180 |
181 |
182 |
183 |
184 |

Keterampilan Lainnya

185 |
186 |
187 | 188 | 189 | 190 | 191 |
0%
192 |
Kreatifitas
193 |
194 |
195 | 196 | 197 | 198 | 199 |
0%
200 |
Komunikasi
201 |
202 |
203 | 204 | 205 | 206 | 207 |
0%
208 |
Penyelesaian Masalah
209 |
210 |
211 | 212 | 213 | 214 | 215 |
0%
216 |
Kerja Tim
217 |
218 |
219 |
220 |
221 | 222 | 223 | 224 |
225 |
226 |

Projek Saya

227 |
228 |
229 | projek1 230 |
231 |
Aplikasi Web
232 |

233 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem magnam cumque pariatur. 234 | Ad cum voluptate maiores impedit deleniti qui? Earum eveniet id dolor molestias qui omnis 235 | animi. Deserunt veritatis amet, ipsa totam id similique molestias beatae, assumenda 236 | sapiente, a nam. 237 |

238 | 239 |
240 |
241 |
242 | projek1 243 |
244 |
Aplikasi Mobile
245 |

246 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem magnam cumque pariatur. 247 | Ad cum voluptate maiores impedit deleniti qui? Earum eveniet id dolor molestias qui omnis 248 | animi. Deserunt veritatis amet, ipsa totam id similique molestias beatae, assumenda 249 | sapiente, a nam. 250 |

251 | 252 |
253 |
254 |
255 |
256 |
257 | 258 | 259 | 260 |
261 |
262 |

Kontak Saya

263 |

Mari Bekerja Sama

264 |

265 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa velit perferendis suscipit voluptates 266 | excepturi minima ducimus, iste repudiandae voluptatum. Cum velit asperiores incidunt quasi, 267 | reprehenderit dolore labore neque culpa, quisquam corrupti fugit error consequuntur voluptate repellat 268 | nostrum, sequi nihil provident? 269 |

270 |
271 |
  • fifanaufal10@gmail.com
    • 272 |
  • +6281223652490
    • 273 |
    274 |
    275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 |
    285 |
    286 |
    287 |
    288 | 289 | 290 | 291 | 292 | 293 |
    294 |
    295 |
    296 | 297 | 298 |
    299 |

    Dikembangkan Oleh Naufal FIFA © 2023

    300 |
    301 | 302 | 303 | 304 | 305 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /* ==========FONT GOOGLE========== */ 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap'); 3 | 4 | :root { 5 | --latar_belakang: #0f0e17; 6 | --warna1: #fffffe; 7 | --warna2: #a7a9be; 8 | --warna3: black; 9 | } 10 | 11 | * { 12 | margin: 0; 13 | padding: 0; 14 | box-sizing: border-box; 15 | font-family: 'Poppins', sans-serif; 16 | } 17 | 18 | body { 19 | color: var(--warna1); 20 | background: var(--latar_belakang); 21 | overflow-x: hidden; 22 | } 23 | 24 | /* ==========MENGHIAS BAGIAN TAJUK DIMULAI========== */ 25 | .tajuk { 26 | background: var(--latar_belakang); 27 | position: fixed; 28 | top: 0; 29 | left: 0; 30 | width: 100%; 31 | padding: 0 10%; 32 | display: flex; 33 | justify-content: space-between; 34 | align-items: center; 35 | z-index: 200; 36 | line-height: 0; 37 | } 38 | 39 | .logo { 40 | position: relative; 41 | text-decoration: none; 42 | font-weight: 600; 43 | font-size: 20px; 44 | color: var(--warna1); 45 | cursor: default; 46 | opacity: 0; 47 | animation: geserKanan 1s ease forwards; 48 | } 49 | 50 | .navigasi_bar a { 51 | text-decoration: none; 52 | display: inline-block; 53 | font-size: 18px; 54 | transition: .3s; 55 | margin: 30px; 56 | font-weight: 500; 57 | color: var(--warna1); 58 | opacity: 0; 59 | animation: geserAtas .5s ease forwards; 60 | animation-delay: calc(.2s * var(--i)); 61 | } 62 | 63 | .navigasi_bar a:hover { 64 | color: var(--warna2); 65 | } 66 | 67 | /* ==========MENGHIAS BAGIAN TAJUK DIAKHIRI========== */ 68 | 69 | /* ==========MENGHIAS BAGIAN BERANDA DIMULAI========== */ 70 | .beranda { 71 | position: relative; 72 | width: 100%; 73 | height: 100vh; 74 | display: flex; 75 | align-items: center; 76 | padding: 70px 10% 0; 77 | } 78 | 79 | .konten_beranda { 80 | max-width: 600px; 81 | position: relative; 82 | } 83 | 84 | .konten_beranda img { 85 | width: 900px; 86 | position: absolute; 87 | top: -230px; 88 | left: 550px; 89 | opacity: 0; 90 | animation: geserKiri 1s ease forwards; 91 | animation-delay: 2.5s; 92 | } 93 | 94 | .konten_beranda h3 { 95 | font-size: 35px; 96 | font-weight: 700; 97 | opacity: 0; 98 | animation: geserBawah 1s ease forwards; 99 | animation-delay: .7s; 100 | } 101 | 102 | .konten_beranda h3 span { 103 | color: var(--warna2); 104 | font-weight: 700; 105 | } 106 | 107 | .konten_beranda h3:nth-of-type(2) { 108 | margin-bottom: 30px; 109 | animation: geserAtas 1s ease forwards; 110 | animation-delay: .7s; 111 | } 112 | 113 | .konten_beranda h1 { 114 | font-size: 50px; 115 | font-weight: 700; 116 | margin: -3px 0; 117 | opacity: 0; 118 | animation: geserKanan 1s ease forwards; 119 | animation-delay: 1s; 120 | } 121 | 122 | .konten_beranda p { 123 | font-size: 20px; 124 | color: var(--warna2); 125 | opacity: 0; 126 | animation: geserKiri 1s ease forwards; 127 | animation-delay: 1s; 128 | } 129 | 130 | .beranda_sci a { 131 | display: inline-flex; 132 | justify-content: center; 133 | align-items: center; 134 | width: 35px; 135 | height: 35px; 136 | background: transparent; 137 | border: 2px solid var(--warna1); 138 | border-radius: 50%; 139 | font-size: 20px; 140 | color: var(--warna1); 141 | text-decoration: none; 142 | margin: 30px 10px 30px 0; 143 | transition: .5s ease; 144 | opacity: 0; 145 | animation: geserKiri 1s ease forwards; 146 | animation-delay: calc(.2s * var(--i)); 147 | } 148 | 149 | .beranda_sci a:hover { 150 | background: var(--warna1); 151 | color: var(--warna3); 152 | box-shadow: 0 0 20px var(--warna2); 153 | } 154 | 155 | .tombol1 { 156 | display: inline-block; 157 | background: var(--warna1); 158 | text-decoration: none; 159 | padding: 12px 28px; 160 | border-radius: 45px; 161 | font-size: 18px; 162 | color: var(--warna3); 163 | letter-spacing: 1px; 164 | font-weight: 600; 165 | opacity: 0; 166 | animation: geserAtas 1s ease forwards; 167 | animation-delay: 2s; 168 | box-shadow: 0 0 5px var(--warna1) 0 0 25px var(--warna1); 169 | } 170 | 171 | .tombol1:hover { 172 | box-shadow: 0 0 5px var(--warna1), 173 | 0 0 25px var(--warna1), 0 0 50px var(--warna1), 0 0 100px var(--warna1); 174 | } 175 | 176 | /* ==========MENGHIAS BAGIAN BERANDA DIAKHIRI========== */ 177 | 178 | /* ==========MENGHIAS BAGIAN TENTANG SAYA DIMULAI========== */ 179 | .tentang_saya { 180 | display: grid; 181 | grid-template-columns: repeat(2, 1fr); 182 | align-items: center; 183 | gap: 1.5rem; 184 | } 185 | 186 | .gambar img { 187 | padding-bottom: 20%; 188 | max-width: 680px; 189 | height: auto; 190 | width: 100%; 191 | border-radius: 8px; 192 | } 193 | 194 | .teks h2 { 195 | font-size: 60px; 196 | } 197 | 198 | .teks h2 span { 199 | color: var(--warna2); 200 | } 201 | 202 | .teks h4 { 203 | font-size: 20px; 204 | font-weight: 600; 205 | color: var(--warna1); 206 | line-height: 1.7; 207 | margin: 15px 0 30px; 208 | } 209 | 210 | .teks p { 211 | color: var(--warna2); 212 | font-size: 20px; 213 | line-height: 1.4; 214 | margin-bottom: 4rem; 215 | } 216 | 217 | /* ==========MENGHIAS BAGIAN TENTANG SAYA DIAKHIRI========== */ 218 | 219 | /* ==========MENGHIAS BAGIAN LAYANAN DIMULAI========== */ 220 | .layanan { 221 | color: var(--warna1); 222 | font-size: 20px; 223 | line-height: 1.4; 224 | margin-bottom: 10rem; 225 | } 226 | 227 | .sub_judul { 228 | text-align: center; 229 | font-size: 60px; 230 | padding-bottom: 70px; 231 | } 232 | 233 | .sub_judul span { 234 | color: var(--warna2); 235 | } 236 | 237 | .wadah { 238 | padding: 90px; 239 | } 240 | 241 | .daftar_layanan { 242 | display: grid; 243 | grid-template-columns: repeat(auto-fit, minmax(259px, 1fr)); 244 | grid-gap: 40px; 245 | margin-top: 50px; 246 | } 247 | 248 | .daftar_layanan div { 249 | background-color: transparent; 250 | padding: 40px; 251 | font-size: 13px; 252 | font-weight: 13px; 253 | border-radius: 20px; 254 | border-right: 10px; 255 | transition: background .5s, transform .5s; 256 | box-shadow: 1px 1px 20px var(--warna1), 1px 1px 30px var(--warna2); 257 | } 258 | 259 | .daftar_layanan div i { 260 | font-size: 50px; 261 | margin-bottom: 30px; 262 | } 263 | 264 | .daftar_layanan div h2 { 265 | font-size: 30px; 266 | font-weight: 500; 267 | margin-bottom: 15px; 268 | } 269 | 270 | .daftar_layanan div a { 271 | text-decoration: none; 272 | color: var(--warna2); 273 | font-size: 12px; 274 | margin-top: 20px; 275 | display: inline-block; 276 | } 277 | 278 | .baca { 279 | display: inline-block; 280 | padding: 12px 20px; 281 | background: var(--warna1); 282 | border-radius: 40px; 283 | font-size: 16px; 284 | color: black; 285 | letter-spacing: 1px; 286 | text-decoration: none; 287 | font-weight: 600; 288 | opacity: 0; 289 | animation: geserAtas 1s ease forwards; 290 | animation-delay: 2s; 291 | box-shadow: 0 0 5px var(--warna1), 0 0 25px var(--warna1); 292 | } 293 | 294 | .baca:hover { 295 | color: #0f0e17; 296 | box-shadow: 0 0 5px var(--warna1), 297 | 0 0 25px var(--warna1), 0 0 50px var(--warna1), 0 0 100px var(--warna1); 298 | } 299 | 300 | .daftar_layanan div:hover { 301 | transform: translateY(-10px); 302 | } 303 | 304 | /* ==========MENGHIAS BAGIAN LAYANAN DIAKHIRI========== */ 305 | 306 | /* ==========MENGHIAS BAGIAN KETERAMPILAN DIMULAI========== */ 307 | section { 308 | display: flex; 309 | flex-wrap: wrap; 310 | } 311 | 312 | .wadah2 { 313 | width: 600px; 314 | height: 500px; 315 | padding: 75px 90px; 316 | margin-left: 120px; 317 | } 318 | 319 | .tajuk2 { 320 | text-align: center; 321 | text-decoration: underline; 322 | text-underline-offset: 10px; 323 | text-decoration-thickness: 5px; 324 | margin-bottom: 50px; 325 | } 326 | 327 | .bar { 328 | font-size: 23px; 329 | } 330 | 331 | .teknis .bar { 332 | margin: 40px 0; 333 | } 334 | 335 | .teknis .bar:first-child { 336 | margin-top: 0; 337 | } 338 | 339 | .teknis .bar:last-child { 340 | margin-bottom: 0; 341 | } 342 | 343 | .teknis .bar .info span { 344 | font-size: 17px; 345 | font-weight: 500; 346 | animation: teksMuncul .5s 1s linear forwards; 347 | opacity: 0; 348 | } 349 | 350 | .teknis .bar .kemajuan { 351 | position: relative; 352 | border-radius: 10px; 353 | width: 100%; 354 | height: 5px; 355 | background-color: black; 356 | animation: animasi 1s cubic-bezier(1, 0, 0.5, 1) forwards; 357 | transform: scaleX(0); 358 | transform-origin: left; 359 | } 360 | 361 | .teknis .bar .kemajuan span { 362 | height: 100%; 363 | background-color: var(--warna2); 364 | position: absolute; 365 | border-radius: 10px; 366 | animation: animasi 1s 1s cubic-bezier(1, 0, 0.5, 1) forwards; 367 | transform: scaleX(0); 368 | transform-origin: left; 369 | } 370 | 371 | .kemajuan.html span { 372 | width: 70%; 373 | } 374 | 375 | .kemajuan.css span { 376 | width: 50%; 377 | } 378 | 379 | .kemajuan.javascript span { 380 | width: 10%; 381 | } 382 | 383 | .kemajuan.php span { 384 | width: 0%; 385 | } 386 | 387 | .kemajuan.react span { 388 | width: 0%; 389 | } 390 | 391 | .kemajuan.nodejs span { 392 | width: 0%; 393 | } 394 | 395 | .kemajuan.mongodb span { 396 | width: 0%; 397 | } 398 | 399 | .kemajuan.expressjs span { 400 | width: 0%; 401 | } 402 | 403 | .kemajuan span::after { 404 | position: absolute; 405 | padding: 1px 8px; 406 | background-color: black; 407 | color: white; 408 | font-size: 12px; 409 | border-radius: 3px; 410 | top: -28px; 411 | right: -20px; 412 | animation: teksMuncul .5s 1.5s linear forwards; 413 | opacity: 0; 414 | } 415 | 416 | .kemajuan.html span::after { 417 | content: "70%"; 418 | } 419 | 420 | .kemajuan.css span::after { 421 | content: "50%"; 422 | 423 | } 424 | 425 | .kemajuan.javascript span::after { 426 | content: "10%"; 427 | 428 | } 429 | 430 | .kemajuan.php span::after { 431 | content: "0%"; 432 | } 433 | 434 | .kemajuan.react span::after { 435 | content: "0%"; 436 | 437 | } 438 | 439 | .kemajuan.nodejs span::after { 440 | content: "0%"; 441 | } 442 | 443 | .kemajuan.mongodb span::after { 444 | content: "0%"; 445 | } 446 | 447 | .kemajuan.expressjs span::after { 448 | content: "0%"; 449 | } 450 | 451 | .kemajuan span::before { 452 | content: ""; 453 | position: absolute; 454 | width: 0; 455 | height: 0; 456 | border: 7px solid transparent; 457 | border-bottom-width: 0px; 458 | border-right-width: 0px; 459 | border-top-color: black; 460 | top: -10px; 461 | right: 0; 462 | animation: teksMuncul .5s 1.5s linear forwards; 463 | } 464 | 465 | .radial { 466 | width: 100%; 467 | display: flex; 468 | flex-wrap: wrap; 469 | justify-content: space-evenly; 470 | align-items: flex-start; 471 | } 472 | 473 | .radial .bar_radial { 474 | width: 50%; 475 | height: 170px; 476 | margin-bottom: 10px; 477 | position: relative; 478 | } 479 | 480 | .radial .bar_radial svg { 481 | position: absolute; 482 | top: 50%; 483 | left: 50%; 484 | transform: translate(-50%, -50%) rotate(-90deg); 485 | width: 120px; 486 | height: 160px; 487 | } 488 | 489 | .radial .bar_radial .kemajuan2 { 490 | stroke-width: 10; 491 | stroke: black; 492 | fill: transparent; 493 | stroke-dasharray: 502; 494 | stroke-dashoffset: 502; 495 | stroke-linecap: round; 496 | animation: barGerak 1s linear forwards; 497 | } 498 | 499 | .lokasi { 500 | stroke-width: 10; 501 | stroke: var(--warna2); 502 | fill: transparent; 503 | stroke-dasharray: 502; 504 | stroke-dashoffset: 502; 505 | stroke-linecap: round; 506 | } 507 | 508 | .radial-1 { 509 | animation: animasiRadial1 1s 1s linear forwards; 510 | } 511 | 512 | .radial-2 { 513 | animation: animasiRadial2 1s 1s linear forwards; 514 | } 515 | 516 | .radial-3 { 517 | animation: animasiRadial3 1s 1s linear forwards; 518 | } 519 | 520 | .radial-4 { 521 | animation: animasiRadial4 1s 1s linear forwards; 522 | } 523 | 524 | .bar_radial .persentase { 525 | position: absolute; 526 | top: 50%; 527 | left: 50%; 528 | transform: translate(-50%, -50%); 529 | font-size: 17px; 530 | font-weight: 500; 531 | animation: teksMuncul .5s 1s linear forwards; 532 | opacity: 0; 533 | } 534 | 535 | .bar_radial .teks { 536 | width: 100%; 537 | position: absolute; 538 | text-align: center; 539 | left: 50%; 540 | bottom: -5px; 541 | transform: translateX(-50%); 542 | font-size: 17px; 543 | font-weight: 500; 544 | animation: teksMuncul .5s 1s linear forwards; 545 | opacity: 0; 546 | } 547 | 548 | /* ==========MENGHIAS BAGIAN KETERAMPILAN DIAKHIRI========== */ 549 | 550 | /* ==========MENGHIAS BAGIAN PROJEK DIMULAI========== */ 551 | .teks_utama { 552 | padding-top: 130px; 553 | margin-top: 200px; 554 | } 555 | 556 | .teks_utama h2 { 557 | font-size: 60px; 558 | line-height: 1; 559 | text-align: center; 560 | } 561 | 562 | .teks_utama h2 span { 563 | color: var(--warna2); 564 | } 565 | 566 | .konten_projek { 567 | display: grid; 568 | grid-template-columns: repeat(auto-fit, minmax(350px, auto)); 569 | gap: 10px; 570 | margin: 30px 0; 571 | } 572 | 573 | .baris { 574 | position: relative; 575 | overflow: hidden; 576 | border-radius: 8px; 577 | cursor: pointer; 578 | } 579 | 580 | .baris img { 581 | width: 100%; 582 | border-radius: 8px; 583 | display: block; 584 | transition: transform .5s; 585 | } 586 | 587 | .lapisan { 588 | width: 100%; 589 | height: 0; 590 | background: linear-gradient(rgba(0, 0, 0, 0.1), #fffffe); 591 | position: absolute; 592 | border-radius: 8px; 593 | left: 0; 594 | bottom: 0; 595 | overflow: hidden; 596 | display: flex; 597 | flex-direction: column; 598 | align-items: center; 599 | justify-content: center; 600 | text-align: center; 601 | padding: 0 40px; 602 | transition: height .5s; 603 | } 604 | 605 | .lapisan h5 { 606 | color: black; 607 | font-size: 20px; 608 | font-weight: 600; 609 | margin-bottom: 15px; 610 | } 611 | 612 | .lapisan p { 613 | color: black; 614 | font-size: 1rem; 615 | line-height: 1.8; 616 | } 617 | 618 | .lapisan a { 619 | text-decoration: none; 620 | } 621 | 622 | .lapisan i { 623 | color: #ff004f; 624 | margin-top: 20px; 625 | font-size: 20px; 626 | background: var(--warna2); 627 | width: 60px; 628 | height: 60px; 629 | display: flex; 630 | align-items: center; 631 | justify-content: center; 632 | border-radius: 50%; 633 | } 634 | 635 | .baris:hover img { 636 | transform: scale(1.1); 637 | } 638 | 639 | .baris:hover .lapisan { 640 | height: 100%; 641 | } 642 | 643 | /* ==========MENGHIAS BAGIAN PROJEK DIAKHIRI========== */ 644 | 645 | /* ==========MENGHIAS BAGIAN KONTAK DIMULAI========== */ 646 | .kontak { 647 | padding-top: 70px; 648 | display: grid; 649 | grid-template-columns: repeat(2, 1fr); 650 | align-items: center; 651 | gap: 3rem; 652 | padding-left: 30px; 653 | margin-top: 130px; 654 | } 655 | 656 | .teks_kontak h2 { 657 | font-size: 90px; 658 | line-height: 1; 659 | align-items: center; 660 | } 661 | 662 | .teks_kontak h2 span { 663 | color: var(--warna2); 664 | } 665 | 666 | .teks_kontak h4 { 667 | margin: 15px 0; 668 | color: var(--warna1); 669 | font-size: 20px; 670 | font-weight: 600; 671 | } 672 | 673 | .teks_kontak p { 674 | color: var(--warna2); 675 | font-size: 20px; 676 | line-height: 30px; 677 | margin-bottom: 2rem; 678 | } 679 | 680 | .daftar_kontak { 681 | margin-bottom: 3rem; 682 | } 683 | 684 | .daftar_kontak li { 685 | margin-bottom: 10px; 686 | display: block; 687 | } 688 | 689 | .daftar_kontak i { 690 | display: inline-block; 691 | color: var(--warna2); 692 | font-size: 20px; 693 | font-weight: 600; 694 | transition: all .40s ease; 695 | } 696 | 697 | .daftar_kontak li a:hover { 698 | transform: scale(1.01) translateY(-5px); 699 | color: var(--warna2); 700 | } 701 | 702 | .ikon_kontak i { 703 | display: inline-flex; 704 | justify-content: center; 705 | align-items: center; 706 | width: 40px; 707 | height: 40px; 708 | background: transparent; 709 | border: 2px solid var(--warna2); 710 | border-radius: 50%; 711 | font-size: 20px; 712 | color: var(--warna2); 713 | text-decoration: none; 714 | margin: 30px 15px 10px 0; 715 | transition: .5s ease; 716 | opacity: 0; 717 | animation: geserKiri 1s ease forwards; 718 | animation-delay: calc(.2s * var(--i)); 719 | } 720 | 721 | .ikon_kontak i:hover { 722 | background: var(--warna1); 723 | color: var(--warna3); 724 | box-shadow: 0 0 20px var(--warna2); 725 | } 726 | 727 | .daftar_kontak i:hover { 728 | background: var(--warna2); 729 | color: var(--warna1); 730 | box-shadow: 0 0 20px var(--warna2); 731 | } 732 | 733 | .formulir_kontak form { 734 | position: relative; 735 | } 736 | 737 | .formulir_kontak form input, 738 | form textarea { 739 | border: none; 740 | outline: none; 741 | width: 90%; 742 | padding: 10px; 743 | background: var(--warna3); 744 | color: white; 745 | font-size: 1rem; 746 | font-weight: 600; 747 | margin-bottom: .5rem; 748 | border-radius: .5rem; 749 | } 750 | 751 | .formulir_kontak textarea { 752 | resize: none; 753 | height: 220px; 754 | } 755 | 756 | .formulir_kontak form .kirim { 757 | display: inline-block; 758 | padding: 14px 60px; 759 | background: var(--warna1); 760 | border-radius: 40px; 761 | font-size: 18px; 762 | color: black; 763 | letter-spacing: 1px; 764 | text-decoration: none; 765 | font-weight: 600; 766 | opacity: 0; 767 | animation: geserAtas 1s ease forwards; 768 | animation-delay: 2s; 769 | box-shadow: 0 0 5px var(--warna1), 0 0 25px var(--warna1); 770 | } 771 | 772 | .formulir_kontak form .kirim:hover { 773 | box-shadow: 0 0 5px var(--warna1), 774 | 0 0 25px var(--warna1), 0 0 50px var(--warna1), 0 0 100px var(--warna1); 775 | } 776 | 777 | /* ==========MENGHIAS BAGIAN KONTAK DIAKHIRI========== */ 778 | 779 | /* ==========MENGHIAS BAGIAN HAKCIPTA========== */ 780 | .hak_cipta { 781 | width: 100%; 782 | text-align: center; 783 | padding: 25px 0; 784 | background: var(--latar_belakang); 785 | font-weight: 300; 786 | margin-top: 70px; 787 | } 788 | 789 | .atas { 790 | position: fixed; 791 | bottom: 2.1rem; 792 | right: 2.1rem; 793 | } 794 | 795 | .atas i { 796 | color: var(--warna1); 797 | background-color: var(--latar_belakang); 798 | font-size: 20px; 799 | padding: 10px; 800 | border-radius: .5rem; 801 | } 802 | 803 | /* ==========MENGHIAS BAGIAN HAKCIPTA========== */ 804 | 805 | /* ==========KUMPULAN ANIMASI DIMULAI========== */ 806 | @keyframes geserKanan { 807 | 0% { 808 | transform: translateX(-100px); 809 | opacity: 0; 810 | } 811 | 812 | 100% { 813 | transform: translateX(0); 814 | opacity: 1; 815 | } 816 | } 817 | 818 | @keyframes geserKiri { 819 | 0% { 820 | transform: translateX(100px); 821 | opacity: 0; 822 | } 823 | 824 | 100% { 825 | transform: translateX(0); 826 | opacity: 1; 827 | } 828 | } 829 | 830 | @keyframes geserAtas { 831 | 0% { 832 | transform: translateY(100px); 833 | opacity: 0; 834 | } 835 | 836 | 100% { 837 | transform: translateY(0); 838 | opacity: 1; 839 | } 840 | } 841 | 842 | @keyframes geserBawah { 843 | 0% { 844 | transform: translateY(-100px); 845 | opacity: 0; 846 | } 847 | 848 | 100% { 849 | transform: translateY(0); 850 | opacity: 1; 851 | } 852 | } 853 | 854 | @keyframes animasi { 855 | 100% { 856 | transform: scaleX(1); 857 | } 858 | } 859 | 860 | @keyframes teksMuncul { 861 | 100% { 862 | opacity: 1; 863 | } 864 | } 865 | 866 | @keyframes barGerak { 867 | 100% { 868 | stroke-dashoffset: -1; 869 | } 870 | } 871 | 872 | @keyframes animasiRadial1 { 873 | 100% { 874 | stroke-dashoffset: 500; 875 | } 876 | } 877 | 878 | @keyframes animasiRadial2 { 879 | 100% { 880 | stroke-dashoffset: 500; 881 | } 882 | } 883 | 884 | @keyframes animasiRadial3 { 885 | 100% { 886 | stroke-dashoffset: 500; 887 | } 888 | } 889 | 890 | @keyframes animasiRadial4 { 891 | 100% { 892 | stroke-dashoffset: 500; 893 | } 894 | } 895 | 896 | /* ==========KUMPULAN ANIMASI DIAKHIRI========== */ --------------------------------------------------------------------------------