-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
199 lines (191 loc) · 6.63 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
<!-- author : Handika Putra -->
<!-- github account : https://github.com/HanPutra -->
<!-- repository : https://github.com/HanPutra/s-portfolio -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="Handika Putra s-portfolio" />
<meta
name="description"
content="Handika Putra's portfolio showcases web development projects, technical skills, and programming expertise. Explore my work and connect with me for opportunities."
/>
<meta
name="keywords"
content="handika putra, handikaputra, HANDIKAPUTRA, HandikaPutra, Handika Putra, HANDIKA PUTRA, hanputra, HanPutra, HANPUTRA"
/>
<meta name="robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="English" />
<meta name="author" content="Handika Putra" />
<!-- Favicon -->
<link rel="icon" href="assets/favicon/logo-hp-mix-text.svg" type="image/svg+xml" />
<link rel="alternate icon" href="assets/favicon/logo-hp-mix-text.png" type="image/png" />
<!-- My Css -->
<link rel="stylesheet" href="assets/css/style.css" />
<title>Handika Putra s-portfolio</title>
</head>
<body>
<!-- header -->
<header>
<img src="assets/img/logo-hp-dark-text.svg" alt="Logo HP" />
<h1>Handika Putra</h1>
</header>
<!-- end of header -->
<!-- hamburger-menu -->
<div class="hamburger-button">
<div class="hamburger-icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- end of hamburger-menu -->
<!-- nav -->
<nav>
<ul>
<li>
<a href="#about">Home</a>
</li>
<li>
<a href="#skills">Skills</a>
</li>
<li>
<a href="#projects">Projects</a>
</li>
<li>
<a href="#certifications">Certifications</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
<!-- end of nav -->
<!-- main -->
<main>
<!-- about -->
<div class="about" id="about">
<div class="about-text">
<p>
Hi, I'm Handika Putra <br />
a web developer and linux enthusiast. <br />
I love coding and building web applications. <br />
My skills include HTML, CSS, and JavaScript. <br />
I'm passionate about learning new technologies and improving my craft.
</p>
</div>
<div class="about-image">
<img src="assets/img/logo-hp-dark-text.svg" alt="logo HP" />
<img src="assets/img/handika-java.png" alt="Handika use Java Clothes" />
</div>
</div>
<!-- end of about -->
<!-- skills -->
<div class="skills" id="skills">
<h2>Skills</h2>
<div class="sub-skills-title">
<h3>Tech Stack</h3>
<hr />
</div>
<div class="sub-skills-desc">
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
</div>
<div class="sub-skills-title">
<h3>Tools Used</h3>
<hr />
</div>
<div class="sub-skills-desc">
<p>Git</p>
<p>Github</p>
<p>Figma</p>
<p>VSCode</p>
</div>
</div>
<!-- end of skills -->
<!-- projects -->
<div class="projects" id="projects">
<h2>Projects</h2>
<div class="projects-image">
<img src="assets/img/projects/rezero.png" alt="rezero image gallery" />
<p>ReZero Image Gallery</p>
</div>
</div>
<!-- end of projects -->
<!-- certifications -->
<div class="certifications" id="certifications">
<h2>Certifications</h2>
<div class="cert-container">
<div class="cert-image">
<img
src="assets/img/certifications/algoritmaDanPemrogramanDasar.png"
alt="Algoritma dan Pemrograman Dasar"
/>
<p>Algoritma dan Pemrograman Dasar</p>
</div>
<div class="cert-image">
<img src="assets/img/certifications/belajarDasarAwsCloud.png" alt="Belajar Dasar AWS Cloud" />
<p>Belajar Dasar AWS Cloud</p>
</div>
<div class="cert-image">
<img src="assets/img/certifications/belajarDasarCss.png" alt="Belajar Dasar CSS" />
<p>Belajar Dasar CSS</p>
</div>
<div class="cert-image">
<img src="assets/img/certifications/belajarDasarHtml.png" alt="Belajar Dasar HTML" />
<p>Belajar Dasar HTML</p>
</div>
<div class="cert-image">
<img src="assets/img/certifications/belajarDasarPemrogramanWeb.png" alt="Belajar Dasar Pemrograman Web" />
<p>Belajar Dasar Pemrograman Web</p>
</div>
<div class="cert-image">
<img src="assets/img/certifications/belajarGitDasar.png" alt="Belajar Git Dasar" />
<p>Belajar Git Dasar</p>
</div>
<div class="cert-image">
<img src="assets/img/certifications/belajarJavascript.png" alt="Belajar JavaScript" />
<p>Belajar JavaScript</p>
</div>
<div class="cert-image">
<img
src="assets/img/certifications/belajarMenggunakanTerminalAtauCmdUntukDevelopment.png"
alt="Belajar Menggunakan Terminal atau CMD untuk Pemula"
/>
<p>Belajar Menggunakan Terminal atau CMD untuk Pemula</p>
</div>
<div class="cert-image">
<img
src="assets/img/certifications/mahirMenggunakanTextEditorBuatPemula.png"
alt="Mahir Menggunakan Text Editor buat Pemula"
/>
<p>Mahir Menggunakan Text Editor buat Pemula</p>
</div>
<div class="cert-image">
<img src="assets/img/certifications/mengenalPemrogramanKomputer.png" alt="Mengenal Pemrograman Komputer" />
<p>Mengenal Pemrograman Komputer</p>
</div>
</div>
</div>
<!-- end of certifications -->
</main>
<!-- end of main -->
<!-- footer -->
<footer>
<!-- contact -->
<div class="contact" id="contact">
<h2>Contact</h2>
<p>[email protected]</p>
</div>
<!-- end of contact -->
<p class="copy">© CopyRight 2024. <a href="#">Handika Putra</a>. All Right Reserved.</p>
</footer>
<!-- end of footer -->
<!-- My Js -->
<script src="assets/js/script.js"></script>
</body>
</html>