Tugas PWEB 1
Nama : Darren Prasetya
NRP : 5025211162
Kelas : Pemrograman Web A
Tahun : 2022/2023
Pada meet kedua, kami diberikan sebuah tugas untuk membuat CV. Berikut adalah CV saya dalam HTML yang menggunakan style tag. CV saya berisi informasi pribadi, pengalaman, dan projek-projek yang saya pernah lakukan.
Link Repository: Mikask1/Tugas-PWEB-1 (github.com)
Penjelasan:
Di kode saya telah saya masukkan beberapa komen:
<!DOCTYPE html>
<html>
<head>
<!-- Judul Website -->
<title>Darren Prasetya's CV</title>
<link href="CV.css" rel="stylesheet" />
<!-- Import Font Barlow -->
<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=Barlow:wght@100;300;400;
500;600;700;900&display=swap"
rel="stylesheet"
/>
</head>
<!-- Style Tag -->
<style>
body{
font-family: "Barlow", sans-serif;
margin: 80px 0;
}
.layout {
max-width: 80rem;
width: 60%;
margin: 0 auto;
}
.space{
margin: 60px 0;
}
.name{
color: #FF3E3E;
}
.header{
color: #FF5757;
}
.item{
color: #ffa3a3;
}
li{
line-height: 1.5rem;
}
.section{
border-left: 1px solid #ffa3a3;
padding-left: 1.5rem;
}
.profile{
border-radius: 50%;
border: 3px solid #ffa3a3;
padding: 0.5rem;
width: 130px;
height: 130px;
margin-right: 2rem;
}
</style>
<body>
<!-- Class Layout: agar website tetap kelihatan bagus meskipun dilihat pada
monitor wide-screen -->
<div class="layout">
<!-- Profile Picture -->
<div class="profile-border" style="display: inline-block">
<img class="profile" src="https://blogger.googleusercontent.com/img/
b/R29vZ2xl/AVvXsEjTdyBt5F3H6OX_gRYKoj_VulVHx8Ht4QABfPp-zTc3878sSDwx1O
Zil_l3tvASHzfaR50s0Dhwhs2D9VjhQx-BoTOvFniJtauHK1si2LzGdL39u60-WMISFfr
SWOXpd6bMs0C-0GTs0t9ViD-MXfbXjlpMnJyQjjZYHIzkjR-ilae0igeuIGHJ5Gii/s40
0/Me.png" alt="Darren's profile picture" width="185" height="185"/>
</div>
<!-- Informasi Pribadi -->
<div style="display: inline-block">
<h1 class="name">Darren Prasetya</h1>
<p>Email: darrenprasetya40@gmail.com</p>
<p>
LinkedIn:
<a href="https://www.linkedin.com/in/darrenprasetya/"
>Darren Prasetya</a
>
</p>
</div>
<!-- Garis + Spasi -->
<hr class="space"/>
<!-- Pendidikan -->
<h2 class="header">Education</h2>
<p>Sepuluh Nopember Institute of Technology</p>
<p style="display: inline">
Bachelor’s Degree in Computer Science  | 
</p>
<p style="display: inline">GPA: 3.72/4.00  | </p>
<p style="display: inline">August 2025</p>
<hr class="space"/>
<!-- Hard skill yang saya miliki -->
<h2 class="header">Skills</h2>
<ul>
<li>
Programming Languages: Python, JavaScript, HTML5, CSS3, SQL
</li>
<li>
Technologies: ReactJS, Redux, Zustand, Tanstack/React Query,
Material UI, TailwindCSS, NodeJS, ExpressJS, NextJS, Git,
SQLite, MySQL, PostgreSQL, MongoDB, Google Cloud Platform,
Google BigQuery, Google AppScripts, Google Cloud Virtual
Machine, Wix Velo, Photoshop, Keras, SciKit, OpenCV, Numpy
</li>
<li>
Other Skills: Web Development, Google Cloud, Agile
Development, Sprint Planning, Data Cleaning, Image Detection
and Classification, and Web Scraping
</li>
</ul>
<hr class="space"/>
<!-- Pengalaman berorganisasi dan bekerja -->
<h2 class="header">Experience</h2>
<div class="section">
<h3 class="item">Mulaicoding.id | Online Learning Company</h3>
<p>Software Engineer Intern (Fullstack Web Developer)</p>
<p>August 2022 – now</p>
<ul>
<li>
Created a dashboard for users to see their analytics of
their income generated through referrals
</li>
<li>
Migrated the whole database from Google Sheets to Google
BigQuery and refactored every part of the codebase to
use BigQuery
</li>
<li>
Revamped the Module and Lessons page interface and
database structure
</li>
<li>
Created a Discord Bot hosted on GCP VM to verify premium
status for Mulaicoding Premium-only Discord Server
</li>
</ul>
<h3 class="item">
Ini Lho ITS! 2023 | Student-held Event for Sepuluh Nopember
Institute of Technology
</h3>
<p>Front-end Web Developer Staff</p>
<p>November 2022 – now</p>
<ul>
<li>
Ini Lho ITS! is a major annual event that aims to
promote Sepuluh Nopember Institute of Technology in
Indonesia and abroad
</li>
<li>
Used React, NextJS, and Tailwind to facilitate building
the front-end part of the event’s website
</li>
</ul>
<h3 class="item">
ITS EXPO 2023 | Annual Innovation Event for Sepuluh Nopember
Institute of Technology
</h3>
<p>Expert Front-end Web Developer Staff</p>
<p>December 2022 – now</p>
<ul>
<li>
ITS EXPO is an annual major event held by Sepuluh
Nopember Institute of Technology that exhibits artworks
and technology innovations of ITS Students to be shown
to the public.
</li>
<li>
Used React, NextJS, and Tailwind to facilitate building
the front-end part of the event’s website.
</li>
</ul>
<h3 class="item">Schematics 2023 | Event-based Organization</h3>
<p>Expert Back-end Web Developer Staff</p>
<p>January 2023 – now</p>
<ul>
<li>
Schematics is one of the biggest ITS event-based
organization run by ITS Informatics Engineering
students.
</li>
</ul>
<h3 class="item">TedXITS 2023 | TEDx Event</h3>
<p>Back-end Web Developer Staff</p>
<p>January 2023 – now</p>
<ul>
<li>
TEDxITS is a TED-like event organized by ITS students.
</li>
</ul>
<h3 class="item">ICHIRO ITS | University Robotics Team</h3>
<p>Programming Division Intern (Computer Vision)</p>
<p>February 2022 – March 2022</p>
<ul>
<li>
Created a virtual car robot in WeBots with a camera that
is used to detect a ball object with OpenCV color
detection to calculate the distance between the car and
the ball from the camera feed
</li>
</ul>
</div>
<hr class="space"/>
<!-- Projek Pribadi -->
<h2 class="header">Personal Projects</h2>
<div class="section">
<div>
<h3 class="item">
<strong>Quda | Anime Genre Prediction Model</strong><br />
</h3>
<p>
Used BERT NLP capabilities and combine it with a
classification model to create a machine learning model that
can predict an anime’s genre from their synopsis.
</p>
<h3 class="item">
<strong>Post Things | Fullstack CRUD Website</strong><br />
</h3>
<p>
Used ReactJS, Redux, Material UI to create the front-end.
Used NextJS for backend, aswell as MongoDB for database.
</p>
<h3 class="item">
<strong>Portfolio Web | My Portfolio Website</strong><br />
</h3>
<p>
Used ReactJS and TailwindCSS to create a front-end website.
</p>
<h3 class="item">
<strong>Furry Image Detection | Image Classification</strong
><br />
</h3>
<p>
Used Keras to build a neural network to detect if an image
is considered a furry or not. Trained on 9000 images scraped
from the web.
</p>
<h3 class="item">
<strong>Prediction Models | Kaggle Datasets</strong><br />
</h3>
<p>
Used various models from scikit-learn to train on the public
datasets on Kaggle for small-scale experiments.
</p>
<h3 class="item">
<strong>Instagram Post Scraper | Web Scraping</strong><br />
</h3>
<p>
Used Selenium in conjunction to BeautifulSoup to get
Instagram post data (image/video, caption, and upload date)
from a specific profile.
</p>
<h3 class="item">
<strong
>Desmos Graph Animation | Computer Generated
Animation</strong
><br />
</h3>
<p>
Turn any video into equations that can be rendered in
Desmos.
</p>
</div>
</div>
</body>
</html>
Tampilan Website:
Link: Darren Prasetya's CV (tugas-pweb-1.netlify.app)
Comments
Post a Comment