-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
138 lines (113 loc) · 5.17 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
<!DOCTYPE html>
<html lang="en">
<head>
<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=Montserrat:wght@200;400;800&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script defer src="index.js"></script>
<title>Luke Willis</title>
</head>
<body>
<!--Fancy star BG-->
<script>
const canvas = document.createElement("canvas");
canvas.width = 512;
canvas.height = 512;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#ffffff";
// Generate starfield
for (let i = 0; i < 250; i++) {
ctx.globalAlpha = 0.2 + Math.random() / 4;
ctx.beginPath();
ctx.arc(
Math.round(Math.random() * canvas.width),
Math.round(Math.random() * canvas.height),
1 + (Math.random() * 2),
0, 2 * Math.PI
);
ctx.fill();
}
// Set background image to canvas
document.body.style.backgroundImage = `url(${canvas.toDataURL()})`;
document.body.style.animation = 'bgAnim 20s linear infinite';
</script>
<main class="page" id="home">
<div id="title">
<h1>Luke Willis</h1>
<p>Theatre and Gamedev enthusiast</p>
</div>
<br />
<br />
<br />
<div id="options">
<a class="glow_text" onclick="set_page('about')">About me</a><br>
<a class="glow_text" onclick="set_page('projects')">Projects</a><br>
<a class="glow_text" onclick="set_page('misc')">Misc</a><br>
</div>
</main>
<main class="page" id="about" hidden>
<div>
<h1>Howdy!</h1>
<p>
My name is Luke Willis.<br><br>
I've loved video games since I was young - but I loved the idea of making them even more.<br><br>Thanks to this,
I've been learning to program! It can be a bit difficult sometimes, but it's 100 percent worth it.<br><br>I'm
fluent in JavaScript, I know a little C++, and I'm currently learning the Rust programming language.<br><br>I
also love to act! I'm not particularly great in the singing or dancing department, but I like to think I'm
pretty funny. Granted, I'm not the most skilled out there, but it certainly is fun.<br><br>If you want to
contact me, my e-mail is willisluke262@gmail.com. I can't guarantee I'll respond, but I'll do my best!
</p>
</div>
<img src="./img/photo.jpg" alt="Funny-looking guy">
</main>
<main class="page" id="projects" hidden>
<div class="project">
<h3>Nameless Sky</h3>
<p>What if Final fantasy from the Super Nintendo was a sandbox game? That's what this game is. Or, at least what
it'll hopefully be. It's still a work in progress. It's being made in Rust, which I'm still learning as of right
now.</p>
<img src="./img/nameless-sky.png"><i>Screenshot from the old JavaScript version of the game (<a
href="http://sirfluffdev.github.io/nameless-sky">HERE</a> if you're interested!)</i>
</div>
<div class="project">
<h3>Farm Galaxy</h3>
<p>Imagine if stardew valley was also a space exploration game. Wouldn't that be something? This is mostly just an
idea as of right now, but there is an OST being made for it by my good friend, C3aloeV.</p>
<i>This hasn't really been worked on yet, so no image. Sorry!</i>
</div>
<div class="project">
<h3>LukeTunes</h3>
<p>A simple MP3 player and organizer. Haven't made it yet, but I do need an app like it; so I figured I could make
one.</p>
<i>This hasn't really been worked on yet, so no image. Sorry!</i>
</div>
<div class="project">
<h3>Sonic The Hedgehog GB</h3>
<p>I thought it might be fun to make a Sonic The Hedgehog game in the style of the gameboy. So I did. More of a
tech demo than anything else, but still pretty nifty!</p>
<img src="./img/gb-sonic.png">
<i>Uh... we goin' somewhere?</i>
</div>
</main>
<main class="page" id="misc" hidden>
Looking for something?<br>
Yeah, nothing's here yet. There might be soon though, so keep your eyes peeled!
</main>
<!-- Back button for pages -->
<button id="back" class="glow_text" onclick="set_page('home')" hidden>
Back
</button>
<!-- Github icon -->
<a id="github" href="https://github.com/SirFluffDev">
<svg height="16" aria-hidden="true" width="16">
<path fill-rule="evenodd" fill="#FFFFFF"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
</path>
</svg>
</a>
</body>
</html>