-
Notifications
You must be signed in to change notification settings - Fork 0
/
coding-samples.html
169 lines (159 loc) · 8.39 KB
/
coding-samples.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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cecilio's Coding Samples</title>
<link rel="icon" href="./asset-images/Cecilio-Favicon.png" type="image/x-icon">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="js/bootstrap.bundle.min.js">
<link rel="stylesheet" href="css/style.css">
<script src="script.js"></script>
</head>
<body>
<!-- Navigation -->
<header class="p-3 border-bottom">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<!-- <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
</a> -->
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="index.html" class="nav-link px-2 link-secondary">Intro</a></li>
<li><a href="coding-samples.html" class="nav-link px-2 link-body-emphasis">Coding Samples</a></li>
<li><a href="https://ceciliosanchez.com/contact/" target="_blank" class="nav-link px-2 link-body-emphasis">Collaborations</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
<input type="search" class="form-control" placeholder="Search..." aria-label="Search">
</form>
<!-- <div class="dropdown text-end">
<a href="#" class="d-block link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
</a>
<ul class="dropdown-menu text-small">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul> -->
</div>
</div>
</div>
</header>
<!-- Central Content -->
<div class="container">
<!-- Page Heading -->
<h1 class="my-4">
<small>CODING SAMPLES</small>
</h1>
<div class="row">
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="https://ceciliosanchez.com/github/xpro/tennis_simulation/serve.html" target="_blank"><img class="card-img-top" src="img/screenshot-tennis-simulation.png" alt="Tennis Simulation Game"></a>
<div class="card-body">
<h4 class="card-title">
<a href="https://ceciliosanchez.com/github/xpro/tennis_simulation/serve.html" target="_blank">Tennis Simulation</a>
</h4>
<p class="card-text">The Tennis Ball Simulation project is an interactive web animation showcasing bouncing tennis balls with realistic physics,
such as collision detection and deformation effects upon impact with walls. It demonstrates JavaScript, HTML, and CSS skills. Users can serve or remove balls via control buttons.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="https://ceciliosanchez.com/github/xpro/big_bang_pills/bigBang.html" target="_blank"><img class="card-img-top" src="img/screenshot-bigbang-pills.png" alt="Big Bang Pills Animation"></a>
<div class="card-body">
<h4 class="card-title">
<a href="https://ceciliosanchez.com/github/xpro/big_bang_pills/bigBang.html" target="_blank">Big Bang Pills</a>
</h4>
<p class="card-text">"Big Bang of Pills" features bouncing gradient-colored balls on a dynamic background using HTML5
Canvas for smooth, realistic animations.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="https://ceciliosanchez.com/github/xpro/flowing_particles/one-dimension-motion.html" target="_blank"><img class="card-img-top" src="img/screenshot-moving-particles.png" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="https://ceciliosanchez.com/github/xpro/flowing_particles/one-dimension-motion.html" target="_blank">Flowing Particles</a>
</h4>
<p class="card-text">"Flowing Particles" is a JavaScript project that creates rotating particles, which change
size upon hitting walls. It includes an HTML file for the canvas and a JS file for particle effects.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="https://ceciliosanchez.com/github/xpro/moving_eyes/eyes.html" target="_blank"><img class="card-img-top" src="img/screenshot-moving-eyes.png" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="https://ceciliosanchez.com/github/xpro/moving_eyes/eyes.html" target="_blank">Moving Eyes</a>
</h4>
<p class="card-text">"Moving Eyes" is a JavaScript and CSS project that animates eyes that follow the mouse,
creating a spooky monster pillow effect. It includes HTML, JS, and CSS files for functionality and styling.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="https://ceciliosanchez.com/github/xpro/pac_pills/pac-pills.html" target="_blank"><img class="card-img-top" src="img/screenshot-game-pacpills.png" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="https://ceciliosanchez.com/github/xpro/pac_pills/pac-pills.html" target="_blank">Pac Pills</a>
</h4>
<p class="card-text">"Pac Pill Game" is a simple animation of a Pac-Man-like character moving across the screen,
changing direction at the edges. It features smooth animation, responsive design, and control buttons to start,
stop, or reset the animation. The project showcases HTML, CSS, and JavaScript programming.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="https://ceciliosanchez.com/github/xpro/moving_balls/ball.html" target="_blank"><img class="card-img-top" src="img/screenshot-moving-balls.png" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="https://ceciliosanchez.com/github/xpro/moving_balls/ball.html" target="_blank">Moving Balls</a>
</h4>
<p class="card-text">"Moving Balls" is a JavaScript project featuring animated, colorful balls moving randomly on a deep ocean backdrop.
It showcases HTML, and JS languages for ball creation, and animation logic.</p>
</div>
</div>
</div>
</div>
<!-- /.row -->
<!-- Pagination -->
<ul class="pagination justify-content-center">
<!--
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
-->
</ul>
</div>
<!-- /.container -->
<!-- Footer -->
<div class="text-center mt-5 mb-5">
2024 © Cecilio Sanchez
</div>
</body>
</html>