Tugas 1 PWEB B Bayu Adjie Sidharta 05111940000172





Page terdiri dari canvas threejs, lalu about saya, education, work experience, dan yang terakhir proyek saya. Saya membuat page ini dengan tailwind dan threejs. link website saya adalah : ADryInkCartridge

Dibawah tertulis source code saya.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link rel="stylesheet" href="tailwind.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.13.0/devicon.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<title>ADryInkCartridge</title>
</head>
<body class="min-h-screen bg-bg">
<canvas class="" id="bg"></canvas>
<main>
<section class="h-screen">
<img src="/Texture/bigbig2 1.png" alt="big" class="absolute">
<div class="text-white flex px-5 pt-40 w-full justify-between">
<div data-aos="fade-right" data-aos-duration="1000" class="px-10 py-5 z-10">
<h2 class="text-7xl py-5">
Hello!
</h2>
<h2 class="text-6xl">
I'm Bayu Adjie Sidharta
</h2>
<h2 class="text-6xl py-2">
An Informatics Student at ITS
</h2>
</div>
<div class="flex object-right-top">
<img src="/Texture/Humaaans Standing.png" alt="Humaaans" class="h-96 z-10">
</div>
</div>
<div class="pt-24 flex flex-row justify-between w-full px-10 text-white">
<div data-aos="fade-right" data-aos-duration="1000" class="flex flex-col">
<blockquote class="text-3xl py-5">
<p>Languages and Technologies</p>
</blockquote>
<div class="text-5xl">
<i class="devicon-c-plain"></i>
<i class="devicon-cplusplus-plain-wordmark colored"></i>
<i class="devicon-python-plain colored"></i>
<i class="devicon-r-original colored"></i>
<i class="devicon-java-plain colored"></i>
<i class="devicon-git-plain colored"></i>
<i class="devicon-flutter-plain colored"></i>
<i class="devicon-postgresql-plain colored"></i>
<i class="devicon-laravel-plain-wordmark colored"></i>
</div>
</div>
<div data-aos="fade-left" data-aos-duration="1000" class="flex flex-col">
<blockquote class="text-3xl py-5 text-right">
<p>Contact Me!</p>
</blockquote>
<div class="text-5xl">
<a href="https://www.linkedin.com/in/bayu-adjie-sidharta-802a2a193/" target="_blank"><i
class="devicon-linkedin-plain colored"></i></a>
<a href="https://github.com/ADryInkCartridge" target="_blank"><i class="devicon-github-original"></i></a>
</div>
</div>
</div>
</section>
<div class="relative">
<img src="Texture/bigbig 3.png" alt="" class="absolute z-0 w-3/4">
<section class="h-screen text-white w-full flex flex-col items-center">
<p class="pt-56 pb-10 text-5xl">Education</p>
<div class="flex flex-row justify-between relative w-full">
<div class=" bg-white h-96 absolute left-0 right-0 mx-auto w-1"></div>
<div data-aos="fade-right" data-aos-duration="1000" class="flex flex-col w-1/2 items-center">
<h1 class="text-4xl">SMA Kristen 1 Penabur Jakarta</h1>
<div class="text-left pt-5">
<h1 class="text-3xl pt-5">
City wide Computer Science Olympiad Contestant
</h1>
<p>
February 2018
</p>
<h1 class="text-3xl pt-5">
Finalist of "Prolog" Computer Science Competition
</h1>
<p>
July 2017
</p>
</div>
</div>
<div data-aos="fade-left" data-aos-duration="1000" class="flex flex-col w-1/2 items-center">
<h1 class="text-4xl">Institut Teknologi Sepuluh Nopember</h1>
<div class="text-right pt-5">
<h1 class="text-3xl pt-5">
GPA
</h1>
<p>
3.62
</p>
<h1 class="text-3xl pt-5">
Schematics ITS Public Relations
</h1>
<p>
April 2021 - Now
</p>
</div>
</div>
</div>
</section>
<section class="h-screen text-white z-10 relative">
<div class="pt-20 px-5">
<h1 class="text-5xl text-center">Work Experience</h1>
<div class="flex flex-row w-full justify-between items-center">
<div class="flex flex-col items-center w-1/2" data-aos="fade-right" data-aos-duration="1000">
<div class="text-left">
<h1 class="text-4xl pt-5">
Research Assistant
</h1>
<p class="text-2xl pt-5">
Data Science/Analytics
</p>
<p class="text-xl">
March 2021 - Now
</p>
</div>
<div class="text-left">
<h1 class="text-3xl pt-5">
Teaching Assistant
</h1>
<p class="text-2xl pt-5">
Math, Physics, Chemistry
</p>
<p class="text-xl">
September 2014 - October 2018
</p>
</div>
</div>
<div class="flex flex-col items-center w-1/2" data-aos="fade-left" data-aos-duration="1000">
<div class="text-right">
<h1 class="text-3xl pt-5">
Teaching Assistant
</h1>
<p class="text-2xl pt-5">
Basic Programming
</p>
<p class="text-xl">
September 2021 - Now
</p>
</div>
<div class="text-right">
<h1 class="text-3xl pt-5">
Teaching Assistant
</h1>
<p class="text-2xl pt-5">
Data Structures
</p>
<p class="text-xl">
February 2021 - July 2021
</p>
</div>
</div>
</div>
<h1 class="pt-24 py-12 text-5xl text-center">Projects / Competitions</h1>
<div class="flex flex-col items-center">
<div class="flex pt-10 pb-10" data-aos="fade-right" data-aos-duration="1000">
<div class="text-right px-10">
<a href="https://github.com/ADryInkCartridge/TCaptiosus">
<h1 class="text-3xl pt-5">
2nd Place Winner
</h1>
<p class="text-2xl pt-5">
Quadrathlon Software
</p>
<p class="text-2xl">
Engineering Competition
</p>
<p class="text-xl pt-5">
September 2020
</p>
</a>
</div>
<a href="https://github.com/ADryInkCartridge/TCaptiosus"><img src="Texture/image 1.png" alt=""></a>
</div>
<div class="pb-10" data-aos="fade-left" data-aos-duration="1000">
<img src="Texture/image 2.png" alt="">
<h1 class="text-3xl pt-5 text-center">
Surabaya MUN
</h1>
</div>
<div class="pb-10" data-aos="fade-right" data-aos-duration="1000">
<img src="Texture/image 3.png" alt="">
<h1 class="text-3xl pt-5 text-center">
Cerebrum
</h1>
</div>
</div>
</div>
</section>
</div>
</main>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
<script type="module" src="./main.js"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
import './style.css';
import _ from 'lodash';
import * as THREE from 'three';
var Mouse = {
moving: false,
movingForward: null,
speed: 60,
timeOfSmooth: 2000, // maxTimeOfSmooth
wheelListener: function () {
_this = this;
_this.maxSpeed = _this.speed; // set maxSpeed
document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
function onDocumentMouseWheel (event) {
_this.speed = _this.maxSpeed;
_this.moving = true;
if (event.wheelDeltaY >= 10) {
_this.movingForward = true;
} else {
_this.movingForward = false;
}
clearTimeout(_this.timeOut);
_this.timeOut = setTimeout(function () {
_this.moving = false;
}, _this.timeOfSmooth);
}
},
smooth: function () {
if (this.moving) {
if (_this.movingForward) {
Engine.camera.position.z -= _this.speed;
} else {
Engine.camera.position.z += _this.speed;
}
}
},
init: function () {
this.wheelListener();
}
};
const textureLoader = new THREE.TextureLoader();
const textureMoon = textureLoader.load("Texture/lroc_color_poles_2k.png");
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0x121212 );
const camera = new THREE.PerspectiveCamera(90, window.innerWidth/window.innerHeight,0.1, 100);
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#bg'),
alpha: true,
});
var loader = new THREE.FontLoader();
loader.load( 'https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function ( font ) {
var geometry = new THREE.TextGeometry( 'Hello Peeps!', {
font: font,
size: 0.5,
height: 0.5,
curveSegments: 4,
bevelThickness: 0.02,
bevelSize: 0.05,
bevelSegments: 3,
} );
geometry.center();
var material = new THREE.MeshStandardMaterial({
color:0xC4F1F4,
emissive:0xB2E685,
emissiveIntensity:0.4,
});
var mesh = new THREE.Mesh( geometry, material );
mesh.rotation.y = Math.PI / 2;
mesh.position.set(-5,4,0);
scene.add(mesh);
} );
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth,window.innerHeight);
camera.position.set(0, 5, 0);
camera.lookAt(-20,0,0)
const geometry = new THREE.SphereGeometry(10, 64 , 64);
const material = new THREE.MeshStandardMaterial({
map:textureMoon,
});
const Moon = new THREE.Mesh(geometry,material);
Moon.position.set(-20,0,0);
scene.add(Moon);
const pointLight = new THREE.PointLight(0xffffff, 0.3);
pointLight.position.set(-30,10,10);
const pointLight2 = new THREE.PointLight(0xffffff,0.3);
pointLight2.position.set(20,10,-20);
const pointLight3 = new THREE.PointLight(0xffffff,0.3);
pointLight3.position.set(20,10,0);
scene.add(pointLight,pointLight2,pointLight3);
const lightHelper = new THREE.PointLightHelper(pointLight);
const lightHelper2 = new THREE.PointLightHelper(pointLight2);
// const gridHelper = new THREE.GridHelper(50,50);
// scene.add(lightHelper,lightHelper2)
function addStar(){
const geometry = new THREE.SphereGeometry(0.1,24,24);
const material = new THREE.MeshStandardMaterial({color:0xffffff, emissive:0xffffff});
const star = new THREE.Mesh(geometry,material);
const [x,y,z] = Array(3).fill().map(() => THREE.MathUtils.randFloatSpread(100));
star.position.set(x,y,z);
scene.add(star);
scene.add(pointLight);
}
Array(200).fill().forEach(addStar);
function animate(){
requestAnimationFrame(animate);
Moon.rotation.y += 0.001;
renderer.render(scene,camera);
}
function panCamera(){
const t = document.body.getBoundingClientRect().top;
console.log(t)
if (Mouse.moving && Mouse.speed > 0) {
Mouse.speed -= Mouse.maxSpeed / 20;
Mouse.smooth();
}
camera.position.x = t * -0.05;
camera.position.y = 5 + t * -0.05;
camera.lookAt(-20,0,0)
}
document.body.onscroll = panCamera;
animate();
view raw main.js hosted with ❤ by GitHub

Comments

Post a Comment

Popular posts from this blog

Tugas 5 RK B

Image
 Uber Ride Deskripsi Uber Uber Technologies Inc. adalah perusahaan jaringan transportasi asal San Francisco, California, yang menciptakan aplikasi penyedia transportasi yang menghubungkan penumpang dengan sopir kendaraan sewaan serta layanan tumpangan langsung. Perusahaan ini juga mengatur layanan penjemputan di berbagai kota di seluruh dunia. Mobil dapat dipesan dengan mengirim pesan teks atau memakai aplikasi bergerak khusus—pilihan terakhir juga bisa digunakan untuk melacak lokasi mobil pesanan pengguna. Tujuan utama Uber Tujuan dari dibuatnya uber adalah untuk menjangkau semua daerah dan menghubungkan melalui transportasi. Dari sini visi dan misi Uber dapat dijabarkan sebagai: Meningkatkan kualitas hidup  Dengan adanya Uber, diharapkan pengguna mendapatkan kemudahan dalam berbagai sektor hidupnya. Selalu Tersedia bagi setiap pelanggannya Uber selalu berusaha menciptakan environment yang konsisten dan selalu tersedia kapanpun dan dimanapun. Menciptakan peluang baru Uber ber...
Read more