web/index.html at main · eberjohns/web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simulation Hub</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" type="image/png" href="assets/sim_hub.png">
</head>
<body>

  <header>
    <h1>Simulation Hub</h1>
    <p>Created by <strong>Eber Johns C D</strong></p>
  </header>

  <main class="grid">
    <div class="card">
      <div class="thumb">
        <img src="assets/sand.jpg" alt="Sand Simulation">
      </div>
      <div class="card-content">
        <h3>Sand Simulation</h3>
        <p>Falling sand particles simulation with physics-inspired behavior.</p>
        <a href="simulations/sand.html" class="launch-btn">Launch</a>
      </div>
    </div>

    <div class="card">
      <div class="thumb">
        <img src="assets/starfield.jpg" alt="Starfield">
      </div>
      <div class="card-content">
        <h3>Starfield Simulation</h3>
        <p>Fly through a mesmerizing starfield that mimics infinite space travel.</p>
        <a href="simulations/starfield.html" class="launch-btn">Launch</a>
      </div>
    </div>

    <div class="card">
      <div class="thumb">
        <img src="assets/chain.jpg" alt="Chain Simulation">
      </div>
      <div class="card-content">
        <h3>Chain Simulation</h3>
        <p>Physics-based chain simulation showcasing constraints and movement.</p>
        <a href="simulations/chain.html" class="launch-btn">Launch</a>
      </div>
    </div>
    <div class="card">
      <div class="thumb">
        <img src="assets/roboarm.jpg" alt="IK using Roboarm">
      </div>
      <div class="card-content">
        <h3>IK Simulation</h3>
        <p>Inverse Kinematics simulation using a 2 armed robo which follows you.</p>
        <a href="simulations/roboarm.html" class="launch-btn">Launch</a>
      </div>
    </div>

    <div class="card">
      <div class="thumb">
        <img src="assets/grid.jpg" alt="Grid">
      </div>
      <div class="card-content">
        <h3>Grid</h3>
        <p>A grid which will be later build to showcase vectors and all.</p>
        <a href="simulations/grid.html" class="launch-btn">Launch</a>
      </div>
    </div>

    <div class="card">
      <div class="thumb">
        <img src="assets/perceptron.jpg" alt="Grid">
      </div>
      <div class="card-content">
        <h3>Perceptron</h3>
        <p>Visualise how perceptron - single node of a neural network learn to predict line equation from hundreds of point data.</p>
        <a href="simulations/perceptron.html" class="launch-btn">Launch</a>
      </div>
    </div>

  </main>

  <footer>
    © 2025 Eber Johns C D |
    <a href="https://www.linkedin.com/in/eber-johns-c-d/" target="_blank">LinkedIn</a> |
    <a href="https://github.com/eberjohns" target="_blank">GitHub</a>
  </footer>

</body>
</html>