Tugas 2 Pemrograman Web
Fiqey Indriati Eka Sari
05111940000015 / PWEB-D
Eksplorasi kali ini adalah membuat profil diri dengan menggunakan HTML. Berikut adalah hasil profil diri yang telah saya buat
Dalam pembuatan profil kali ini saya ingin beresploras HTML disertai TailwindCSS agar mempercantik tampilan nantinya, maka dari itu saya melakukan beberapa tahap instalasi tailwind.
Instalasi Tailwind
https://tailwindcss.com/docs/installation
- Install tailwind via npm,
npm init
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest2. Membuat file konfigurasi dan memasukkan Tailwind dalam CSS
npx tailwindcss initMembuat file konfigurasi
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
}Membuat file css yang menyimpan injeksi Tailwind
/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;3. Menyiapkan kerangka HTML
<!doctype html>
<html>
<head>
<!-- ... -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/tailwind.css" rel="stylesheet">
</head>
<body>
<!-- ... -->
</body>
</html>Menyusun kode HTML disertai tatanan CSS dari Tailwind
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<meta charset="UTF-8" />
<meta name="description" content="UI/UX and Machine Learning Enthusiast" />
<meta name="author" content="Fiqey Indriati Eka Sari" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./tailwind.css" rel="stylesheet" />
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Inter|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
rel="stylesheet"
/>
<link href="./build.css" rel="stylesheet" />
<title>Fiqey Indriati — Resume</title>
</head>
<body>
<main class="font-sans hyphens-manual">
<!-- Page -------------------------------------------------------------------------------------------------------->
<div
class="
max-w-3xl
p-3
mx-auto
my-auto
bg-white
print:border-0
page
print:max-w-letter print:max-h-letter print:mx-0 print:my-o
lg:h-letter
md:max-w-letter md:h-letter
xsm:p-8
sm:p-9
md:p-16
lg:mt-6
print:bg-white
"
>
<!-- Name ---------------------------------------------------------------------------------------------------->
<header
class="
inline-flex
items-baseline
justify-between
w-full
mb-3
align-top
border-b-8
"
>
<div class="block">
<h1 class="mb-0 text-5xl font-bold text-gray-750">
Fiqey Indriati Eka Sari
</h1>
<!--Job Title--------------------------------------------------------------------------------------------------------->
<h2 class="m-0 text-2xl font-semibold text-gray-700">
Front-End Developer
</h2>
<!--Location --------------------------------------------------------------------------------------------------------->
<h3 class="m-0 mb-4 font-semibold text-md text-gray-550">
Surabaya, East Java
</h3>
</div>
<!-- Initials Block -->
</header>
<section class="pb-2 pb-4 mt-4 border-b-2 first:mt-0">
<!-- To keep in the same column -->
<div class="break-inside-avoid">
<h2
class="
mb-2
text-lg
font-bold
tracking-widest
text-gray-700
print:font-normal
"
>
SUMMARY
</h2>
<section class="mb-2 break-inside-avoid">
<p class="mt-2 leading-normal text-gray-700 text-md">
Experienced Software Engineer with a demonstrated history of
working in the research industry. Skilled in Design, User
Experience (UX), User Interface Design, and Public Speaking.
</p>
</section>
</div>
</section>
<!-- Column -------------------------------------------------------------------------------------------------->
<div
class="
mt-4
col-gap-16
md:col-count-2
print:col-count-2
md:h-letter-col-full
print:h-letter-col-full
col-fill-balance
"
>
<section class="pb-2 first:mt-0">
<!-- To keep in the same column -------------------------------------------------------------------------->
<div class="break-inside-avoid">
<section class="pb-4 mb-4 border-b-2 break-inside-avoid">
<ul class="list-inside pr-7">
<li
class="
mt-1
leading-normal
transition
duration-100
ease-in
text-gray-550 text-md
hover:text-gray-700
"
>
<a href="https://github.com/finesaaa" class="group">
<span
class="
mr-5
text-lg
font-semibold
text-gray-700
leading-snugish
"
>Github:</span
>
finesaaa
<span
class="
inline-block
font-normal
text-black
transition
duration-100
ease-in
text-gray-550
print:text-black
group-hover:text-gray-700
print:
"
>↗</span
>
</a>
</li>
<li
class="
mt-1
leading-normal
transition
duration-100
ease-in
text-gray-550 text-md
hover:text-gray-700
"
>
<a href="mailto:indriatifiqey16@gmail.com" class="group">
<span
class="
mr-8
text-lg
font-semibold
text-gray-700
leading-snugish
"
>Email:</span
>
indriatifiqey16@gmail.com
<span
class="
inline-block
font-normal
transition
duration-100
ease-in
text-gray-550
print:text-black
group-hover:text-gray-700
"
>↗</span
>
</a>
</li>
<li
class="
mt-1
leading-normal
transition
duration-100
ease-in
text-gray-550 text-md
hover:text-gray-700
"
>
<a href="tel:+6281252887181">
<span
class="
mr-5
text-lg
font-semibold
text-gray-700
leading-snugish
"
>Phone:</span
>
+62(812) 5288 7181
</a>
</li>
</ul>
</section>
</div>
</section>
<!--Experience ------------------------------------------------------------------------------------------------------>
<section class="pb-2 border-b-4 first:mt-0">
<!-- To keep in the same column ------------------------------------------------------------------------->
<div class="break-inside-avoid">
<h2
class="
mb-2
text-lg
font-bold
tracking-widest
text-gray-700
print:font-normal
"
>
EXPERIENCE
</h2>
<!--Job 1-->
<section class="mb-4 break-inside-avoid">
<header>
<h3 class="text-lg font-semibold text-gray-650">
ICHIRO ITS Robotics Team
</h3>
<p class="leading-normal text-md text-gray-550">
December 2019 – Present | Programmer
</p>
</header>
<ul class="mt-2.1 text-md text-gray-700 leading-normal">
<li>
<span
class="
transform
-translate-y-px
select-none
text-gray-550
"
>›</span
>
This team has a main project to build humanoid robots that
could compete in international competition.
</li>
<li>
<span
class="
transform
-translate-y-px
select-none
text-gray-550
"
>›</span
>
Learn computer vision and develop the robot framework
</li>
<li>
<span
class="
transform
-translate-y-px
select-none
text-gray-550
"
>›</span
>
Using C/C++, Python, and also trying ROS2
</li>
<li>
<span
class="
transform
-translate-y-px
select-none
text-gray-550
"
>›</span
>
Developing program for real and simulation robot
</li>
</ul>
</section>
<section class="mb-4 break-inside-avoid">
<header>
<h3 class="text-lg font-semibold text-gray-650">
Scratch MIT Programmng Teacher
</h3>
<p class="leading-normal text-md text-gray-550">
Feb 2021 – Present | Teacher
</p>
</header>
<ul class="mt-2.1 text-md text-gray-700 leading-normal">
<li>
<span
class="
transform
-translate-y-px
select-none
text-gray-550
"
>›</span
>
Deliver programming course to elemantary student using tools
Scratch.
</li>
<li>
<span
class="
transform
-translate-y-px
select-none
text-gray-550
"
>›</span
>
Collaboration with SD Al Hikmah's Coding Extracurricular by
Sekolah Robot Indonesia
</li>
<li>
<span
class="
transform
-translate-y-px
select-none
text-gray-550
"
>›</span
>
Deliver computational thinking to elementary student
</li>
</ul>
</section>
<section class="mb-4 break-inside-avoid">
<header>
<h3 class="text-lg font-semibold text-gray-650">
Indosat Ooredoo Digital Camp (IDCamp)
</h3>
<p class="leading-normal text-md text-gray-550">
May – Jul 2021 | Android Developer Student
</p>
</header>
<ul class="mt-2.1 text-md text-gray-700 leading-normal">
<li>
<span
class="
transform
-translate-y-px
select-none
text-gray-550
"
>›</span
>
Learn Fundamental of Android Programming
</li>
<li>
<span
class="
transform
-translate-y-px
select-none
text-gray-550
"
>›</span
>
Provided by Dicoding Course
</li>
</ul>
</section>
<!-- Additional Jobs Would Go Here-->
</div>
</section>
<!--Education -------------------------------------------------------------------------------------------------------->
<section class="pb-2 mt-4 border-b-4 first:mt-0">
<!-- To keep in the same column -->
<div class="break-inside-avoid">
<h2
class="
mb-2
text-lg
font-bold
tracking-widest
text-gray-700
print:font-normal
"
>
EDUCATION
</h2>
<!-- school --------------------------------------------------------------------------->
<section class="pb-4 mt-4 mb-2 border-b-2 break-inside-avoid">
<header>
<h3 class="flex-grow text-lg font-semibold text-gray-700">
Sepuluh Nopember Institute of Technology (ITS)
</h3>
<p class="leading-normal text-md text-gray-550">
2019 – Present | Bachelor of Computer Science
</p>
</header>
<p class="mt-1 leading-normal text-md text-gray-650">
<span class="font-semibold text-gray-700 text-md"
>Major:</span
>
Computer Science
</p>
<p class="leading-normal text-gray-700 text-md">
<span class="font-semibold text-gray-700 text-md">GPA: </span
>3.89
</p>
</section>
<!--school 2--------------------------------------------------------------------------------------------->
<section class="pb-2 mt-4 mb-2 break-inside-avoid">
<header>
<h3 class="flex-grow text-lg font-semibold text-gray-700">
Asia University (TW)
</h3>
<p class="leading-normal text-md text-gray-550">
2021 | Winter Program
</p>
</header>
<p class="mt-1 leading-normal text-md text-gray-650">
<span class="font-semibold text-gray-700 text-md"
>Minor:</span
>
Artficial Intelligence
</p>
<p class="mt-1 leading-normal text-md text-gray-650"></p>
<p class="leading-normal text-gray-700 text-md">
<span class="font-semibold text-gray-700 text-md">GPA: </span
>4
</p>
</section>
</div>
</section>
<!--Projects ---------------------------------------------------------------------------------------------------------->
<section class="pb-2 pb-2 mt-4 border-b-4 first:mt-0">
<div class="break-inside-avoid">
<!-- To keep in the same column -->
<h2
class="
mb-2
text-lg
font-bold
tracking-widest
text-gray-700
print:font-normal
"
>
PROJECTS
</h2>
<!--Project 1 --------------------------------------------------------------------------------------------------------->
<section class="pb-4 mb-4 border-b-2 break-inside-avoid">
<header>
<h3 class="text-lg font-semibold text-gray-700">
<a href="https://kemahasiswaan.its.ac.id" class="group">
MyITS StudentConnect (Affairs) Website
<span
class="
inline-block
mr-3
font-normal
transition
duration-100
ease-in
text-gray-550
print:text-black
group-hover:text-gray-700
"
>↗</span
></a
>
<span
class="
inline-block
font-normal
transition
duration-100
ease-in
text-gray-550
print:text-black
group-hover:text-gray-700
"
>
<a
href="https://bitbucket.org/dptsi/myits-studentconnect-web"
><i class="fab fa-github"></i></a
></span>
</h3>
<p class="leading-normal text-md text-gray-550">
Mar - Present | PHP, CSS, JS, SQL
</p>
</header>
<p class="mt-2.1 text-md text-gray-700 leading-normal">
Developed numerous features such as apply scholarship, manage
scholarshp document, cross check, etc. by using Laravel
Framework. I had created user interface and user experience of
this website
</p>
</section>
<!--Project 2-->
<section class="pb-4 mb-4 border-b-2 break-inside-avoid">
<header>
<h3 class="text-lg font-semibold text-gray-700">
<a
href="https://play.google.com/store/apps/
details?id=id.capd.sahabat.capdapp"
class="group"
>
SahabatCAPD App
<span
class="
inline-block
mr-3
font-normal
transition
duration-100
ease-in
text-gray-550
print:text-black
group-hover:text-gray-700
"
>↗</span
></a
>
<span
class="
inline-block
font-normal
transition
duration-100
ease-in
text-gray-550
print:text-black
group-hover:text-gray-700
"
>
<a href="https://github.com/finesaaa/capd-app"
><i class="fab fa-github"></i></a
></span>
</h3>
<p class="leading-normal text-md text-gray-550">
May - Augt 2021 | Kotlin, RasaHQ, TensorflowJS
</p>
</header>
<p class="mt-2.1 text-md text-gray-700 leading-normal">
Mobile virtual assistant application for early automatic
detection of the risk of complications Continuous Ambulatory
Peritoneal Dialysis (CAPD) based on machine learning
integrated chatbot and logbook.
</p>
</section>
<!--Project 3---------------------------------------------------------->
<section class="pb-4 mb-4 break-inside-avoid">
<header>
<h3 class="text-lg font-semibold text-gray-700">
<a
href="https://github.com/coll-j/Keuangan-Kapal"
class="group"
>
Ship Financial Accounting Website
<span
class="
inline-block
mr-3
font-normal
transition
duration-100
ease-in
text-gray-550
print:text-black
group-hover:text-gray-700
"
>↗</span
>
</a>
<span
class="
inline-block
font-normal
transition
duration-100
ease-in
text-gray-550
print:text-black
group-hover:text-gray-700
"
>
<a href="https://github.com/coll-j/Keuangan-Kapal"
><i class="fab fa-github"></i></a
></span>
</h3>
<p class="leading-normal text-md text-gray-550">
Feb 2021 | PHP, JS, MySQL, CSS
</p>
</header>
<p class="mt-2.1 text-md text-gray-700 leading-normal">
Website for accounting or financial management of a shipping
project for project owners, accountants, field workers, and
admins
</p>
</section>
</div>
</section>
<section class="pb-2 mt-4 border-b-4 first:mt-0">
<!-- To keep in the same column -->
<div class="break-inside-avoid">
<h2
class="
mb-2
text-lg
font-bold
tracking-widest
text-gray-700
print:font-normal
"
>
ACHIEVEMENTS
</h2>
<!-- school --------------------------------------------------------------------------->
<section class="pb-4 mt-4 mb-2 border-b-2 break-inside-avoid">
<header>
<h3 class="flex-grow text-lg text-gray-700">
2nd Place in Dribbling Competition (LMB) Kontes Robot Sepak Bola Indonesia - Humanoid (KRSBI-H)
</h3>
<p class="leading-normal text-md text-gray-550">
2020 | National
</p>
</header>
</section>
<!--school 2--------------------------------------------------------------------------------------------->
<section class="pb-2 mt-4 mb-2 break-inside-avoid">
<header>
<h3 class="flex-grow text-lg text-gray-700">
Proto-A-Thon: International Prototype Design Competition
</h3>
<p class="leading-normal text-md text-gray-550">
2021 | Semifinalist
</p>
</header>
</section>
</div>
</section>
<!--Begin Skills ----------------------------------------------------------------------------------------------------->
<section class="pb-4 mt-4 first:mt-0">
<!-- To keep in the same column -->
<div class="break-inside-avoid">
<h2
class="
mb-2
text-lg
font-bold
tracking-widest
text-gray-700
print:font-normal
"
>
SKILLS
</h2>
<!--Full Stack Development ------------------------------------------------------------------------------------------->
<section class="mb-2 break-inside-avoid">
<div class="my-1 last:pb-1">
<ul
class="
flex flex-wrap
text-sm2
leading-relaxed
-mr-1.6
-mb-1
"
>
<li
class="
px-2.5
mr-1.6
mb-1
text-gray-200
leading-relaxed
print:bg-white print:border-inset
bg-gray-250
"
>
HTML5
</li>
<li
class="
px-2.5
mr-1.6
mb-1
text-gray-200
leading-relaxed
print:bg-white print:border-inset
bg-gray-250
"
>
Bootstrap
</li>
<li
class="
px-2.5
mr-1.6
mb-1
text-gray-200
leading-relaxed
print:bg-white print:border-inset
bg-gray-250
"
>
Javascript
</li>
<li
class="
px-2.5
mr-1.6
mb-1
text-gray-200
leading-relaxed
print:bg-white print:border-inset
bg-gray-250
"
>
C/C++
</li>
<li
class="
px-2.5
mr-1.6
mb-1
text-gray-200
leading-relaxed
print:bg-white print:border-inset
bg-gray-250
"
>
JSX
</li>
<li
class="
px-2.5
mr-1.6
mb-1
text-gray-200
leading-relaxed
print:bg-white print:border-inset
bg-gray-250
"
>
Python
</li>
<li
class="
px-2.5
mr-1.6
mb-1
text-gray-200
leading-relaxed
print:bg-white print:border-inset
bg-gray-250
"
>
PHP
</li>
<li
class="
px-2.5
mr-1.6
mb-1
text-gray-200
leading-relaxed
print:bg-white print:border-inset
bg-gray-250
"
>
Tensorflow
</li>
<li
class="
px-2.5
mr-1.6
mb-1
text-gray-200
leading-relaxed
print:bg-white print:border-inset
bg-gray-250
"
>
Kotlin
</li>
<li
class="
px-2.5
mr-1.6
mb-1
text-gray-200
leading-relaxed
print:bg-white print:border-inset
bg-gray-250
"
>
Tensorflow
</li>
<li
class="
px-2.5
mr-1.6
mb-1
text-gray-200
leading-relaxed
print:bg-white print:border-inset
bg-gray-250
"
>
Kotlin
</li>
<li
class="
px-2.5
mr-1.6
mb-1
text-gray-200
leading-relaxed
print:bg-white print:border-inset
bg-gray-250
"
>
SQL
</li>
<li
class="
px-2.5
mr-1.6
mb-1
text-gray-200
leading-relaxed
print:bg-white print:border-inset
bg-gray-250
"
>
MySQL
</li>
</ul>
</div>
</section>
</div>
</section>
</div>
<!-- end Column -->
</div>
<!-- end Page -->
</main>
</body>
</html>
Deploy Website di Github Page
Agar website dapat diakses publik maka salah satu solusinya dengan menggunakan GitHub Page
- Membuat repository yang berisi source website Resume yang sebelumnya telah dibuat
- Selanjutnya untu deploy menggunakan GitHub Page, menuju menu setting pada repository yang telah dibuat. Lalu, memilih menu Pages dan menggunakan branch yang akan di deploy (master). Langkah berikutnya, save.
- Halaman CV Website telah terdeploy dan dapat dilihat pada link berikut https://finesaaa.github.io/resume/
Fiqey Indriati Blog 