-
Notifications
You must be signed in to change notification settings - Fork 0
/
pacmen_summary.html
117 lines (89 loc) · 4.93 KB
/
pacmen_summary.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Portfolio Details - PacMen Exercise</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/myimgs/isandex_favicon.png" rel="icon">
<link href="assets/img/myimgs/isandex_favicon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- =======================================================
* Template Name: Personal - v4.7.0
* Template URL: https://bootstrapmade.com/personal-free-resume-bootstrap-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
* Modified by Jose L. Ulloa - May 2022
======================================================== -->
</head>
<body>
<main id="main">
<!-- ======= Portfolio Details ======= -->
<div id="portfolio-details" class="portfolio-details">
<div class="container">
<div class="row">
<div class="col-lg-8">
<h2 class="portfolio-title">Summary of the PacMen Exercise</h2>
<div class="portfolio-details-slider swiper">
<div class="swiper-wrapper align-items-center">
<div class="swiper-slide">
<img src="assets/img/portfolio/pacmen-4.png" alt="" height="520px">
</div>
<div class="swiper-slide">
<img src="assets/img/portfolio/pacmen-7.png" alt="" height="520px">
</div>
<div class="swiper-slide">
<img src="assets/img/portfolio/pacmen-9.png" alt="" height="520px">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="col-lg-4 portfolio-info">
<h3>Project information</h3>
<ul>
<li><strong>Category</strong>: Web design (Front End)</li>
<li><strong>Client</strong>: N/A</li>
<li><strong>Project date</strong>: 27 May, 2022</li>
<li><strong>Project link</strong>: <a href="https://jlulloaa.github.io/pacmen">PacMen demo</a></li>
<li><strong><a href="https://github.com/jlulloaa/pacmen" target="_blank">Access PacMen's Github Repository</a></strong> (opens in a new tab)</li>
</ul>
<p>
PacMen Factory is an exercise to help understanding the concepts of asynchronous programming and callback functions in javascript, interacting with the DOM via javascript and exploring formatting capabilities with CSS styles and bootstrap templates. By defining an area within the page we setup the boundaries for the pacmen, so they can only "move" within that area. Whenever they hit any edge of the area, they squash a little and revert direction, moving back to the opposite edge. The buttons to the left and the slider at the bottom, allow controlling the action.
</p>
</div>
</div>
</div>
</div><!-- End Portfolio Details -->
</main><!-- End #main -->
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/personal-free-resume-bootstrap-template/ -->
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
<!-- Vendor JS Files -->
<script src="assets/vendor/purecounter/purecounter.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
<!-- <script src="assets/vendor/php-email-form/validate.js"></script> -->
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>