p5-creative-coding/index.html at master · SpookyCorgi/p5-creative-coding · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" type="image/x-icon" href="favicon.svg">
  <title>James Lee's Creative Coding Projects</title>

  <link rel="stylesheet" type="text/css" href="style.css">
  <!--https://animate.style/-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
  <!--Google font-->
  <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=Rubik+Mono+One&family=Rubik:wght@300&display=swap"
    rel="stylesheet">
  <!--jquery-->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
      <!--p5.js-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>

</head>

<body>
  <div class="content">
    <script src="sketch.js"></script>
    <div class="title">
      <h1 class="animate__animated animate__lightSpeedInLeft neon">Helloooooo there!</h1>
      <h3 >Welcome to James Lee's Creative Coding
        project
        page</h3>
      <h3 >Here is the list of them!</h3>
    </div>

    <div id="projects" class="projects">
      <a class="project-item neon-shadow" href="./projects/led/index.html">L E D
        <img src="assets/led_thumb.png" alt="This is a thumbnail"></a>
      <a class="project-item neon-shadow" href="./projects/lissajous/index.html">L I S S A J O U S
        <img src="assets/lissajous_thumb.png" alt="This is a thumbnail"></a>
      <a class="project-item neon-shadow" href="./projects/drip/index.html">D R I P
        <img src="assets/drip_thumb.png" alt="This is a thumbnail"></a>
      <a class="project-item neon-shadow" href="./projects/spiral/index.html">S P I R A L
        <img src="assets/spiral_thumb.png" alt="This is a thumbnail"></a>
      <a class="project-item neon-shadow" href="./projects/domino/index.html">D O M I N O
        <img src="assets/domino_thumb.png" alt="This is a thumbnail"></a>
      <a class="project-item neon-shadow" href="./projects/mandala/index.html">M A N D A L A
        <img src="assets/mandala_thumb.png" alt="This is a thumbnail"></a>
      <a class="project-item neon-shadow" href="./projects/poem/index.html">P O E M
        <img src="assets/poem_thumb.png" alt="This is a thumbnail"></a>
      <a class="project-item neon-shadow" href="./projects/qr-music/index.html">Q R - M U S I C
        <img src="assets/qr_music_thumb.png" alt="This is a thumbnail"></a>
      <a class="project-item neon-shadow" href="./projects/crypto/index.html">C R Y P T O
        <img src="assets/crypto_thumb.png" alt="This is a thumbnail"></a>
      <a class="project-item neon-shadow" href="./projects/mirror/index.html">M I R R O R
        <img src="assets/mirror_thumb.png" alt="This is a thumbnail"></a>
      <a class="project-item neon-shadow" href="./projects/earthquake/index.html">Q U A K E
        <img src="assets/earthquake_thumb.png" alt="This is a thumbnail"></a>
      <a class="project-item neon-shadow" href="./projects/30-nyc/index.html">3 0 - N Y C
        <img src="assets/30_nyc_thumb.png" alt="This is a thumbnail"></a>

    </div>
  </div>
</body>

<footer>
  <hr>
  <a href="https://jameslee.ninja"><h3>More about me</h3></a>
</footer>

<script type="text/javascript">
  $(document).ready(function () {
    window.setTimeout(scrollToProjects, 2000)
    function scrollToProjects() {
      if($(document).scrollTop()<$('#projects').offset().top){
        $('html, body').animate({
        scrollTop: $('#projects').offset().top
        }, 1000)
      }
    }
  });</script>

</html>