Done some stuff

2026-03-26 09:28:03 +01:00
parent 7c0fe5d697
commit 136b1bdea9
12 changed files with 156 additions and 80 deletions
--- a/about/index.html
+++ b/about/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Ayabusa club - About me</title>
+    <link rel="stylesheet" href="./style.css">
+    <!--<script src="script.js"></script> -->
+</head>
+<body>
+    <center>
+        <img class="smurf" src="../assets/smurf.jpg"/>
+        <h1 class="title_font">ABOUT ME</h1>
+        <p class="soos">
+            Hi it's me Ayabusa! I'm a CS student and I love tinkering with everything that falls my hands!<br>
+            As of 2026 to 2030 I am following a CS engineering degree in France.
+        </p>
+        <h2 class="title_font">INTERESTS</h2>
+        <p class="soos">
+            I'm currently interested in programming, reverse-engineering, and embedded systems and I'm eager to learn more about them.<br>
+            On the topic of embedded system, I especially like to tinker with various calculators. You can view my humble collection <a href="https://my.calcs.quest/u/725">here</a>.<br>
+                I also like to climb especially bouldering :D
+        </p>
+        <h2 class="title_font">STUFF I LIKE</h2>
+        <h3 class="title_font">SOFTWARE</h3>
+        <p class="soos">
+            <ul class="soos" style="list-style-position: inside;">
+                <li>Linux Mint: Damn this OS is just the best, you've got a free n opensource OS where everything just works out of da box.</li>
+                <li>Vim: I didn't like it at first, but I got to admit it's pretty good. I also like Zed in vim mode when working on bigger project.</li>
+                <li>Thorium: My personnal favorite. It's like chromium but on steroids.</li>
+                <li>IDA: What can I say, there is just nothing that comes close to it.</li>
+            </ul>
+        </p>
+        <h3 class="title_font">OTHER WEBSITES</h3>
+        <div>
+            <img class="button" src="../assets/hcu1.gif" tppabs="" alt="hcu" border="0" vspace="0" hspace="0"/>
+            <a draggable="false" target="_blank" href="https://digdeeper.club/"><img class="button" draggable="false" src="https://digdeeper.club/images/button.png" alt="DigDeeper"></a>
+            <a href="//gnu.org" aria-label="GNU website"><img class="button" alt="GNU/Linux" src="../assets/gnu_linux.jpeg" width="88" height="31"></a>
+        </div>
+    </center>
+</body>
+</html>
--- a/about/style.css
+++ b/about/style.css
@@ -0,0 +1,48 @@
+@font-face {
+    font-family: 'smurf';
+    src: url('../assets/smurf.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+         url('../assets/smurf.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
+}
+
+@font-face {
+    font-family: 'soos';
+    src: url('../assets/soos.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+         url('../assets/soos.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
+}
+
+body {
+    background-color: #f3d42f;
+}
+
+img {
+    height: 25vh;
+}
+
+.title_font {
+    font-family: "smurf";
+    color: black;
+    margin: 0;
+}
+
+h1 {
+    font-size: 50px;
+}
+
+h2 {
+    font-size: 35px;
+}
+
+h3 {
+    font-size: 28px;
+}
+
+.soos {
+    font-family: "soos";
+    font-size: 25px;
+}
+
+.button {
+    width: 114px;
+    height: 43px;
+    image-rendering: pixelated;
+}
--- a/assets/doctor_soos/Doctor
+++ b/assets/doctor_soos/Doctor
--- a/assets/gnu_linux.jpeg
+++ b/assets/gnu_linux.jpeg
--- a/assets/hcu1.gif
+++ b/assets/hcu1.gif
--- a/assets/smurf.jpg
+++ b/assets/smurf.jpg
--- a/assets/smurf.ttf
+++ b/assets/smurf.ttf
--- a/assets/smurf.woff
+++ b/assets/smurf.woff
--- a/assets/soos.ttf
+++ b/assets/soos.ttf
--- a/assets/soos.woff
+++ b/assets/soos.woff
--- a/index.html
+++ b/index.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html>
  <head>
+    <title>Ayabusa club</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
@@ -56,7 +57,7 @@
      </div>
      <div class="mt-[3vw] flex flex-row space-x-[3vw] w-full">
          <div class="w-[55vw] font-[sftr] leading-[5vw] text-[7vw] flex flex-col">
-              <a href="projects.html" class="group flex flex-row w-full justify-between">
+              <a href="projects" class="group flex flex-row w-full justify-between">
                  <svg class="opacity-0 group-hover:opacity-100 mt-[-0.5vw] mb-[0.5vw] ms-[0.3vw]" xmlns="http://www.w3.org/2000/svg" height="5vw" fill="currentColor" class="bi bi-caret-right-fill" viewBox="5 0 8 16">
                    <path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
                  </svg>
@@ -80,7 +81,26 @@
                    <path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/>
                  </svg>
              </a>
-              <script src="sphere.js"></script>
+              <div class="flex flex-row w-full mt-[3vw]">
+                  <div>
+                      <canvas id="cvs" class="outline-[0.7vw]"></canvas>
+                      <script src="sphere.js"></script>
+                  </div>
+                  <div class="flex flex-col w-full ms-[3vw] justify-between">
+                      <a href="about" class="group flex flex-row w-full justify-between">
+                          <svg class="opacity-0 group-hover:opacity-100 mt-[-0.5vw] mb-[0.5vw] ms-[0.3vw]" xmlns="http://www.w3.org/2000/svg" height="5vw" fill="currentColor" class="bi bi-caret-right-fill" viewBox="5 0 8 16">
+                            <path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
+                          </svg>
+                          <p class="">About</p>
+                      </a>
+                      <a href="contact" class="group flex flex-row w-full justify-between">
+                          <p class="">Contact</p>
+                          <svg class="opacity-0 group-hover:opacity-100 mt-[-0.5vw] mb-[0.5vw] ms-[0.3vw]" xmlns="http://www.w3.org/2000/svg" height="5vw" fill="currentColor" class="bi bi-caret-left-fill" viewBox="3 0 10 16">
+                            <path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/>
+                          </svg>
+                      </a>
+                  </div>
+              </div>
          </div>
          <div class="w-[45vw] space-y-[3vw]">
            <div class="outline-[0.7vw] p-[0.7vw]">
--- a/sphere.js
+++ b/sphere.js
@@ -1,69 +1,63 @@
 const {cos, sin, sqrt, acos, atan, atan2, abs, PI} = Math
 const clamp = (a, b, x) => x < a ? a : x > b ? b : x
-const cvs = document.createElement('canvas')
+const cvs = document.getElementById("cvs")
 const ctx = cvs.getContext('2d')

-const RADIUS             = 150
-const NB_SECTIONS        = 6
-const LINE_WIDTH         = 3
+const NB_SECTIONS = 6
+const SCALE = devicePixelRatio

-const SCALE  = devicePixelRatio
-const width  = RADIUS * 2 + 20
-const height = RADIUS * 2 + 20
-cvs.width  = width  * SCALE
-cvs.height = height * SCALE
-cvs.style.width  = `${width }px`
-cvs.style.height = `${height}px`
+let RADIUS, width, height, LINE_WIDTH

-document.body.appendChild(cvs)
+const SPHERE_SIZE = 0.15 // % of viewport width

-const vec = (x = 0, y = 0, z = 0) => ({x, y, z})
-
-vec.set = (o, x = 0, y = 0, z = 0) => {
-  o.x = x
-  o.y = y
-  o.z = z
-  return o
+function resize() {
+  const vw = window.innerWidth * SPHERE_SIZE
+  RADIUS     = Math.round((vw - 20) / 2)
+  LINE_WIDTH = vw / 50  // adjust the divisor to taste
+  width  = RADIUS * 2 + 20
+  height = RADIUS * 2 + 20
+  cvs.width  = width  * SCALE
+  cvs.height = height * SCALE
+  cvs.style.width  = `${SPHERE_SIZE * 100}vw`
+  cvs.style.height = `${SPHERE_SIZE * 100}vw`
+  ctx.setTransform(SCALE, 0, 0, SCALE, 0, 0)
+  ctx.fillStyle = '#071c2dff'
+  ctx.lineCap   = 'round'
 }

-const X = vec(1, 0, 0)
-const Y = vec(0, 1, 0)
-const Z = vec(0, 0, 1)
+resize()
+window.addEventListener('resize', resize)

 // orientation of camera
 let theta, phi

+const vec = (x = 0, y = 0, z = 0) => ({x, y, z})
+vec.set = (o, x = 0, y = 0, z = 0) => { o.x = x; o.y = y; o.z = z; return o }
+const Z = vec(0, 0, 1)
+
 function project(o, {x, y, z}) {
  let ct = cos(theta), st = sin(theta)
  let cp = cos(phi),   sp = sin(phi)
-
-  // original projection
-  let a = x * ct + y * st
+  let a  = x * ct + y * st
  let px = y * ct - x * st
  let py = cp * z - sp * a
  let pz = cp * a + sp * z
-
-  // --- add subtle right tilt (KEY PART) ---
  let tilt = -0.2
  let cr = cos(tilt), sr = sin(tilt)
-
  let tx = cr * px - sr * pz
  let tz = sr * px + cr * pz
-
  return vec.set(o, tx, py, tz)
 }

-// draw camera-facing section of sphere with normal v and offset o (-1 < o < 1)
 const _p = vec()
 function draw_section(n, o = 0) {
-  let {x, y, z} = project(_p, n) // project normal on camera
-  let a  = atan2(y, x)           // angle of projected normal -> angle of ellipse
-  let ry = sqrt(1 - o * o)       // radius of section -> y-radius of ellipse
-  let rx = ry * abs(z)           // x-radius of ellipse
+  let {x, y, z} = project(_p, n)
+  let a  = atan2(y, x)
+  let ry = sqrt(1 - o * o)
+  let rx = ry * abs(z)
  let W  = sqrt(x * x + y * y)
-  let sa = acos(clamp(-1, 1, o * (1 / W - W) / rx)) // ellipse start angle
-  let sb = z > 0 ? 2 * PI - sa : - sa                    // ellipse end angle
-
+  let sa = acos(clamp(-1, 1, o * (1 / W - W) / rx))
+  let sb = z > 0 ? 2 * PI - sa : -sa
  ctx.beginPath()
  ctx.ellipse(x * o * RADIUS, y * o * RADIUS, rx * RADIUS, ry * RADIUS, a, sa, sb, z <= 0)
  ctx.stroke()
@@ -71,67 +65,40 @@ function draw_section(n, o = 0) {

 const _n = vec()
 function draw_arcs() {
-  if (with_great_circles.checked)
-    for (let i = NB_SECTIONS; i--;) {
-      let a = i / NB_SECTIONS * Math.PI
-      draw_section(vec.set(_n, cos(a), sin(a)))
-    }
-
+  for (let i = NB_SECTIONS; i--;) {
+    let a = i / NB_SECTIONS * PI
+    draw_section(vec.set(_n, cos(a), sin(a)))
+  }
  for (let i = NB_SECTIONS - 1; i--;) {
-    let a = (i + 1) / NB_SECTIONS * Math.PI
+    let a = (i + 1) / NB_SECTIONS * PI
    draw_section(Z, cos(a))
-    if (with_sections.checked) {
-      draw_section(X, cos(a))
-      draw_section(Y, cos(a))
-    }
  }
 }

-const front_grad = ctx.createRadialGradient(0, 0, RADIUS * 2 / 3, 0, 0, RADIUS)
-const back_grad  = ctx.createRadialGradient(0, 0, RADIUS * 2 / 3, 0, 0, RADIUS)
-
-front_grad.addColorStop(0, '#8bc8feff')
-front_grad.addColorStop(1, '#8bc8feff')
-back_grad.addColorStop(1, '#8bc8feff')
-back_grad.addColorStop(0, '#8bc8feff')
-
 ctx.fillStyle = '#071c2dff'
 ctx.lineCap = 'round'
-ctx.scale(SCALE, SCALE)

 function render() {
  requestAnimationFrame(render)
-
  theta = performance.now() / 6000 * PI
  phi   = 1
-
-  // 1. change the basis of the canvas
  ctx.save()
-  ctx.fillRect(0, 0, width, height)
+  ctx.clearRect(0, 0, width, height)
  ctx.translate(width >> 1, height >> 1)
  ctx.scale(1, -1)
-
-  // 2. draw back arcs
-  if (with_back.checked) {
-    ctx.lineWidth = LINE_WIDTH / 2
-    ctx.strokeStyle = with_gradient.checked ? back_grad : '#8bc8feff'
-    ctx.scale(-1, -1) // the trick is to flip the canvas
-    draw_arcs()
-    ctx.scale(-1, -1)
-  }
-
-  // 3. draw sphere border
-  ctx.strokeStyle = with_gradient.checked ? '#8bc8feff' : '#8bc8feff'
+  ctx.lineWidth = LINE_WIDTH / 2
+  ctx.strokeStyle = '#8bc8feff'
+  ctx.scale(-1, -1)
+  draw_arcs()
+  ctx.scale(-1, -1)
+  ctx.strokeStyle = '#8bc8feff'
  ctx.lineWidth = LINE_WIDTH + 2
  ctx.beginPath()
-  ctx.arc(0, 0, RADIUS, 0, 2 * Math.PI)
+  ctx.arc(0, 0, RADIUS, 0, 2 * PI)
  ctx.stroke()
-
-  // 4. draw front arcs
  ctx.lineWidth = LINE_WIDTH
-  ctx.strokeStyle = with_gradient.checked ? front_grad : '#8bc8feff'
+  ctx.strokeStyle = '#8bc8feff'
  draw_arcs()
-
  ctx.restore()
 }