-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
211 lines (203 loc) · 8.66 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
206
207
208
209
210
211
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JoshiMonsta | Home</title>
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/1260c4e6a5.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="gridcontainer">
<header>
<nav>
<div>
<a href="https://www.twitch.tv/joshimonsta" target="_blank"
><i class="fa-brands fa-twitch"></i>Twitch</a
>
</div>
<div>
<a href="https://www.youtube.com/joshimonsta" target="_blank"
><i class="fa-brands fa-youtube"></i>Youtube</a
>
</div>
<div>
<a href="https://steamcommunity.com/id/crashbash111" target="_blank"
><i class="fa-brands fa-steam"></i>Steam</a
>
</div>
<div>
<a href="https://github.com/crashbash111" target="_blank"
><i class="fa-brands fa-github"></i>Github</a
>
</div>
<div>
<a href="http://discord.gg/JPcvGU4" target="_blank"
><i class="fa-brands fa-discord"></i>Discord</a
>
</div>
</nav>
<div class="title">
<div class="animwrap"><img src="./img/monstaicon.png" width="300px" /></div>
<h1>JoshiMonsta</h1>
<h2>Studios</h2>
</div>
<div class="right">
<div class="animwrap">
<h2><i class="fa-solid fa-gamepad"></i>
I make <span class="gameColour">Games</span>
</h2>
</div>
<div class="animwrap">
<h2><i class="fa-solid fa-calendar-check"></i>
I organise <span class="eventColour">Events</span>
</h2>
</div>
<div class="animwrap">
<h2><i class="fa-solid fa-file-code"></i>
I develop
<span style="color: rgb(70, 134, 218);"><b></span><span class="webColour">Websites</span><span style="color: rgb(70, 134, 218)"></b></span>
</h2>
</div>
</div>
<div class="bottom">
<a href="#myprojects">
<p>My Projects</p>
<p><i class="fa-solid fa-angles-down"></i></p>
</a>
</div>
</header>
<main>
<h1 id="myprojects">
My Projects
</h1>
<!-- I have experience with
HTML, CSS, JavaScript, TypeScript, React.js, jQuery, Bootstrap
Node.js, MySQL MongoDB, SQL Server, ASP.NET Core
Git, Linux, Docker, Unity, Android Studio, Electron, Bash, C#, Java, Kotlin, Python -->
<div class="containerProjects" id="myprojects">
<div style="background-image: url('./img/deepcove.jpg');">
<div class="innerShadow">
<h1 class="webColour">Interactive Kiosks</h1>
<p>A web-based touch solution developed for the Deep Cove Outdoor Education Trust.<br>Designed to recover from power outages and function with no internet access on-site.</p>
<div class="links">
<p><a href="https://github.com/crashbash111/dcoet-kiosk" target="_blank"><i class="fa-brands fa-github"></i>Github Repository</a></p>
<p><a href="./resources/KTM_ProjectPoster.pdf" target="_blank"><i class="fa-solid fa-file-pdf"></i>Poster</a></p>
<p><a href="./resources/KTM_FinalDocumentation.pdf" target="_blank"><i class="fa-solid fa-file-pdf"></i>Documentation</a></p>
</div>
</div>
</div>
<div style="background-image: url('./img/res-empire.png');">
<div class="innerShadow">
<h1 class="gameColour">Restaurant Empire</h1>
<p>Powered by Unity, Restaurant Empire is a multi-player restaurant tycoon game, where players fight for the highest market-share in a procedurally generated city.<br>
This project is actively being developed in a private repository since 2019.</p>
<div class="links">
<p><a href="https://github.com/crashbash111/restaurant-empire" target="_blank"><i class="fa-brands fa-github"></i>Github Repository</a></p>
<p><a href="https://www.youtube.com/watch?v=zxSiTMjEeqk" target="_blank"><i class="fa-brands fa-youtube"></i>Unofficial Joke Trailer</a></p>
</div>
</div>
</div>
<div style="background-image: url('./img/mc-server.png');">
<div class="innerShadow">
<h1 class="eventColour">Monsta Haven Discord</h1>
<p>A community discord for gaming and making new friends, run by myself and our friendly moderators.<br>
We regularly run game events, and even occasionally game servers!</p>
<div class="links">
<p><a href="http://discord.gg/JPcvGU4" target="_blank"><i class="fa-brands fa-discord"></i>Server Invite</a></p>
</div>
</div>
</div>
<div style="background-image: url('./img/catlins.jpg');">
<div class="innerShadow">
<h1 class="webColour">Catlins Honey Website</h1>
<p>Catlins Honey is a supplier of beekeeping equipment, and producers of New Zealand's finest honeys.<br>
I designed a PHP based website to display products, all managed from an easy-to-use secure dashboard.</p>
<div class="links">
<p><a href="https://www.catlinshoney.co.nz" target="_blank"><i class="fa-solid fa-globe"></i>Website</a></p>
<p><a href="https://www.facebook.com/CatlinsHoneyNz" target="_blank"><i class="fa-brands fa-facebook"></i>Facebook</a></p>
</div>
</div>
</div>
<div style="background-image: url('./img/learn.png');">
<div class="innerShadow">
<h1 class="webColour">Learn</h1>
<p>Learn is an LMS actively being developed to make learning much more fun and interactive. Learn is built with an ASP.NET Core back-end, and utilises React and Tailwind on the front-end.</p>
<div class="links">
<p><a href="https://github.com/crashbash111/bitinvers_learn" target="_blank"><i class="fa-brands fa-github"></i>Github Repository</a></p>
<p><a href="https://learn.bitinvers.com" target="_blank"><i class="fa-solid fa-globe"></i>Website</a></p>
</div>
</div>
</div>
</div>
</main>
<footer>
<h3>My Socials</h3>
<div class="socials">
<div>
<a href="https://www.twitch.tv/joshimonsta" target="_blank"
><i class="fa-brands fa-twitch"></i>Twitch</a
>
</div>
<div>
<a href="https://www.youtube.com/joshimonsta" target="_blank"
><i class="fa-brands fa-youtube"></i>Youtube</a
>
</div>
<div>
<a href="https://steamcommunity.com/id/crashbash111" target="_blank"
><i class="fa-brands fa-steam"></i>Steam</a
>
</div>
<div>
<a href="https://github.com/crashbash111" target="_blank"
><i class="fa-brands fa-github"></i>Github</a
>
</div>
<div>
<a href="http://discord.gg/JPcvGU4" target="_blank"
><i class="fa-brands fa-discord"></i>Discord</a
>
</div>
</div>
<br />
<p
style="
font-size: small;
color: rgb(112, 112, 112);
letter-spacing: 2px;
"
>
JoshiMonsta Studios ™
</p>
</footer>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const links = document.querySelectorAll("header a");
links.forEach(function (link) {
const href = link.getAttribute("href");
if (href && href.startsWith("#")) {
link.addEventListener("click", function (event) {
event.preventDefault();
const targetId = href.substring(1);
const targetElement = document.getElementById(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest",
easing: "cubic-bezier(0.42, 0, 0.58, 1)",
duration: 5000,
});
}
});
}
});
});
</script>
</body>
</html>