-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
205 lines (192 loc) · 12.4 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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kill The Past</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/btn.css">
</head>
<!-- comentario agregado -->
<body>
<!-- Markup of navbar -->
<header>
<button class="nav-toggle">
<span class="hamburger"></span>
</button>
<!-- Markup of small logo -->
<div class="smalllogo">
<a href="#welcome-section" class="logolink">
<h2>Kill The Past</h2>
</a>
</div>
<nav class="nav" id="navbar">
<div class="logo">
<a href="index.html" id="logo">
<h1>Kill The Past</h1>
</a>
</div>
<ul class="nav__list" id="navlinkitems">
<li class="nav__item">
<a href="#home-section" class="nav__link" id="home">Home</a>
</li>
<li class="nav__item">
<a href="#guide-section" class="nav__link" id="guide">Guide</a>
</li>
<li class="nav__item">
<a href="#concepts-section" class="nav__link" id="concepts">Concepts</a>
</li>
<li class="nav__item">
<a href="#sudaverse-section" class="nav__link" id="sudaverse">Sudaverse</a>
</li>
<li class="nav__item">
<a href="#author-section" class="nav__link" id="author">Author</a>
</li>
<li class="nav__item">
<a href="#contacts-section" class="nav__link" id="contact">Contact</a>
</li>
</ul>
</nav>
</header>
<!-- Markup of sections -->
<section class="section one" id="home-section">
<div class="titular">
<h1>KILL THE PAST</h1>
<h2>Getting Started Into The “Kill the Past” Series – Suda51’s Lifework</h2>
<h3>A guide to get started on Suda51’s Kill the Past series, a thread of
commonalities across his games</h3>
</div>
</section>
<!-- guide -->
<section class="section two txt-white" id="guide-section">
<div class="titular">
<h1>Beginner Guide</h1>
<p>This is a beginner guide about all games made by Suda51 that are commonly agreed to be part of the "Kill
the Past" series. All of them share the same continuity and similar themes that make up the backbone of
Suda's entire lifework in his 27+ year old carrer. It commonly focuses on the idea of the past being a
burden that needs to be overcome in order to face the future. It also has themes such as political
corruption, rampant urban development, existencial anguish and the threat of data collection.</p>
<button class="btnGuide" role="button"
onClick="newWindow = window.open('https://raw.githubusercontent.com/PabloDamianRomero/kill-the-past/main/img/guide/guide.png');">View
Guide</button>
</div>
</section>
<!-- concepts -->
<section class="section three txt-white txt-left" id="concepts-section">
<div class="titular">
<h1>¿WHAT IS KILL THE PAST?</h1>
<p>Kill the Past is a series of games with similar thematic tones or directly connected to a shared
universe. It depicts characters in various walks of life who refuse or are either unable to let go of
their past in ways that catch up to them without fail. In Kill the Past, to refuse to face your past is
to die. Unable to move on, unable to understand, it is akin to live in a constant purgatory. Facing your
past is the most difficult and most important part of a person’s life. It acknowledges the understanding
of your self, your struggles, your fears, and your hopes. The past becomes the missing link that bridges
every facet of a person’s identity. It is then quite on point that the work of the western fandom to
piece things together is to face Suda51’s past head-on.</p>
<p>But Kill the Past is still a bit more than that, it represents a lot of punk essence of Suda and the
Grasshopper company. Its dadaist inspirations shine through all these games, many of them being
counter-culture, defying established conventions through the writing but also as a game, and carrying an
overall sense of anti-capitalism. Common themes revolve around political corruption, rampant urban
development and its consequences like the breaking down of communities for a more individualistic
society both at a professional and personal level.</p>
<br>
<p>A lot of these elements and themes find their main inspiration through Suda’s own life as described in
his biography. Starting as an only child from a single mother in an era of Japan where divorce was still
heavily frowned upon, from the loneliness of his youth, his emancipation through music and pop culture
as well as the various jobs he has taken early in his adult life from handbag designer to door-to-door
salesman to funeral service worker. These are all events of his life that ends up coming back in his
games in one way or another. He is someone who lived in the urban transformation of Japan, from the
then-rural Nagano to the life in Tokyo where the vastness of the city is only matched by the intense
loneliness it brings.</p>
<br>
<p id="bio">
<img src="img/suda51.jpg" alt="suda51">
Kill the Past becomes a theme that applies as much to its creator than it does to the characters he
creates. An ensemble of characters where each of them represents a specific part of Suda’s life that
struggles to find a meaning that could exist but is futile to search for. The answer, then, is to learn
to face what’s behind you in order to finally move forward. To process what kind of person you are, and
to learn what kind of person you want to be. As such, his way of processing it becomes inherently
postmodernistic, as if purposefully avoiding what has been done in order to find his own answers through
paths that none has taken before. Grasshopper’s games are never strictly one genre, they blend together,
sometimes bringing something new, sometimes bringing something old, in order to seek their answers in
new and unpredictable ways, as if they themselves are going with the currents, and checking out what is
beyond the hill next to the branch they managed to latch on to.
</p>
</div>
</section>
<!-- sudaverse -->
<section class="section four txt-left" id="sudaverse-section">
<div class="titular">
<h1>THE SUDAVERSE</h1>
<p>The connection between the Kill the Past games always brought the question of whether or not there was a
broader universe shared by all of Grasshopper’s games. This question was always teased but never
confirmed, that is until Travis Strikes Again: No More Heroes. The release of this game brought the
Sudaverse to the forefront, making many games linked together whether or not they are part of the Kill
the Past series, even the ever-elusive Killer7. Examples of non-KTP games that are part of the broader
Sudaverse (and as such part of the same timeline) are: Shadows of the Damned, Killer is Dead, Diabolical
Pitch and Michigan: Report from Hell. Some are a definite and accepted part of the universe, some others
might be more debatable and potentially offer alternate versions that fits the universe more, but all of
these are accepted to be a part of the Sudaverse in one way or another.</p>
</div>
</section>
<section class="section five" id="author-section">
<div class="titular">
<h1>SITE AUTHOR</h1>
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="our-team">
<div class="picture">
<img class="img-fluid" src="img/travis.jpeg">
</div>
<div class="team-content">
<h3 class="name">Pablo Romero</h3>
<h4 class="title">@Grasshopper51</h4>
</div>
<ul class="social">
<li><a href="https://twitter.com/pablo_drom97" aria-hidden="true"><img alt="X"
src="https://www.vectorlogo.zone/logos/x/x-icon.svg" height="12" /></a></li>
<li><a href="https://instagram.com/grasshopper51_/" aria-hidden="true"><img alt="Instagram"
src="https://www.vectorlogo.zone/logos/instagram/instagram-icon.svg"
height="12" /></a></li>
<li><a href="https://youtube.com/@Grasshopper51/featured" aria-hidden="true"><img alt="YouTube"
src="https://www.vectorlogo.zone/logos/youtube/youtube-icon.svg"
height="12" /></a></li>
<li><a href="https://steamcommunity.com/id/grasshopper51/" aria-hidden="true"><img alt="Steam"
src="https://www.vectorlogo.zone/logos/steampowered/steampowered-icon.svg"
height="12" /></a></li>
<li><a href="https://github.com/PabloDamianRomero" aria-hidden="true"><img alt="GitHub"
src="https://www.vectorlogo.zone/logos/github/github-icon.svg"
height="12" /></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section six" id="contacts-section"></section>
<div id="pageUp" onclick="scrollUp();">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
d="M352 296l-96-96-96 96" />
<path d="M256 64C150 64 64 150 64 256s86 192 192 192 192-86 192-192S362 64 256 64z" fill="none"
stroke="currentColor" stroke-miterlimit="10" stroke-width="32" />
</svg>
</div>
<script src="js/script.js"></script>
</body>
</html>