JustSpirit.dev/index.html at main · ImJustSpirit/JustSpirit.dev · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JustSpirit.dev</title>
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Share+Tech&display=swap">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
</head>
<body>
    <div class="splash">
        <div class="cover"></div>
        <p class="fade-in">JustSpirit.dev</p>
    </div>
    <h1>JustSpirit.dev</h1>
    <div class="about">
        <p>Hey, I'm Jack, and this is my website (although that's pretty obvious). I'm currently a <strong>Games Development</strong> student studying at <strong>Teeside University</strong> hailing from <strong>Newcastle.</strong></p>
        <br>
        <p>Games in general have been a longtime love of mine, but while I <em>do</em> love the creative side (bar anything artistic; I just don't have the eye for it), coding has been my true calling for as long as I can remember. I've spent time learning web languages such as <strong>HTML</strong> and <strong>CSS</strong>, while my latter school years were dedicated to <strong>Python</strong>. I'm currently in the process of teaching myself <strong>Unity</strong> with <strong>C#</strong>.</p>
        <br>
        <p>Other than games, I like reading all sorts such as manga, light, web, and normal novels. I <em>do</em> like going for walks, even if I don't go on them as often as I should. I stream multiple times a week playing a variety of games.</p>
        <br>
        <p>This website primarily serves as a place for my portfolio, where I can show off all the work I am proud of completing, or at least starting on, either solo or with friends.</p>
        <br>
        <a>I currently do most my work under the studio name <a target="_blank" rel="noopener noreferrer" href="https://infallinteractive.carrd.co/">Infall Interactive</a> where I work on projects and jams with my friends. I host basically everything I do over on <a target="_blank" rel="noopener noreferrer" href="https://github.com/ImJustSpirit">GitHub</a>, and if you ever want to reach out to me, you can do so through <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/jackcpetty/">LinkedIn</a>.</p>
    </div>
    <div class="pageSelect">
        <button type="button" class="learn" title="A page with useful information on learning game development and adjacent topics." onclick="window.location.href='https://learn.JustSpirit.dev/';">Learn</button>
        <div class="links">
            <a target="_blank" rel="noopener noreferrer" href="https://github.com/ImJustSpirit"><i class="bi bi-github" title="GitHub"></i></a>
            <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/jackcpetty/"><i class="bi bi-linkedin" title="LinkedIn"></i></a>
            <a target="_blank" rel="noopener noreferrer" href="https://infallinteractive.itch.io/"><i class="bi bi-shop-window" title="itch.io"></i></a>
        </div>
        <hr>
        <button type="button" class="extras" title="Sorry, the extras page isn't ready yet."disabled>Extras</button>
    </div>
    <br>
    <div class="portfolio">
        <h2>Portfolio</h2>
        <!-- <div class="folioPiece" id="">
            <img src="" alt="No Relevant Image" class="pieceImg">
            <h3 class="pieceTitle"></h3>
            <div class="pieceText"></div>
            <h3 class="pieceCata">
                <i class="bi bi-code-slash" title="I did programming on this project"></i>
                <i class="bi bi-file-earmark-text-fill" title="I did design on this project"></i>
                <i class="bi bi-gear-fill" title="I did production on this project"></i>
            </h3>
            <div class="pieceLinks">
                <a target="_blank" rel="noopener noreferrer" href=""><i class="bi bi-trello" title="Trello"></i></a>
                <a target="_blank" rel="noopener noreferrer" href=""><i class="bi bi-github" title="GitHub"></i></a>
                <a target="_blank" rel="noopener noreferrer" href=""><i class="bi bi-archive-fill" title="Files"></i></a>
                <a target="_blank" rel="noopener noreferrer" href=""><i class="bi bi-image-fill" title="Image"></i></a>
                <a target="_blank" rel="noopener noreferrer" href=""><i class="bi bi-globe2" title="Website"></i></a>
                <a target="_blank" rel="noopener noreferrer" href=""><i class="bi bi-youtube" title="YouTube"></i></a>
            </div>
            <p class="pieceDates"></p>
            <hr class="pieceDivide" style="width: 50vw;">
        </div> -->
        <div class="folioPiece" id="Engine">
            <img src="Assets/Engine.png" alt="Cover Image" class="pieceImg">
            <h3 class="pieceTitle">Ouroboros Engine</h3>
            <div class="pieceText">Ouroboros Engine was made for GMTK Jam 2025 by me, <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/danrawlinson/">Dan</a>, <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/floart/">Aleks</a> and with music by <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/hussnay/">Taylor</a>. We took the theme of "Loop" and turned it into a looping train tower-defence game. While the game is visually great and wasn't that buggy on completion, we had problems creating an interesting and interactive gameplay loop which many people gave us feedback on.</div>
            <h3 class="pieceCata">
                <i class="bi bi-code-slash" title="I did programming on this project"></i>
                <i class="bi bi-file-earmark-text-fill" title="I did design on this project"></i>
                <i class="bi bi-gear-fill" title="I did production on this project"></i>
            </h3>
            <div class="pieceLinks">
                <a target="_blank" rel="noopener noreferrer" href="https://infallinteractive.itch.io/ouroboros-engine"><i class="bi bi-globe2" title="Website"></i></a>
            </div>
            <p class="pieceDates">July 30th 2025 > Aug 3rd 2025</p>
            <hr class="pieceDivide" style="width: 50vw;">
        </div>
        <div class="folioPiece" id="Tutorial">
            <img src="Assets/TutorialTHUMB.png" alt="YouTube Thumbnail" class="pieceImg">
            <h3 class="pieceTitle">Unreal Engine Platformer Tutorial</h3>
            <div class="pieceText">Earlier in the year, my class had a practical exam creeping up on us, so I put together this tutorial video which provided a basic rundown of common mechanics which people could use as an aid for their own independent learning.</div>
            <h3 class="pieceCata">
                <i class="bi bi-code-slash" title="I did programming on this project"></i>
                <i class="bi bi-file-earmark-text-fill" style="opacity: 25%; cursor: default;"></i>
                <i class="bi bi-gear-fill" title="I did production on this project"></i>
            </h3>
            <div class="pieceLinks">
                <a target="_blank" rel="noopener noreferrer" href="https://youtu.be/eC90YEohSpU?si=aBOaPamEKpePrWmm"><i class="bi bi-youtube" title="YouTube"></i></a>
            </div>
            <p class="pieceDates">March 7th 2024</p>
            <hr class="pieceDivide" style="width: 50vw;">
        </div>
        <div class="folioPiece" id="DungeonMerchant">
            <img src="Assets/DungeonMerchantTHUMB.png" alt="A double page spread containing information about the game Dungeon Merchant." class="pieceImg">
            <h3 class="pieceTitle">Dungeon Merchant</h3>
            <div class="pieceText">Dungeon Merchant was originally created as part of a college assignment in the run up to an exam. It was to test and reinforce the ability to come up with a game concept aligned with a client's request. Later in the year, I compiled a lot of the main components of the design into a double page spread.</div>
            <h3 class="pieceCata">
                <i class="bi bi-code-slash" style="opacity: 25%; cursor: default;"></i>
                <i class="bi bi-file-earmark-text-fill" title="I did design on this project"></i>
                <i class="bi bi-gear-fill" style="opacity: 25%; cursor: default;"></i>
            </h3>
            <div class="pieceLinks">
            </div>
            <p class="pieceDates"></p>
            <hr class="pieceDivide" style="width: 50vw;">
        </div>
        <div class="folioPiece" id="JS.dev">
            <img src="Assets/JustSpiritdevTHUMB.png" alt="Image of this website's splashscreen" class="pieceImg">
            <h3 class="pieceTitle">JustSpirit.dev</h3>
            <div class="pieceText">JustSpirit.dev is the very website you are reading this on. I always wanted to do a website portfolio/cv instead of some <em>boring</em> pdf. However, as I went through all the work of setting up this website (including squashing some annoying and confusing bugs), I don't plan to limit myself to a portfolio.</div>
            <h3 class="pieceCata">
                <i class="bi bi-code-slash" title="I did programming on this project"></i>
                <i class="bi bi-file-earmark-text-fill" style="opacity: 25%; cursor: default;"></i>
                <i class="bi bi-gear-fill" style="opacity: 25%; cursor: default;"></i>
            </h3>
            <div class="pieceLinks">
                <a target="_blank" rel="noopener noreferrer" href="https://github.com/ImJustSpirit/JustSpirit.dev"><i class="bi bi-github" title="GitHub"></i></a>
                <a target="_blank" rel="noopener noreferrer" href="https://JustSpirit.dev"><i class="bi bi-globe2" title="Website"></i></a>
            </div>
            <p class="pieceDates">Oct 28th 2023 > Present</p>
            <hr class="pieceDivide" style="width: 50vw;">
        </div>
        <div class="folioPiece" id="HighNoon">
            <img src="Assets/HighNoonTHUMB.jpg" alt="Image of the High Noon map" class="pieceImg">
            <h3 class="pieceTitle">High Noon</h3>
            <div class="pieceText">High Noon was the accumulation of one of the final assignments we got during our first year of college. We were paired up into teams of three or four, given a few pitches, and just had to run with them. Alongside <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/hussnay/">Taylor</a>, <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/elliott-websell-64489628a/">Elliott</a>, and <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/isaac-nelson-a3595a28b/">Isaac</a>, I learned what it truly meant to plan a game, an experience that continues to assist me to this day.<br><br>In all honesty, I would happily talk anyone's ear off about the entire experience surrounding High Noon. Instead, you can find my final evaluation of the assignment <a target="_blank" rel="noopener noreferrer" href="https://drive.google.com/file/d/1Y00_CQV6ZKAHFqCzwu20-itq1xMP3rl9/view?usp=sharing">here</a>, as well as all the files, presentations, and documents we created below.</div>
            <h3 class="pieceCata">
                <i class="bi bi-code-slash"  style="opacity: 25%; cursor: default;"></i>
                <i class="bi bi-file-earmark-text-fill" title="I did design on this project"></i>
                <i class="bi bi-gear-fill" title="I did production on this project"></i>
            </h3>
            <div class="pieceLinks">
                <a target="_blank" rel="noopener noreferrer" href="https://trello.com/b/GMMFYpZQ"><i class="bi bi-trello" title="Trello"></i></a>
                <a target="_blank" rel="noopener noreferrer" href="https://drive.google.com/drive/folders/1CkTh2FnJ7WZI5N11FSmaj1rkD8RzwW6h?usp=sharing"><i class="bi bi-archive-fill" title="Files"></i></a>
            </div>
            <p class="pieceDates">Mar 22th 2023 > May 25th 2023</p>
            <hr class="pieceDivide" style="width: 50vw;">
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

<!--

These are just here for easy access, I should remove them or at least move them but they're perfectly fine here.

<div class="folioPiece" id="">
    <img src="" alt="No Relevant Image" class="pieceImg">
    <h3 class="pieceTitle"></h3>
    <div class="pieceText"></div>
    <h3 class="pieceCata">
        <i class="bi bi-code-slash" title="I did programming on this project"></i>
        <i class="bi bi-file-earmark-text-fill" title="I did design on this project"></i>
        <i class="bi bi-gear-fill" title="I did production on this project"></i>
    </h3>
    <div class="pieceLinks">
        <a target="_blank" rel="noopener noreferrer" href=""><i class="bi bi-trello" title="Trello"></i></a>
        <a target="_blank" rel="noopener noreferrer" href=""><i class="bi bi-github" title="GitHub"></i></a>
        <a target="_blank" rel="noopener noreferrer" href=""><i class="bi bi-archive-fill" title="Files"></i></a>
        <a target="_blank" rel="noopener noreferrer" href=""><i class="bi bi-image-fill" title="Image"></i></a>
        <a target="_blank" rel="noopener noreferrer" href=""><i class="bi bi-globe2" title="Website"></i></a>
        <a target="_blank" rel="noopener noreferrer" href=""><i class="bi bi-youtube" title="YouTube"></i></a>
    </div>
    <p class="pieceDates"></p>
    <hr class="pieceDivide" style="width: 50vw;">
</div>

<a target="_blank" rel="noopener noreferrer" href=""></a>
<a target="_blank" rel="noopener noreferrer" href="https://github.com/ImJustSpirit">GitHub</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/jackcpetty/">LinkedIn</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/hussnay/">Taylor</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/ellie-jane-gregory-581583289/">Ellie</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/sam-clark-72b803288/">Sam</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/thomas-cross-589527288/">Thomas</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/kathryn-hawes-07b6a8288/">Kathryn</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/danrawlinson/">Dan</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/floart/">Aleks</a>

-->