-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (123 loc) · 6.14 KB
/
index.html
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!doctype html>
<html lang="en">
<head>
<!-- source: https://getbootstrap.com/docs/5.0/examples/album -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Sébastian Le Merdy">
<title>p5.js gallery</title>
<link rel="canonical" href="https://seblm.github.io/processing">
<link href="lib/bootstrap-5.3.2/bootstrap.min.css" rel="stylesheet">
<link rel="icon" href="assets/favicon.ico">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.p5js {
background-color: #ed225d;
}
</style>
</head>
<body>
<header>
<div class="navbar navbar-dark shadow-sm p5js">
<div class="container">
<a href="#" class="navbar-brand d-flex align-items-center">
<strong>p5.js gallery</strong>
</a>
</div>
</div>
</header>
<main>
<section class="py-5 text-center container">
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">
<h1 class="fw-light">my p5.js gallery</h1>
<p class="lead text-muted">Each of my p5.js programs ultimately goes here. You can enjoy browsing my work and see source code to get inspired.</p>
<p>
<a href="#gallery" class="btn btn-primary my-2">See all examples</a>
<a href="https://github.com/seblm/processing" class="btn btn-secondary my-2">Show source code</a>
</p>
</div>
</div>
</section>
<div id="gallery" class="album py-5 bg-light">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<div class="col">
<div class="card shadow-sm">
<a href="circle-with-lines"><img src="circle-with-lines/assets/capture.png" class="bd-placeholder-img card-img-top" alt="drawing a circle with lines"></a>
<div class="card-body">
<p class="card-text">My daughter explained to me that her teacher has shown her how to draw a circle with lines. Here is the result of her explanation.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<a class="btn btn-sm btn-outline-secondary" href="circle-with-lines">View</a>
<a class="btn btn-sm btn-outline-secondary" href="https://github.com/seblm/processing/blob/main/circle-with-lines/sketch.js">Code</a>
</div>
<small class="text-muted">2023-09-17</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<a href="multiplication-tables-training"><img src="multiplication-tables-training/assets/capture.png" class="bd-placeholder-img card-img-top" alt="multiplication tables"></a>
<div class="card-body">
<p class="card-text">Multiplication tables training</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<a class="btn btn-sm btn-outline-secondary" href="multiplication-tables-training">View</a>
<a class="btn btn-sm btn-outline-secondary" href="https://github.com/seblm/processing/blob/main/multiplication-tables-training/sketch.js">Code</a>
</div>
<small class="text-muted">2021-01-03</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<a href="consecutives-notes-training"><img src="consecutives-notes-training/assets/capture.png" class="bd-placeholder-img card-img-top" alt="a child puzzle"></a>
<div class="card-body">
<p class="card-text">My <a href="https://www.youtube.com/watch?v=f1QgGXwtGk4&list=PLlvpBSx7C9g0d1mlu7S2JPkAQWgFwL38k&index=1&t=392s">youtube teacher</a> tell me to known very much which musical note is next and before each other. This program helps me to train my brain to memorize it.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<a class="btn btn-sm btn-outline-secondary" href="consecutives-notes-training">View</a>
<a class="btn btn-sm btn-outline-secondary" href="https://github.com/seblm/processing/blob/main/consecutives-notes-training/sketch.js">Code</a>
</div>
<small class="text-muted">2020-12-29</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<a href="child-puzzle"><img src="child-puzzle/assets/capture.png" class="bd-placeholder-img card-img-top" alt="a child puzzle"></a>
<div class="card-body">
<p class="card-text">A puzzle to help children masterize mouse. Each 3x3 tile should be clicked to reveal one of three images.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<a class="btn btn-sm btn-outline-secondary" href="child-puzzle">View</a>
<a class="btn btn-sm btn-outline-secondary" href="https://github.com/seblm/processing/blob/main/child-puzzle/sketch.js">Code</a>
</div>
<small class="text-muted">2020-12-29</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="lib/bootstrap-5.3.2/bootstrap.bundle.min.js"></script>
</body>
</html>