-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (138 loc) · 9.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
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE HTML>
<html>
<head>
<title>Survive: A Text-Based Zombie Apocalypse RPG for iOS</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="Explore 'Survive', a text-based zombie apocalypse RPG developed by Gustavo Vazquez using SwiftUI for iOS. Make choices that shape your adventure!" />
<link rel="preload" href="assets/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="assets/css/main.css"></noscript>
</head>
<body class="is-preload">
<!-- Nav -->
<nav id="nav">
<ul class="container">
<li><a href="#about">About</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#showcase">Screenshots</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- About the Project -->
<article id="about" class="wrapper style1">
<div class="container">
<header>
<h1>Survive</h1>
</header>
<div class="row">
<div class="col-4 col-5-large col-12-medium">
<span class="image fit"><img src="images/initialWelcomeImage.jpg" alt="Initial welcome screen of Survive game" /></span>
</div>
<div class="col-8 col-7-large col-12-medium centered-text">
<p>Survive is my inaugural venture into iOS development using Swift and SwiftUI. This text-based RPG immerses players into a zombie apocalypse, where every choice they make influences their journey. The game is designed to be both engaging and immersive, featuring comic-style images that complement the narrative.</p>
<p>In Survive, players awaken in a world overrun by zombies and must navigate through a series of decisions that determine the outcome of their adventure. From start to finish, creating this game has been an incredibly fun and educational experience, offering deep insights into SwiftUI’s navigation and state management features. Each decision branches the story, pushing players to strategize their way through the apocalypse and ultimately survive.</p>
<a href="#features" class="button large scrolly">Dive into Game Features</a>
</div>
</div>
</div>
</article>
<!-- Game Highlights -->
<article id="features" class="wrapper style2">
<div class="container">
<header>
<h1>Game Features</h1>
<p>Survive is designed to be a dynamic storytelling experience, where every decision changes the course of the game.</p>
</header>
<div class="row aln-center">
<div class="col-4 col-6-medium col-12-small">
<section class="box style1">
<span class="icon featured fas fa-pen-fancy"></span>
<h3>Dynamic Storytelling</h3>
<p>In its current form, the game features a single ending, but the foundation is laid for future expansion. Each decision shapes the narrative, and there is significant potential to develop multiple storylines and endings based on user choices. This initial version provides a glimpse into the dynamic storytelling possibilities that could be explored as the project evolves.</p>
</section>
</div>
<div class="col-4 col-6-medium col-12-small">
<section class="box style1">
<span class="icon featured fas fa-images"></span>
<h3>Immersive Visuals</h3>
<p>Immerse yourself in the narrative through beautifully crafted comic-style images generated with AI. These visuals enhance the storytelling by bringing key scenes to life, adding depth and atmosphere to the text-based adventure. Each image complements the narrative, helping to visualize the world and characters of the zombie apocalypse, enriching the overall experience.</p>
</section>
</div>
<div class="col-4 col-6-medium col-12-small">
<section class="box style1">
<span class="icon featured fas fa-route"></span>
<h3>Decision Impact</h3>
<p>In Survive, every choice you make influences the narrative and story progression, though all paths currently lead to the same ending. This design ensures that each decision impacts the journey and provides a unique experience. There is significant potential to expand the game further, allowing for multiple endings and a richer narrative based on player choices.</p>
</section>
</div>
</div>
<footer>
<p>Survive is more than a game; it's an evolving adventure inviting you to explore new paths with every decision.</p>
</footer>
</div>
</article>
<!-- App Showcase -->
<article id="showcase" class="wrapper style3">
<div class="container">
<header>
<h1>App Showcase</h1>
<p>Discover snapshots of Survive's gameplay through the images below. Each screenshot provides a glimpse into different aspects of the app, showcasing the development process and key features.</p>
</header>
<div class="row">
<div class="col-4 col-6-medium col-12-small">
<article class="box style2">
<a href="#" class="image featured"><img src="images/dynamicStoryTellingImage.jpg" alt="Dynamic storytelling feature in Survive" /></a>
<h3><a href="#">Overview</a></h3>
<p>The concept for Survive was inspired by a deep fascination with zombies and the goal of creating a simple, text-based app to gain hands-on experience with what I have been learning. This screenshot highlights the beginning of the game, showcasing the initial chapter with static images and text for players to read.</p>
</article>
</div>
<div class="col-4 col-6-medium col-12-small">
<article class="box style2">
<a href="#" class="image featured"><img src="images/pickYourPathImage.jpg" alt="Pick your path choices in Survive" /></a>
<h3><a href="#">Inspiration</a></h3>
<p>Drawing inspiration from old Goosebumps books that featured interactive storytelling, this image showcases a part of the app where users encounter interactive choices. It provides a sample of the decisions players can make, influencing their experience within the game.</p>
</article>
</div>
<div class="col-4 col-6-medium col-12-small">
<article class="box style2">
<a href="#" class="image featured"><img src="images/immersiveVisualsImage.jpg" alt="Immersive visuals in Survive" /></a>
<h3><a href="#">Challenges</a></h3>
<p>One of the biggest challenges faced was mastering `NavigationView` and `NavigationStack` to link views based on user interactions. Managing these components effectively was crucial for creating a seamless navigation experience in the app.</p>
</article>
</div>
</div>
<footer>
<p>Discover more about the development journey and the potential for future expansions.</p>
<a href="https://github.com/Great-Visions-Code/Survive" class="button large scrolly">Check out Survive on GitHub</a>
</footer>
</div>
</article>
<!-- Contact -->
<article id="contact" class="wrapper style4">
<div class="container medium">
<div class="col-12">
<hr />
<h3>Get in Touch</h3>
<ul class="social">
<li><a href="https://github.com/Great-Visions-Code" class="icon brands fa-github" aria-label="GitHub Profile"><span class="label">GitHub</span></a></li>
<li><a href="mailto:great.visions@icloud.com" class="icon solid fa-envelope" aria-label="Email Gustavo Vazquez"><span class="label">Email</span></a></li>
</ul>
<hr />
</div>
<footer>
<ul id="copyright">
<li>© Gustavo Vazquez. All rights reserved.</li>
<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</footer>
</div>
</article>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.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>
</body>
</html>