Add files via upload

diamondbroplayz · Nov 24, 2023 · c102c0d · c102c0d
1 parent f32cb56
commit c102c0d
Show file tree

Hide file tree

Showing 12 changed files with 1,036 additions and 0 deletions.
diff --git a/counter.js b/counter.js
@@ -0,0 +1,9 @@
+export function setupCounter(element) {
+  let counter = 0
+  const setCounter = (count) => {
+    counter = count
+    element.innerHTML = `count is ${counter}`
+  }
+  element.addEventListener('click', () => setCounter(counter + 1))
+  setCounter(0)
+}
diff --git a/dbp.png b/dbp.png
diff --git a/index.html b/index.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DBP's Website</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  </head>
+  <body>
+    <canvas id="bg"></canvas>
+
+    <main>
+
+      <header>
+        <h1>DiamondBroPlayz</h1>
+        <p>🚀 Welcome to my website!</p>
+        <div style="text-align: center;">
+          <a href="#" onclick="alert('@4lett')"><i class="fa-brands fa-discord" style="color: #5339cc;"></i></a>
+          <a href="https://youtube.com/@DiamondBroPlayz" target="_blank"><i class="fa-brands fa-youtube" style="color: #ff2424;"></i></a>
+          <a href="https://github.com/DiamondBroPlayz" target="_blank"><i class="fa-brands fa-github" style="color: #ffffff;"></i></a>
+        </div>
+      </header>
+
+
+      <blockquote>
+        <p>I like coding stuff and putting it on the internet</p>
+      </blockquote>
+
+      <section class="light">
+        <h2>👩🏽‍🚀 Projects</h2>
+
+        <ul>
+          <li><a style="text-decoration: none; color: rgb(102, 78, 235);" href="https://github.com/DiamondBroPlayz/CookieClone">Cookie Clicker Clone</a></li>
+          <li><a style="text-decoration: none; color: rgb(102, 78, 235);" href="https://wavysblog.github.io/Blog2/">My Coding Blog</a></li>
+          <li><a style="text-decoration: none; color: rgb(102, 78, 235);" href="https://github.com/DiamondBroPlayz/Auto-Greeter">An Automatic Notification greeter</a></li>
+          <li><a style="text-decoration: none; color: rgb(102, 78, 235);" href="https://dbpsmath.github.io">An Unblocked Game website</a></li>
+          <li><a style="text-decoration: none; color: rgb(102, 78, 235);" href="https://github.com/DiamondBroPlayz/DBP-Stress-Tester">A Fake Stress Tester</a></li>
+          <li><a style="text-decoration: none; color: rgb(102, 78, 235);" href="https://github.com/DiamondBroPlayz/RocketAltitudeCalculator">A Altitude Calculator for Rockets</a></li>
+        </ul>
+
+        <h2>🏆 Accomplishments</h2>
+
+        <p>
+
+          <ul>
+            <li>Learning Node.JS</li>
+          </ul>
+        </p>
+
+      </section>
+
+      <blockquote>
+        <p>When I wrote this code, only God and I understood what I did. Now only God knows.  <br>–Anonymous</p>
+      </blockquote>
+
+      <blockquote>
+        <p>Thanks for coming to my website!</p>
+      </blockquote>
+
+
+    </main>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/javascript.svg b/javascript.svg
diff --git a/main.js b/main.js
@@ -0,0 +1,130 @@
+import './style.css';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+
+// Setup
+
+const scene = new THREE.Scene();
+
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+
+const renderer = new THREE.WebGLRenderer({
+  canvas: document.querySelector('#bg'),
+});
+
+renderer.setPixelRatio(window.devicePixelRatio);
+renderer.setSize(window.innerWidth, window.innerHeight);
+camera.position.setZ(30);
+camera.position.setX(-3);
+
+renderer.render(scene, camera);
+
+// Torus
+
+const geometry = new THREE.TorusGeometry(10, 3, 16, 100);
+const material = new THREE.MeshStandardMaterial({ color: 0xff6347 });
+const torus = new THREE.Mesh(geometry, material);
+
+scene.add(torus);
+
+// Lights
+
+const pointLight = new THREE.PointLight(0xffffff);
+pointLight.position.set(5, 5, 5);
+
+const ambientLight = new THREE.AmbientLight(0xffffff);
+scene.add(pointLight, ambientLight);
+
+// Helpers
+
+// const lightHelper = new THREE.PointLightHelper(pointLight)
+// const gridHelper = new THREE.GridHelper(200, 50);
+// scene.add(lightHelper, gridHelper)
+
+// const controls = new OrbitControls(camera, renderer.domElement);
+
+function addStar() {
+  const geometry = new THREE.SphereGeometry(0.25, 24, 24);
+  const material = new THREE.MeshStandardMaterial({ color: 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);
+}
+
+Array(200).fill().forEach(addStar);
+
+// Background
+
+const spaceTexture = new THREE.TextureLoader().load('space.jpg');
+scene.background = spaceTexture;
+
+// Avatar
+
+const jeffTexture = new THREE.TextureLoader().load('dbp.png');
+
+const jeff = new THREE.Mesh(new THREE.BoxGeometry(3, 3, 3), new THREE.MeshBasicMaterial({ map: jeffTexture }));
+
+scene.add(jeff);
+
+// Moon
+
+const moonTexture = new THREE.TextureLoader().load('moon.jpg');
+const normalTexture = new THREE.TextureLoader().load('normal.jpg');
+
+const moon = new THREE.Mesh(
+  new THREE.SphereGeometry(3, 32, 32),
+  new THREE.MeshStandardMaterial({
+    map: moonTexture,
+    normalMap: normalTexture,
+  })
+);
+
+scene.add(moon);
+
+moon.position.z = 30;
+moon.position.setX(-10);
+
+jeff.position.z = -5;
+jeff.position.x = 2;
+
+// Scroll Animation
+
+function moveCamera() {
+  const t = document.body.getBoundingClientRect().top;
+  moon.rotation.x += 0.05;
+  moon.rotation.y += 0.075;
+  moon.rotation.z += 0.05;
+
+  jeff.rotation.y += 0.01;
+  jeff.rotation.z += 0.01;
+
+  camera.position.z = t * -0.01;
+  camera.position.x = t * -0.0002;
+  camera.rotation.y = t * -0.0002;
+}
+
+document.body.onscroll = moveCamera;
+moveCamera();
+
+// Animation Loop
+
+function animate() {
+  requestAnimationFrame(animate);
+
+  torus.rotation.x += 0.01;
+  torus.rotation.y += 0.005;
+  torus.rotation.z += 0.01;
+
+  moon.rotation.x += 0.005;
+
+  // controls.update();
+
+  renderer.render(scene, camera);
+}
+
+animate();
diff --git a/moon.jpg b/moon.jpg
diff --git a/normal.jpg b/normal.jpg