-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
205 lines (202 loc) · 16.8 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
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="en" style="scroll-behavior: smooth;">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans&display=swap" rel="stylesheet">
<title> Portofolio </title>
</head>
<body class=" overflow-x-hidden" style="font-family: 'DM Sans', sans-serif;">
<!-- Page 1 -->
<header class="bg-fixed">
<div class="w-screen absolute h-screen cursor-default" id="background">
<section>
<div class="invisible sm:visible absolute left-2/4 -top-80 ml-7 2xl:ml-48" style="width: 497px; height: 430px; background: #28475C; transform: rotate(40deg);"></div>
<div class="invisible xl:visible 2xl:invisible absolute left-2/4 bottom-0" style="width: 0px; height: 0px; margin-left: 4.5rem; border-bottom: 250px solid #28475C; border-left: solid 250px transparent; border-right: solid 0px transparent; background: #1A2F4B;"></div>
</section>
<section class="flex justify-center w-full">
<img src="./image/myimage.png" data-aos="slide-left" data-aos-duration="2000" alt="zaidanrafi" class="w-1/2 absolute bottom-0 sm:right-0 sm:w-2/5">
</section>
<section data-aos="fade" class="pl-20 w-5/6 text-center text-base mt-7 sm:text-left sm:mt-24 2xl:mt-32 2xl:text-xl text-gray-100">
<p class=" ml-1 text-lg"> Hi, There! </p>
<p class=" text-4xl mt-10 sm:mt-5 sm:text-7xl md:text-8xl 2xl:leading-none 2xl:text-9xl 2xl:mt-20">I'm<br> Zaidan Rafi</p>
<p class=" mt-3 sm:mt-3 sm:w-2/3 2xl:mt-10"> An electrical engineer student with interest in web app development. </p>
<p data-aos="slide-right" data-aos-duration="3000" class=" text-lg mt-14 w-full sm:mt-16 sm:text-lg md:text-xl 2xl:mt-48 2xl:text-2xl"> Want to know more about me? <br>
<button onClick="document.getElementById('background2').scrollIntoView();" class=" cursor-pointer mt-5 sm:text-lg border-2 px-3 py-1 rounded-md bg-blue-100 bg-opacity-0 hover:bg-opacity-10 transition-all duration-200" style="border-color: #2F8886;">Get Started</button>
</p>
</section>
</div>
</header>
<!-- Page 2 -->
<section>
<div class="w-screen h-screen pl-3"></div>
<div id="background2" class="w-screen h-auto py-7 pb-1 px-5 bg-fixed">
<section class="grid 2xl:h-screen grid-cols-1 sm:grid-cols-2 md:grid-cols-4 pl-2 pr-7 gap-7 mb-6 h-full w-full justify-center">
<!-- About Me -->
<div data-aos="fade-right" class=" text-gray-100 rounded-md pb-5 bg-gray-50 px-2 w-full h-auto sm:row-span-3" style="background: #2F8886;">
<p class=" my-8 text-2xl text-center">About Me</p>
<!--Photo-->
<div class="flex w-full justify-center">
<img src="./image/myimage2.jpg" alt="zaidanrafi" class=" w-36 rounded-full shadow-lg">
</div>
<!--Content-->
<p class="text-center text-xl my-5">Zaidan Rafi</p>
<p class=" text-center my-5 font-bold md:hidden lg:block">"Keep Your Eyes On The Prize"</p>
<p class=" text-center mt-1">An <span class=" inline md:hidden xl:inline"> Undergraduate</span> Electrical Engineering student at Brawijaya University with an interest in Web App development. </p>
<!--University-->
<div class="flex justify-center mt-7">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
<span class="ml-2 md:hidden lg:inline ">Brawijaya University</span> <span class="ml-2 hidden md:inline lg:hidden">UB</span>
</div>
<!--Home Town-->
<div class="flex mt-2 justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span class="ml-2 md:hidden lg:inline ">Gresik, Indonesia</span> <span class="ml-2 hidden md:inline lg:hidden">Gresik</span>
</div>
</div>
<!-- Contact -->
<div data-aos="fade" class=" rounded-md bg-gray-50 w-full text-gray-100 h-full md:col-span-2 pb-10 px-5 sm:px-3" style="background: #2F8886;">
<p class="text-center text-2xl my-8 mb-14">Contact</p>
<section class="grid grid-cols-1 sm:grid-cols-2 w-full gap-y-5 md:gap-y-10 gap-x-4 items-stretch">
<!--Instagram-->
<div class="md:px-5">
<a href="https://www.instagram.com/zaidanrafi_" target="_blank" rel="noopener noreferrer" class="flex justify-center py-3 rounded-lg hover:opacity-80 shadow-xl transition-all duration-200" style="background: #1A2F4B;">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
</svg>
<span href="https://www.instagram.com/zaidanrafi_" class="ml-2">Instagram</span>
</a>
</div>
<!--Twitter-->
<div class="md:px-5">
<a href="https://www.twitter.com/zaidanrafi_" target="_blank" rel="noopener noreferrer" class="flex justify-center py-3 rounded-lg hover:opacity-80 shadow-xl transition-all duration-200" style="background: #1A2F4B">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
</svg>
<span class="ml-2">Twitter</span>
</a>
</div>
<!--LinkedIn-->
<div class="md:px-5">
<a href="https://www.linkedin.com/in/zaidanrafi" target="_blank" rel="noopener noreferrer" class="flex shadow-xl justify-center py-3 rounded-lg hover:opacity-80 transition-all duration-200" style="background: #1A2F4B">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>
<span class="ml-2">LinkedIn</span>
</a>
</div>
<!--Github-->
<div class="md:px-5">
<a href="https://www.github.com/zaidanrafi" target="_blank" rel="noopener noreferrer" class="flex justify-center shadow-xl py-3 rounded-lg hover:opacity-80 transition-all duration-200" style="background: #1A2F4B">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
<span class="ml-2">Github</span>
</a>
</div>
</section>
</div>
<!-- Skills -->
<div data-aos="fade-left" class=" rounded-md pb-5 bg-gray-50 w-full text-gray-100 text-center h-full sm:row-span-2 md:row-span-1" style="background: #2F8886;">
<p class="text-center text-2xl my-8 mb-10">Skills</p>
<div class="px-8">
<ul class=" py-3 px-3 rounded-lg shadow-lg" style="background: #1A2F4B">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>tailwind</li>
<li>Vue.js</li>
<li>Firebase</li>
</ul>
</div>
</div>
<!-- Favorite Movies -->
<div data-aos="fade-up" class=" rounded-md px-5 bg-gray-50 w-full text-gray-100 text-center h-full md:row-span-2 md:col-span-3 sm:col-span-2 " style="background: #2F8886;">
<p class="text-center text-2xl mt-4 mb-6 2xl:mb-14 2xl:mt-8">Favorite Movies</p>
<div id="scroll" class=" flex h-2/3 2xl:h-3/6 my-3 pb-3 overflow-x-scroll w-auto gap-32 sm:gap-24 lg:gap-10" >
<!--Burried-->
<section class="h-auto w-1/3 mr-20 sm:mr-0">
<div class="h-auto rounded-lg">
<img src="https://cdn-2.tstatic.net/wartakota/foto/bank/images/film-buried-di-trans-tv.jpg" alt="" class=" w-auto rounded-lg shadow-lg" style="min-width: 250px;">
</div>
</section>
<!--Sanctum-->
<section class="h-auto w-1/3 mr-20 sm:mr-0">
<div class=" h-auto">
<img src="https://www.flixwatch.co/wp-content/uploads/70142826-960x540.jpg.webp" alt="" class=" w-auto rounded-lg shadow-lg" style="min-width: 250px;">
</div>
</section>
<!--The Platform-->
<section class="h-auto w-1/3 mr-20 sm:mr-0">
<div class=" h-auto">
<img src="https://i1.wp.com/mariviu.com/wp-content/uploads/2020/04/the-platform-netflix-review_gfhltf.jpg?w=640&ssl=1" alt="" class=" w-auto rounded-lg shadow-lg" style="min-width: 250px;">
</div>
</section>
<!--What Happened To Monday-->
<section class="h-auto w-1/3 mr-20 sm:mr-0">
<div class=" h-auto">
<img src="https://captainameraka.files.wordpress.com/2018/02/whtm_header.jpg" alt="" class=" w-auto rounded-lg shadow-lg" style="min-width: 250px;">
</div>
</section>
<!--127 Hours-->
<section class="h-auto w-1/3">
<div class=" h-auto">
<img src="https://therabbitfilm.files.wordpress.com/2012/09/127-hours-poster-review-no-1.png" alt="" class=" w-auto rounded-lg shadow-lg" style="min-width: 250px;">
</div>
</section>
</div>
</div>
</section>
</div>
</section>
</body>
</html>
<script>
AOS.init({
easing: 'ease-in-out',
duration: 1000,
});
console.log("ga bisa ui kak :(");
</script>
<style>
#background{
background:linear-gradient(90deg,#1A2F4B 75%, #28475C 25%);
border-bottom: 5px solid #1A2F4B;
}
#background2{
background: linear-gradient(250deg, #28475C 20%, #1A2F4B 62%);
}
#scroll::-webkit-scrollbar{
height: 15px;
scroll-behavior: smooth;
}
#scroll::-webkit-scrollbar-track{
background-color: honeydew;
border-radius: 50px;
}
#scroll::-webkit-scrollbar-thumb {
background-color: #84C69B;
border-radius: 50px;
}
#scroll::-webkit-scrollbar-thumb:hover {
background-color: #79b48e;
}
@media screen and (max-width: 640px) {
#background {
background: #1A2F4B;
};
}
</style>