Skip to main content

Tugas (1) Pemrograman Web D - Membuat Website Porfotolio

Halo semua, ini merupakan post pertama dari blog milik saya. Post ini akan berisi mengenai web cv saya yang kedua bisa anda kunjungi di sini. Web cv saya yang pertama bisa diakses di sini My First Web CV. Tidak terlalu bagus dan fancy karena dibuat saat saya pertamakali belajar cara menggunakan html, css, dan sangat sedikit js. Itu dibuat pada Juli 2020. Dan sekarang sudah berlalu 14 bulan setelah pertamakali saya belajar html.


Web CV ini dihost pada vercel dan dibuat dengan pure html, css. Serta libary grafik untuk web browser Three.js, tools bundling Webpack dan library animasi GSAP. Web ini hanya terdiri dari satu halaman yang memuat beberapa informasi mengenai saya sendiri. Di website ini juga pertamakali saya mencoba membuat sesuatu dengan Three.js, Webpack dan GSAP. Kira kira segitu saja penjelasannya, untuk source code sendiri bisa dilihat dibawah atau kunjungi repository github milik saya threejs-portofolio.


HTML
Copy
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <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=Poppins:wght@100;200;300;400;500;600&display=swap" rel="stylesheet">
<title>Axel Briano</title>
</head>
<body>
 <canvas class="webgl"></canvas>
<main>
 <div id="container-header">
 <div id="content-header">
 <div id="header-name" class="text-white">
 <h1 class="header-name-text"><span class="typed-text text-green"></span><span class="cursor">&nbsp;</span></h1>
 </div>
 <div id="header-title" class="text-white"><span class="header-title-content">I'm an Informatics Students at Institut Teknologi Sepuluh Nopember who is passionate in learning and programming. I'm currently really interested in <span class="text-green text-bold">Android Development</span>.</span><span class="header-title-filler"></span></div>
 </div>
 </div>
<div class="section-skill">
 <div class="section-title text-white"><h1>Skills and Tools</h1></div>
 <a href="https://kotlinlang.org/" target="_blank"><img class="skill-item" src="./assets/images/kotlin.svg" alt="Kotlin" title="Kotlin" height="50"></a>
<a href="https://www.java.com/" target="_blank"><img class="skill-item" src="./assets/images/java.svg" alt="Java" title="Java" height="50"></a>
<a href="#" target="_blank"><img class="skill-item" src="./assets/images/html.svg" alt="HTML" title="HTML" height="50"></a>
<a href="#" target="_blank"><img class="skill-item" src="./assets/images/css.svg" alt="CSS" title="CSS" height="50"></a>
<a href="h.svg" alt="JavaScript" title="JavaScript" height="50"></a>
<a href="https://tailwindcss.com/" target="_blank"><img class="skill-item" src="./assets/images/tailwind.svg" alt="Tailwind" title="Tailwind" height="50"></a>
<a href="https://firebase.google.com/" target="_blank"><img class="skill-item" src="./assets/images/firebase.svg" alt="Firebase" title="Firebase" height="50"></a>
<a href="https://www.mysql.com/" target="_blank"><img class="skill-item" src="./assets/images/mysql.svg" alt="MySql" title="MySql" height="50"></a>
<a href="https://www.postgresql.org/" target="_blank"><img class="skill-item" src="./assets/images/postgres.svg" alt="Postgres" title="Postgres" height="50"></a>
<a href="https://git-scm.com/" target="_blank"><img class="skill-item" src="./assets/images/git.svg" alt="Git" title="Git" height="50"></a>
<a href="https://github.com/" target="_blank"><img class="skill-item" src="./assets/images/github.svg" alt="GitHub" title="GitHub" height="50"></a>
<a href="https://developer.android.com/studio" target="_blank"><img class="skill-item" src="./assets/images/androidstudio.svg" alt="Android Studio" title="Android Studio" height="50"></a>
<a href="https://code.visualstudio.com/" target="_blank"><img class="skill-item" src="./assets/images/vscode.svg" alt="VS Code" title="VS Code" height="50"></a>
<a href="https://www.figma.com/" target="_blank"><img class="skill-item" src="./assets/images/figma.svg" alt="Figma" title="Figma" height="50"></a>
 </div>
<div class="section-experience">
 <div class="section-title text-white"><h1>Experience</h1></div>
 <ul class="section-experience-list">
 <li class="text-white">Staff of Department of Profession and Technology <b>·</b> May 2021 - Present</li>
 <li class="text-white">Expert Staff of Schematics NST <b>·</b> Mar 2021 - Present</li>
 <li class="text-white">Teaching Assistant of Data Structure Course <b>·</b> Jan 2021 - Jul 2021</li>
 <li class="text-white">Frontend Developer of Indonesian Corrosion Week <b>·</b> Jan 2021 - May 2021</li>
 </ul>
 </div>
<footer>
 <a class="text-white text-center text-lg">Reach me at</a>
<div class="footer-item-container ">
 <a class="footer-item text-white" href="https://www.linkedin.com/in/axel-brians/"><img src="./assets/images/linkedin.svg" title="LinkedIn" height="25"/></a>
 <a class="footer-item text-white" href="https://github.com/axelbrians"><img src="./assets/images/github.svg" title="Github" height="25"/></a>
 <a class="footer-item text-white" href="mailto:axelbrians@gmail.com"><img src="./assets/images/email.svg" title="Email" height="25"/></a>
 <a class="footer-item text-white" href="https://axelbrians.medium.com/"><img src="./assets/images/medium.svg" title="Medium" height="25"/></a>
 </div>
<div class="footer-copyright text-center text-sm text-white"><a>© Axel Briano Suherik 2021</a></div>
 </footer>
 </main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js" integrity="sha512-UxP+UhJaGRWuMG2YC6LPWYpFQnsSgnor0VUF3BHdD83PS/pOpN+FYbZmrYN+ISX8jnvgVUciqP/fILOXDjZSwg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/CSSRulePlugin.min.js" integrity="sha512-SuKlyVGK9c7adN5I0qO0zZt1KAXK9WpUguwgH16A3s8Wvrc1X3mum4PS9bI7223Y2v5KBzx3qTCdlVymgF0uWg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
const content = CSSRulePlugin.getRule('#content-header:before');
 const h1 = document.querySelector('#header-name');
 const p = document.querySelector('#header-title');
 const tl = gsap.timeline()
tl.from(content, {
 delay: 0.7,
 duration: 4,
 cssRule: { scaleX: 0}
 })
tl.to(
 h1,
{
 duration: 2,
 clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0% 100%)',
 y: '30px'
 },
"-=3"
 )
tl.to(
 p,
{
 duration: 4,
 clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0% 100%)',
 y: '30px'
 },
 "-=3"
 )
</script>
</body>
</html>
view raw index.html delivered with ❤ by emgithub
CSS
Copy
* {
 margin: 0;
 padding: 0;
}
html,body {
 height: 100vh;
 font-family: 'Poppins';
}
main {
 width: 100%;
 position: absolute;
 z-index: 1;
 display: grid;
 grid-template-columns: repeat(12, 1fr);
 grid-auto-rows: minmax(100px, auto);
 gap: 10px;
}
.webgl {
 position: fixed;
 top: 0;
 left: 0;
 outline: none;
}
#container-header {
 grid-column: 1 / span 12;
 height: 100vh;
}
#content-header {
 display: flex;
 height: auto;
 height: 100vh;
 position: relative;
 flex-flow: row wrap;
}
#content-header:before {
 content: '';
 top: 0;
 left: 0;
 width: 100%;
 border-bottom: 1px solid white;
 transform: scaleX(1);
}
#header-name {
 clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
 padding-right: 0.3em;
 flex: 1;
}
#header-title {
 clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
 flex: 1;
 display: flex;
 flex-flow: row wrap;
 font-size: 1.2rem;
 padding-left: 0.3em;
}
.header-title-content {
 flex: 1;
}
.header-name-text {
 font-size: 2.5rem;
 line-height: 97%;
 text-align: right;
}
.typed-text {
 white-space: pre-line;
}
.cursor {
 display: inline-block;
 background-color: #ccc;
 margin-left: 0.1rem;
 width: 3px;
 animation: blink 1s infinite;
}
.typing {
 animation: none;
}
@keyframes blink {
 0% { background-color: #ccc; }
 49% { background-color: #ccc; }
 50% { background-color: transparent; }
 99% { background-color: transparent; }
 100% { background-color: #ccc; }
}
@media screen and (min-width: 1280px) {
 .header-title-filler {
 flex: 0.4;
 }
}
.container {
 grid-column: 1 / span 12;
 height: 100vh;
}
.text-white {
 color: white;
}
.text-green {
 background: -webkit-linear-gradient(45deg, #80ff72, #7ee8fa);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}
.text-bold {
 font-weight: bold;
}
.text-center {
 text-align: center;
}
.text-sm {
 font-size: 0.9rem;
}
.text-md {
 font-size: 1rem;
}
.text-lg {
 font-size: 1.5rem;
}
.section-skill {
 grid-column: 1 / span 12;
 text-align: center;
}
.section-title {
 grid-column: 1 / span 12;
 font-size: 1.5rem;
 text-align: center;
 margin-bottom: 2em;
}
.skill-item {
 margin-left: 1em;
 margin-right: 1em;
 margin-top: 1em;
}
@media screen and (min-width: 1024px) {
.section-skill {
 grid-column: 4 / 10;
 text-align: center;
 }
.section-title {
 grid-column: 4 / 10;
 font-size: 1.5rem;
 text-align: center;
 margin-bottom: 2em;
 }
}
.section-experience {
 grid-column: 3 / 11;
 text-align: center;
 margin-top: 8em;
}
.section-experience-list {
 list-style-type: none;
}
footer {
 grid-column: 1 / span 12;
 display: flex;
 flex-direction: column;
 padding-top: 10em;
 padding-bottom: 1em;
 justify-content: center;
}
.footer-item-container {
 display: flex;
 flex-direction: row;
 justify-content: center;
}
.footer-item {
 padding: 1em 1em;
}
.footer-copyright {
 grid-column: 1 / span 12;
}
view raw style.css delivered with ❤ by emgithub
JavaScript
Copy
import './style.css';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import * as dat from 'dat.gui';
import crossResource from './assets/images/cross.png';
// Texture loader
const loader = new THREE.TextureLoader();
const cross = loader.load(crossResource);
// Debug
// const gui = new dat.GUI()
// Canvas
const canvas = document.querySelector('canvas.webgl')
// Scene
const scene = new THREE.Scene()
// Objects
const geometry = new THREE.TorusGeometry( .7, .2, 16, 100 )
const particlesGeo = new THREE.BufferGeometry()
const particlesCount = 7000
const posArray = new Float32Array(particlesCount * 3)
for (let i = 0; i < particlesCount * 3; i++) {
 // posArray[i] = Math.random() - 0.5;
 posArray[i] = (Math.random() - 0.5) * 5
}
particlesGeo.setAttribute('position', new THREE.BufferAttribute(posArray, 3))
// Materials
const material = new THREE.PointsMaterial({
 size: 0.005,
 transparent: true,
})
const particlesMaterial = new THREE.PointsMaterial({
 size: 0.005,
 map: cross,
 transparent: true
})
// Mesh
const sphere = new THREE.Points(geometry,material);
const particlesMesh = new THREE.Points(particlesGeo, particlesMaterial);
sphere.position.x = -1.5;
scene.add(sphere, particlesMesh);
// Lights
const pointLight = new THREE.PointLight(0xffffff, 0.1)
pointLight.position.x = 2
pointLight.position.y = 3
pointLight.position.z = 4
scene.add(pointLight)
/**
 * Sizes
 */
const sizes = {
 width: window.innerWidth,
 height: window.innerHeight
}
window.addEventListener('resize', () =>
{
 // Update sizes
 sizes.width = window.innerWidth
 sizes.height = window.innerHeight
// Update camera
 camera.aspect = sizes.width / sizes.height
 camera.updateProjectionMatrix()
// Update renderer
 renderer.setSize(sizes.width, sizes.height)
 renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})
/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 0
camera.position.y = 0
camera.position.z = 2
scene.add(camera)
// Controls
// const controls = new OrbitControls(camera, canvas)
// controls.enableDamping = true
/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
 canvas: canvas
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setClearColor(new THREE.Color('#21282A'), 1);
// Event listener
document.addEventListener('mousemove', animateParticles);
document.body.onscroll = moveCamera;
let mouseX = 0;
let mouseY = 0;
function animateParticles(event) {
 // mouseY = event.clientY - (window.innerHeight / 2);
 // mouseX = event.clientX - (window.innerWidth / 2);
mouseY = event.clientY;
 mouseX = event.clientX;
// console.log(`mouseY ${mouseY}`);
 // console.log(`mouseX ${mouseX}`);
 }
function moveCamera() {
 const distance = document.body.getBoundingClientRect().top;
sphere.position.z = distance * 0.005;
 sphere.position.x = -1.5 + distance * -0.001;
 sphere.position.y = distance * -0.007;
}
/**
 * Animate
 */
const clock = new THREE.Clock()
const tick = () =>
{
const elapsedTime = clock.getElapsedTime();
// Update objects
 sphere.rotation.y = .2 * elapsedTime;
 particlesMesh.rotation.y = -0.02 * elapsedTime;
 particlesMesh.rotation.x = -0.02 * elapsedTime;
if (mouseX > 0) {
 particlesMesh.rotation.x += -mouseY * (10 * 0.00001);
 particlesMesh.rotation.y += mouseX * (10 * 0.00001);
 }
// if (mouseX > 0) {
 // particlesMesh.rotation.y += mouseX * (10 * 0.000001);
 // // particlesMesh.rotation.x = 0.02 * elapsedTime;
 // } else {
 // // particlesMesh.rotation.x = -0.02 * elapsedTime;
 // }
// if (mouseY > 0) {
// particlesMesh.rotation.x += -mouseY * (10 * 0.000001);
 // // particlesMesh.rotation.y = 0.02 * elapsedTime;
 // } else {
 // // particlesMesh.rotation.x = -0.02 * elapsedTime;
 // }
// Update Orbital Controls
 // controls.update()
// Render
 renderer.render(scene, camera)
// Call tick again on the next frame
 window.requestAnimationFrame(tick)
}
tick()
// HTML Typewriter animation
const newRow = document.createElement('br');
const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");
const textArray = ["Axel Briano\nSuherik", "Axel", "axelbrians"];
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 2000; // Delay between current and next text
let textArrayIndex = 0;
let charIndex = 0;
function type() {
 if (charIndex < textArray[textArrayIndex].length) {
 if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
 if(textArray[textArrayIndex].charAt(charIndex) === '\\') {
 typedTextSpan.textContent += "\n";
 charIndex++;
 } else {
 typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
 }
 charIndex++;
 setTimeout(type, typingDelay);
 }
else {
 cursorSpan.classList.remove("typing");
 setTimeout(erase, newTextDelay);
 }
}
function erase() {
 if (charIndex > 0) {
 if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
 if (textArray[textArrayIndex].charAt(charIndex - 1) === "n") {
 typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex-2);
 charIndex--;
 } else {
 typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex-1);
 }
 charIndex--;
 setTimeout(erase, erasingDelay);
 }
else {
 cursorSpan.classList.remove("typing");
 textArrayIndex++;
 if(textArrayIndex>=textArray.length) textArrayIndex=0;
 setTimeout(type, typingDelay + 1100);
 }
}
document.addEventListener("DOMContentLoaded", function() { // On DOM Load initiate the effect
 if(textArray.length) setTimeout(type, newTextDelay + 250);
});
view raw script.js delivered with ❤ by emgithub

Axel Briano Suherik

05111940000137

Pweb - D


Comments

Post a Comment

Popular posts from this blog

Tugas (6) Pemrograman Web D - Form Login & Contact Us dengan Bootstrap

 Tugas kali ini membuat website form login  dan contact us  menggunakan salah satu framework CSS paling populer yaitu Bootstrap . Dalam pengerjaannya digunakan HTML, CSS(Bootstrap) dan custom, serta sedikit JavaScript. JS digunakan untuk menampilkan alert bahwa data telah berhasil di-submit atau dikirim. Laman website dapan diakses pada link berikut . Untuk hosting web digunakan Vercel . Website terdiri dari satu halaman dan 2 bagian: Login form,  berisi halaman yang memuat form untuk login, dan sign in. Email dan password tidak boleh kosong. Newsletter section, berisi informasi mengenai pengguna yang ingin berlangganan berita update dari website ini. Source Code index.html main.css index.js
Post a Comment
Read more

Tugas (3) Pemgrograman Web D - Warung Tegal

Tugas kali ini membuat website Warung Makan Tegal. Dalam proses pengerjaannya, menggunakan  HTML ,   CSS ,   dan  JavaScript  serta  VSCode  sebagai  text editor . Di website ini, saya menggunakan carousel dan ada satu content video pada carousel tersebut menggunakan tag html video . Untuk websitenya sendiri bisa di akses melalui link berikut . Content website terdiri dari carousel, lalu ada video promosi Warung Tegal. Kemudian menu yang disediakan. Berikut merupakan preview dari Website Warung Tegal Source code index.html carousel.css carousel.js Axel Briano Suherik 05111940000137 Pweb - D
Post a Comment
Read more

Tugas 5 Rekayasa Kebutuhan (A) - Spesifikasi Kebutuhan Aplikasi Moka

Tugas kali ini adalah membuat spesifikasi kebutuhan dari suatu aplikasi bernama Moka. PoS merupakan sistem untuk memudahkan proses pembayaran para pelanggan di suatu pelaku usaha ketika membeli suatu produk atau jasa. Sistem PoS biasanya digunakan pada smartphone, tablet, komputer atau mesin EDC. Moka perupakan suatu aplikasi yang menerapkan  point-of-sales (PoS), Moka menggabungkan perangkat lunak dan perangkat keras membentuk sistem untuk memudahkan transaksi oleh pelaku usaha dengan pelanggan. Dengan Moka pelaku usaha dapat melakukan beragam hal seputar penjualan, mulai dari membuat entry produk atau jasa baru, mengatur stok, harga, keterangan, serta menampilkan grafik grafik data transaksi yang sudah di akumulasi dengan cepat dan secara real-time . Kebutuhan Fungsional Sistem menyediakan fitur login Sistem menyediakan fitur register Sistem menyediakan sejumlah opsi jenis usaha Sistem menyediakan fitur untuk mengelola menu Sistem menyediakan fitur untuk melakukan pengelolaan sh...
Post a Comment
Read more