This repository has been archived by the owner on Jul 6, 2024. It is now read-only.
forked from hanifptw/hanifptw.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
156 lines (153 loc) · 5.45 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hanifptw</title>
<meta name="Hanifptw Portfolio" content="I'm an UI/UX Designer" />
<link rel="stylesheet" href="index.css" />
<!-- embed font poppins -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
hrelass="rounded-t-xl w-auto h-40"
f="https://fonts.gstatic.com"
crossorigin
/>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
</head>
<body class="body max-w-screen-md">
<header class="header">
<a href="/"><img alt="hanifptw-logo" src="images/hanif-logo.png" /></a>
<ul class="nav-menu">
<li><a class="nav-menu-list" href="/experience/">Experience</a></li>
<li><a class="nav-menu-list" href="/project/">Projects</a></li>
<li><a class="nav-menu-list" href="/contact/">Contact</a></li>
</ul>
</header>
<main>
<section>
<div><h1>Halo I'm Hanifptw</h1></div>
<div><img class="banner-img" src="/images/banner-hanifptw.jpg" /></div>
<div>
<p>
I’m an <span class="bold">UI/UX Designer</span> with over 2 year of
learning experience and still improve my skills.
</p>
<p>
Contributes as an event conceptor in the UX Design Online Community
called Design Jam Indonesia. With the goal to improve the UX
designer experience virtually.
</p>
<p>
Dedicated to lead several organizations around me : campus
organizations, disaster volunteers, youth mosques, mosque
administrators etc.
</p>
</div>
</section>
<hr />
<section>
<div><h3>Featured Projects</h3></div>
<div>
<div class="ls-project">
<div class="ls-project-each">
<img class="img-full-width" src="/images/koperasi-upn.jpg" />
<div class="ls-project-each-copy">
<p class="bold title-project">Koperasi UPN Website</p>
<p class="desc-project">
Provides services, news, articles and product promos from
Koperasi UPN
</p>
</div>
</div>
<div class="ls-project-each">
<img class="img-full-width" src="/images/si-nau.jpg" />
<div class="ls-project-each-copy">
<p class="bold title-project">Si-Nau</p>
<p class="desc-project">
Online Learning App, platform for learning design, programing
and student discussion
</p>
</div>
</div>
</div>
<div class="ls-project">
<div class="ls-project-each">
<img class="img-full-width" src="/images/pasarpolis.jpg" />
<div class="ls-project-each-copy">
<p class="bold title-project">Empoyer Benefit PasarPolis</p>
<p class="desc-project">
B2B insurance landing page in Indonesia to provide various
insurance for employees
</p>
</div>
</div>
<div class="ls-project-each">
<img class="img-full-width" src="/images/sisfo-community.jpg" />
<div class="ls-project-each-copy">
<p class="bold title-project">Sisfo Community</p>
<p class="desc-project">
Activity Scheduling System and Integrate all community
activities in one platform
</p>
</div>
</div>
</div>
</div>
</section>
<hr />
<section class="cta-section">
<div>
<h3>Interested? Lets Work Together!</h3>
<div class="desc-cta-section">
Please tell what project you want to do
</div>
</div>
<div>
<a
class="btn-cta"
qwe
href="mailto:[email protected]"
target="_blank"
>
<div class="icon-btn-cta"><img src="/images/email-icon.svg" /></div>
<div class="btn-copy">Lets Talk</div>
</a>
</div>
</section>
</main>
<footer>
<p class="copy-footer">©2024 Brilliant Hanif Almubarak</p>
<ul class="ls-footer">
<li>
<a href="https://instagram.com/hanifptw/" target="_blank">
<img
class="btn-footer"
src="/images/instagram.svg"
alt="instagram"
/>
</a>
</li>
<li>
<a href="https://linkedin.in/brillianthanif/" target="_blank">
<img class="btn-footer" src="/images/linkedin.svg" alt="linkedin"
/></a>
</li>
<li>
<a href="https://t.me/hanifptw/" target="_blank">
<img class="btn-footer" src="/images/telegram.svg" alt="telegram" />
</a>
</li>
<li>
<a href="https://medium.com/brillianthanif" target="_blank">
<img class="btn-footer" src="/images/medium.svg" alt="medium" />
</a>
</li>
</ul>
</footer>
</body>
</html>