-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
244 lines (231 loc) · 12.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
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Muhammad Refa Utama Putra - Halaman Pribadi</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- OwlCarousel2 CSS -->
<link href="owlcarousel2/assets/owl.carousel.min.css" rel="stylesheet">
<link href="owlcarousel2/assets/owl.theme.default.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
a.icon {
text-decoration: none;
}
</style>
</head>
<body class="bg-light">
<!-- Navigation -->
<nav class="site-header py-1">
<div class="container d-flex flex-column flex-md-row justify-content-end">
<a class="py-2 px-2 d-none d-md-inline-block" href="#tentang">Tentang</a>
<a class="py-2 px-2 d-none d-md-inline-block" href="#portofolio">Portofolio</a>
<a class="py-2 px-2 d-none d-md-inline-block" href="#catatan">Catatan</a>
</div>
</nav>
<!-- Header -->
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-dark text-white">
<div class="col-md-5 p-lg-5 mx-auto my-5">
<h1 class="font-weight-normal">Muhammad Refa Utama Putra</h1>
<p class="lead font-weight-normal">Sebuah halaman pribadi</p>
<p class="lead font-weight-normal small">(alias <em>personal page</em>)</p>
</div>
</div>
<!-- Content -->
<div class="container-fluid">
<div class="d-md-flex row my-md-3 pl-md-3">
<div class="col-md-3 mr-md-3">
<div class="my-3 py-3">
<h2 class="text-right" id="tentang">Tentang saya</h2>
</div>
</div>
<div class="col mr-md-3">
<div class="my-3 py-3 px-2">
<p>
Seorang penulis kode yang senang berbagi mulai dari hal penting hingga tidak penting sekalipun.
</p>
<p>
Tertarik dengan hal baru khususnya yang berhubungan dengan bidang elektronika dan teknologi, yang secara tidak langsung memengaruhi karya seperti kode, tulisan, hingga video <del>(yang tidak ada hubungannya sama sekali)</del>
</p>
<p>
Pada Daftar Riwayat Hidup, tertulis :<br>
Nama saya Muhammad Refa Utama Putra. Linux, mikrokontroler, dan <em>single board computer</em> bukan hal asing bagi saya. Menulis baris baris kode dan mengaplikasikannya merupakan lingkungan yang biasa saya temui. Sesekali saya bermain dengan web jika dibutuhkan.
</p>
</div>
</div>
</div>
<div class="d-md-flex row my-md-3 pl-md-3">
<div class="col-md-3 mr-md-3">
<div class="my-3 py-3">
<h2 class="text-right" id="portofolio">Portofolio</h2>
</div>
</div>
<div class="col mr-md-3">
<div class="my-3 py-3 px-2">
<p>Beberapa keisengan yang membuahkan hasil</p>
<div class="owl-carousel owl-theme">
<div class="item">
<div class="card">
<div class="card-body">
<p class="card-title">
<strong>Halaman Pribadi</strong><br>
2020
</p>
<p class="card-text">
Sebuah halaman yang berisikan deskripsi singkat, portofolio, dan tulisan lainnya. Dengan kata lain, halaman yang sedang anda lihat saat ini
</p>
</div>
</div>
</div>
<div class="item">
<div class="card">
<div class="card-body">
<p class="card-title">
<strong>Peta Digital untuk Menunjukkan Posisi Kendaraan dan Kereta Api Menuju Perlintasan secara Realtime</strong><br>
Juni 2017
</p>
<p class="card-text">
Sistem peringatan pengemudi cerdas yang dibuat menggunakan Raspberry Pi
</p>
</div>
</div>
</div>
<div class="item">
<div class="card">
<div class="card-body">
<p class="card-title">
<strong><em>NFC Vending Machine</em></strong><br>
Januari 2017
</p>
<p class=card-text>
<em>Vending Machine</em> yang menggunakan gawai dengan teknologi NFC untuk melakukan pembelian dan pengambilan barang
</p>
</div>
</div>
</div>
<div class="item">
<div class="card">
<div class="card-body">
<p class="card-title">
<strong>Pratiwindya Nepku</strong><br>
April 2016
</p>
<p class=card-text>
Robot pemadam api yang dibuat untuk mengikuti Kontes Robot Indonesia (KRI) Regional 2 kategori KRPAI mewakili POLBAN
</p>
</div>
</div>
</div>
<div class="item">
<div class="card">
<div class="card-body">
<p class="card-title">
<strong>Sailfish OS <em>port</em> untuk Moto G 2013</strong><br>
September 2015
</p>
<p class=card-text>
Dibuat berdasarkan panduan dari <em>Hardware Adaptation Development Kit</em> (HADK) dari Sailfish dan #sailfishos-porters di IRC
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-md-flex row my-md-3 pl-md-3">
<div class="col-md-3 mr-md-3">
<div class="my-3 py-3">
<h2 class="text-right" id="catatan">Catatan saya</h2>
</div>
</div>
<div class="col mr-md-3">
<div class="my-3 py-3 px-3">
<p><em>Disclaimer</em>: Tulisan saya bersifat pribadi dan tidak mewakili apapun (kecuali tertulis)</p>
<!-- RSS reader -->
<!-- <div class="commonninja_component" comp-type="feed" comp-id="e57efbf6-04e3-4a9a-bdb4-bc3afbbe2f6d"></div>-->
<div class="row row-cols-1 row-cols-md-2" id="rss_reader"></div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="container py-5 bg-light">
<p class="text-center">
<span class="ml-3 mr-3">
<a class="icon" target="_blank" href="mailto:merpati@muhammadrefa.xyz">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
</a>
</span>
<span class=class="ml-3 mr-3">
<a class="icon" target="_blank" href="https://www.linkedin.com/in/muhammadrefa/">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
</a>
</span>
<span class="ml-3 mr-3">
<a class="icon" target="_blank" href="https://github.com/muhammadrefa">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
</a>
</span>
</p>
<p class="text-center">Muhammad Refa Utama Putra - 2022</p>
</footer>
<!-- Scripts -->
<!-- jQuery -->
<script src="jquery-3.5.1.min.js"></script>
<!-- RSS reader -->
<!-- <script src="https://cdn.commoninja.com/sdk/latest/commonninja.js" defer></script>-->
<script>
$(document).ready(function(){
$.get("https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fmuhammadrefa.wordpress.com%2Fcategory%2Ftutorial%2Ffeed%2F", function(feed){
console.log(feed.items);
$.each(feed.items, function(idx, item){
// console.log(item.title);
$('#rss_reader').append(
"<div class=\"card mb-1\"><div class=\"card-body\"><h5 class=\"card-title\">" + item.title + "</h5><p class=\"card-text\">" + item.description + "</p></div><div class=\"card-footer\"><small class=\"text-muted\">" + item.pubDate + "</small><a href=\"" + item.link + "\"><button type=\"button\" class=\"btn btn-sm btn-outline-primary float-right\">Baca Tulisan</button></a></div></div>");
})
})
})
</script>
<!-- OwlCarousel2 -->
<script src="owlcarousel2/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
margin:10,
nav:true,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:2,
nav:false
},
1000:{
items:4,
nav:true,
loop:false
}
}
});
});
</script>
</body>
</html>