Diawali dengan tugas yang kami dapatkan yaitu membuat website portofolio dan juga men-setup akun dan web blogspot ini.
Untuk dokumentasi source code dari web portofolio:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Website</title>
</head>
<head>
<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=Nunito:ital,
wght@0,200..1000;1,200..1000&display=swap"
rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Website</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="content">
<img class="avatar" src="pictures/ranggaz.jpeg" alt="avatar">
<div class="cintro">
<p><span >My name is...</span><br>Trischan Mahdy Arangga!</p>
</div>
<div class="cpara1">
<p>Im currently a software engineering student in
Institut Teknologi Sepuluh Nopember, located in Surabaya!
<br>
I am a student who is always eager to learn more about
IT in general,
ive indulged in a bit of game dev before this and
right now im really looking forward to learning
<span>HTML,CSS,JS
</span> for website development!
<br>
and so this is my <span>"Portfolio"</span> website,
down below you
will see some of my work in the past
year or so from college!
<br><br>
Before all of that, let me list my skills first:</p>
<div>
<ul>
<li>Fluent in English</li>
<li>Good at designing things
(mainly Photoshop)</li>
<li>Fast in making crucial decisions</li>
<li>Can adapt fast in a new group environment</li>
</ul>
<p>For collaborations, etc,
<br>
feel free to contact me!
<br>
<br>
<div class="socialmedias">
<p>Jl. Wisma Permai III No.11, RT.003/RW.05
(Indekos Bu Yuni 3)</p>
<p>trschnrangga@gmail.com</p>
<a href=
"https://www.instagram.com/trschnrangga/"
target="_blank">Instagram</a>
 <a href=
"https://www.linkedin.com/in/trischanma/"
target="_blank">LinkedIn</a>
</div>
</p>
</div>
<p class="clinks"><a href="resources/CV.pdf" target="_blank">
My CV</a></p>
</div>
<div class="projects">
<br><br>Projects/Designs:
<p>Click The Cat!</p>
<a href=
"https://github.com/trschnrangga/Whispers-Of-The-Void"
target="_blank">
<img class="cat" src="pictures/whispers.png"
alt="Whispers-Of-The-Void.png"></a>
</div>
</div>
<div class="image-container" id="scroll-container">
<img src="pictures/homuncbw.jpg" alt="">
<img src="pictures/homuncw.jpg" alt="">
<img src="pictures/durden.png" alt="">
<img src="pictures/bluelilyinv.jpg" alt="">
<img src="pictures/lilystock.jpg" alt="">
<img src="pictures/LIGHTOKUN1.jpg" alt="">
<img src="pictures/tylers.png" alt="">
<img src="pictures/indecisive.png" alt="">
</div>
<script src="smoothscroll.js"></script>
<script src="script.js"></script>
</body>
</html>
test.css
html, body {
scroll-behavior: smooth !important;
}
body {
background-color: rgb(44, 44, 44);
background-image: repeating-radial-gradient(circle, #ffffff,
c88bce 0%, #ffb2f7 10%);
background-size: 100% 55%;
background-repeat: no-repeat;
background-position: top;
height: 450px;
}
.content {
margin: auto;
width: 1200px;
}
.cintro {
color: rgb(242, 175, 223);
font-family: 'Nunito', sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-size: 50px;
font-style: italic;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
span {
color: rgb(255, 255, 255);
}
}
.cpara1 {
color: rgb(242, 175, 223);
font-family: 'Nunito', sans-serif;
font-optical-sizing: auto;
font-weight: 600;
font-size: 25px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
font-style: normal;
}
.cpara1 span {
font-style: italic;
font-weight: 700;
}
.avatar {
border-radius: 50%;
width: auto;
height: 300px;
border: 8px solid rgb(255, 161, 246);
box-shadow: 0 4px 50px 0px;
}
.projects {
color: rgb(242, 175, 223);
font-family: 'Nunito';
font-size: 25px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
font-weight: 700;
}
.projects a:link {
color:#ffffff;
}
.projects a:visited {
color:#ee7c9c;
}
.clinks a:link {
color: #ffffff;
}
.clinks a:visited {
color: #ffffff;
}
.clinks a:hover {
color: #f69797;
}
.pictures img{
height: 500px;
width: auto;
margin: 10px;
}
.socialmedias {
color: #ffffff;
}
.socialmedias p{
color: #ffffff;
}
.socialmedias a {
color: #ffffff;
}
.socialmedias a:hover{
color: #ee7c9c;
}
.image-container {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
overflow-x: auto;
padding: 10px;
scroll-behavior: smooth;
}
.image-container img{
max-width: auto;
height: 700px;
margin: 10px;
box-shadow: 0px 0px 15px 2px #000000;
display:flex;
transition: 1s ease-out;
}
.image-container img:hover {
transform: scale(1.05);
transition: transform 0.3s ease;
}
.cat {
height: 400px;
width: auto;
box-shadow: 0px 0px 20px 2px #000000;
transition: 0.1s ease-out;
}
.cat:hover {
transform: scale(1.05);
transition: transform 0.05s ease-in;
}
.image-container::-webkit-scrollbar {
height: 12px;
}
.image-container::-webkit-scrollbar-track {
background: rgba(68, 68, 68, 0);
}
.image-container::-webkit-scrollbar-thumb {
background-color: rgba(122, 122, 122, 0.283);
border-radius: 20px;
border: 3px solid rgba(0, 0, 0, 0);
}
script.js
const container = document.getElementById('scroll-container');
container.addEventListener('wheel', (event) => {
event.preventDefault();
container.scrollLeft += event.deltaY * 2;
});
container.addEventListener('wheel', (event) => {
event.preventDefault();
smoothScroll(container, event.deltaY);
});
function smoothScroll(element, delta) {
const duration = 1;
const start = element.scrollLeft;
const end = start + delta * 4;
const startTime = performance.now();
function scrollAnimation(currentTime) {
const elapsedTime = currentTime - startTime;
const progress = Math.min(elapsedTime / duration, 1);
element.scrollLeft = start + (end - start)
* easeInOutQuad(progress);
if (progress < 1) {
requestAnimationFrame(scrollAnimation);
}
}
requestAnimationFrame(scrollAnimation);
}
function easeInOutQuad(t) {
return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
}
dan berikut file repo website saya di github:
Repository
