-
Notifications
You must be signed in to change notification settings - Fork 0
/
lofinoire.html
138 lines (123 loc) · 8.56 KB
/
lofinoire.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta name="robots" content="max-snippet:-1,max-image-preview:standard,max-video-preview:-1" />
<link rel="stylesheet" href="/style.css" />
<link rel="manifest" href="/manifest.webmanifest" />
<!-- SEO -->
<title>Lo-fi Noire - Derek Perry - derek-perry.com</title>
<meta name="description" content="Derek Perry - Interactive Design : Game, Graphic, and Web - derek-perry.com" />
<meta property="og:image" content="https://derek-perry.com/media/banner.jpg" />
<meta property="og:image:width" content="2560" />
<meta property="og:image:height" content="1440" />
<meta property="og:image:alt" content="Banner for derek-perry.com" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Lo-fi Noire - Derek Perry - derek-perry.com" />
<meta property="og:description" content="Derek Perry - Interactive Design : Game, Graphic, and Web - derek-perry.com" />
<meta property="og:site_name" content="Derek Perry - derek-perry.com" />
<meta property="og:url" content="https://derek-perry.com/lofinoire" />
<link rel="canonical" href="https://derek-perry.com/lofinoire" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@_derekperry" />
<meta name="twitter:title" content="Lo-fi Noire - Derek Perry - derek-perry.com" />
<meta name="twitter:description" content="Derek Perry - Interactive Design : Game, Graphic, and Web - derek-perry.com" />
<meta name="twitter:image" content="https://derek-perry.com/media/banner.jpg" />
<meta name="twitter:image:width" content="2560" />
<meta name="twitter:image:height" content="1440" />
<meta name="twitter:image:alt" content="Banner for derek-perry.com" />
<!-- Favicon -->
<meta name="theme-color" content="#689915" />
<link rel="icon" type="image/png" sizes="32x32" href="https://derek-perry.com/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="https://derek-perry.com/favicon/favicon-16x16.png" />
<link rel="mask-icon" href="https://derek-perry.com/favicon/safari-pinned-tab.svg" color="#689915" />
<link rel="shortcut icon" href="https://derek-perry.com/favicon/favicon.ico" />
<link rel="icon" href="https://derek-perry.com/favicon/icon-32x32.png" sizes="32x32" />
<link rel="icon" href="https://derek-perry.com/favicon/icon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" sizes="180x180" href="https://derek-perry.com/favicon/apple-touch-icon.png" />
<link rel="apple-touch-icon" href="https://derek-perry.com/favicon/icon-180x180.png" />
<meta name="msapplication-TileImage" content="https://derek-perry.com/favicon/icon-270x270.png" />
<meta name="msapplication-TileColor" content="#689915" />
<meta name="msapplication-config" content="https://derek-perry.com/favicon/browserconfig.xml" />
<!-- Analytics (Plausible) -->
<script defer data-domain="derek-perry.com" src="https://plausible.io/js/plausible.js"></script>
</head>
<body id="lofinoire" role="main">
<header id="header" role="banner">
<a href="https://derek-perry.com" title="Derek Perry" id="headerlogo">
<picture>
<source srcset="/media/logo.webp" height="50px" width="50px" type="image/webp">
<source srcset="/media/logo.png" height="50px" width="50px" type="image/png"><img height="50px" width="50px" src="/media/logo.png" alt="Derek Perry's Logo">
</picture>
<h1>Derek Perry</h1>
</a>
<h2 id="headerdescription">
<a href="https://derek-perry.com" title="Interactive Design Works by Derek Perry">Interactive Design</a>: <span id="descroles"><a href="https://derek-perry.com#games" title="Games by Derek Perry">Game</a>, <a href="https://derek-perry.com#graphics" title="Graphics by Derek Perry">Graphic</a>, & <a href="https://derek-perry.com#websites" title="Websites by Derek Perry">Web</a></span>
</h2>
</header>
<main role="main">
<article id="work">
<section id="summary">
<h2>Lo-fi Noire</h2>
<p><em>July 2, 2020 - August 27, 2020</em></p>
<ul>
<li>Game Design</li>
<li>Game Development</li>
<li>Video Editing</li>
</ul>
</section>
<section id="software">
<h2>Software Used:</h2>
<p>Perforce, Unreal Engine 4</p>
</section>
<section id="overview">
<h2>Work Overview:</h2>
<p>Mystery RPG Adventure game featuring a detective’s investigation in a retro lo-fi city. The bulk of my work on this project consisted of gameplay programming. As Tech Lead, I set up a Perforce server which got the team on Source Control, I set up and organized bulk tech systems like clues and levels, and I set up and designed the website. Shown below is my work featured, but head over to the Lo-fi Noire website to see the entire game’s progress!</p>
<hr>
<video controls autoplay muted loop preload="auto" poster="/media/lofinoire7_mainmenu.jpg" alt="Lo-fi Noire - Reel of all current features in development">
<source src="/media/lofinoire0_video-reel.mp4" type="video/mp4" />
</video>
<p>Lo-fi Noire - Reel of all current features in development</p>
<hr>
<video controls autoplay muted loop preload="auto" poster="/media/lofinoire9_clues2.jpg" alt="Lo-fi Noire Detective Mode">
<source src="/media/lofinoire5_video-clues2.mp4" type="video/mp4" />
</video>
<p>Detective Mode - Clues and their conditional Gameplay</p>
<hr>
<video controls autoplay muted loop preload="auto" poster="/media/lofinoire12_levels.jpg" alt="Lo-fi Noire Seamless Levels">
<source src="/media/lofinoire1_video-levels.mp4" type="video/mp4" />
</video>
<p>Seamless Levels</p>
<hr>
<video controls autoplay muted loop preload="auto" poster="/media/lofinoire10_intro1.jpg" alt="Lo-fi Noire Intro (Test Edit)">
<source src="/media/lofinoire2_video-intro1.mp4" type="video/mp4" />
</video>
<p>Gameplay Introduction - Pass 1 (Test Edit)</p>
<hr>
<video controls autoplay muted loop preload="auto" poster="/media/lofinoire11_intro2.jpg" alt="Lo-fi Noire Intro (In-Game Initially)">
<source src="/media/lofinoire3_video-intro2.mp4" type="video/mp4" />
</video>
<p>Gameplay Introduction - Pass 2 (In-Game Initially)</p>
</section>
</article>
</main>
<footer id="footer" role="contentinfo">
<section id="footerlinks">
<p>GitHub: <a href="https://github.com/derek-perry" target="_blank" rel="noopener noreferrer" title="derek-perry on GitHub">derek-perry</a></p>
<p>LinkedIn: <a href="https://linkedin.com/in/derek-perry" target="_blank" rel="noopener noreferrer" title="derek-perry on LinkedIn">derek-perry</a></p>
<p>YouTube: <a href="https://youtube.com/@derek-perry" target="_blank" rel="noopener noreferrer" title="@derek-perry on YouTube">@derek-perry</a></p>
<p>Twitch: <a href="https://twitch.tv/derekperry" target="_blank" rel="noopener noreferrer" title="derekperry on Twitch">derekperry</a></p>
<p>Twitter: <a href="https://twitter.com/_derekperry" target="_blank" rel="noopener noreferrer" title="_derekperry on Twitter">_derekperry</a></p>
<p>ArtStation: <a href="https://artstation.com/derekperry" target="_blank" rel="noopener noreferrer" title="derekperry on ArtStation">derekperry</a></p>
<p>Mastodon: <a href="https://mastodon.gamedev.place/@dp" target="_blank" rel="me" title="@dp on Mastodon.gamedev.place">@[email protected]</a></p>
<br>
<p>Email: <a href="mailto:[email protected]" target="_blank" title="Email Derek Perry (Work: [email protected])" rel="noopener">[email protected]</a></p>
</section>
<section id="footerlegal">
<p>© 2024 <a href="https://derek-perry.com" title="Derek Perry">Derek Perry</a> | <a href="/privacy" title="Privacy Policy">Privacy Policy</a></p>
</section>
</footer>
</body>
</html>