-
Notifications
You must be signed in to change notification settings - Fork 0
/
guess-who.html
105 lines (96 loc) · 5.17 KB
/
guess-who.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
<!DOCTYPE HTML>
<!--
Phantom by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Guess Who?</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<div class="inner">
<!-- Nav -->
<nav>
<ul>
<li><a href="#menu">Menu</a></li>
</ul>
</nav>
</div>
</header>
<!-- Menu -->
<nav id="menu">
<h2>Menu</h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about-me-temp.html">Resume</a></li>
<li>
<a href="javascript:void(0);" onclick="toggleSubMenu(event)">Projects <span class="arrow">▶</span></a>
<ul class="submenu" id="projects-submenu">
<li><a href="guess-who.html">Guess Who?</a></li>
<li><a href="monk-seal.html">Hawaiian Monkseal</a></li>
<li><a href="volunteer-app.html">Volunteer App</a></li>
<li><a href="canvas-calendar.html">Canvas Calendar</a></li>
</ul>
</li>
</ul>
</nav>
<!-- Main -->
<div id="main">
<div class="inner">
<h1 class="heading-container">
Guess Who?
<a href="https://github.com/HoldenSch/guess-who" class="icon brands style2 fa-github"><span class="label">GitHub</span></a>
</h1>
<h3 class = 'techStack'>Tech Stack: <span class="smaller-text">React, Node.js, Express.js, MySQL, Google Cloud SQL, HTML, CSS, and JavaScript</span></h3>
<h3 style="color: #B8E0D2; margin-top: -40px;" class = "role">Role: <span class="smaller-text">Co-creator</span></h3>
</body>
<p>This project is an online two-person guessing game inspired by the classic 1979 board game "Guess Who?". Developed as a Harvard CS50 Final Project, this web-based game allows players to register and log into accounts, create personalized game boards, and join other players' game boards using real-time game codes.</p>
<p>The game is built using React, Node.js, and Express.js, with a MySQL database hosted on Google Cloud SQL for managing users, game codes, and character names. Users can create private rooms, upload images to customize their game boards, and share game codes to play with friends on different devices. Furthermore, each custom board is retrievable after creation and can be easily edited using the drag-and-drop interface.</p>
<p>During gameplay, players ask yes-or-no questions to guess their opponent's secret character. For example, a player might ask, "Does your character wear glasses?" Based on the opponent's response, the player can then eliminate characters from their board that do not match the given answer. This process continues with real-time updates to the game board until one player successfully guesses the opponent's secret character.</p>
<p>This project was completed over two weeks and demonstrates a full-stack web development approach, combining a dynamic front-end with a robust backend to deliver an interactive, engaging, and fun user experience.</p>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/KMx_znlUkG8?si=I-v5EKKmv93-JBgL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<section>
<h2>Contact Information</h2>
<p>
Name: Holden Schermer<br>
Email: <a href="mailto:[email protected]">[email protected]</a><br>
Phone: <a href="tel:+18083887955">+1 (808) 388-7955</a>
</p>
</section>
<section>
<h2>Connect</h2>
<ul class="icons">
<li><a href="https://www.linkedin.com/in/holdenschermer/" class="icon brands style2 fa-linkedin"><span class="label">Dribbble</span></a></li>
<li><a href="https://github.com/HoldenSch" class="icon brands style2 fa-github"><span class="label">GitHub</span></a></li>
<li><a href="mailto:[email protected]" class="icon solid style2 fa-envelope"><span class="label">Email</span></a></li>
<li><a href="tel:+18083887955" class="icon solid style2 fa-phone"><span class="label">Phone</span></a></li>
</ul>
</section>
</div>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/sub_nav.js"></script>
</body>
</html>