-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
176 lines (162 loc) · 12.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
<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=Fira+Code:wght@600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@600&family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Aleo&display=swap" rel="stylesheet">
<title>Scythe101</title>
<script defer src="main.js"></script>
</head>
<body class="w-screen overflow-x-hidden bg-white dark:bg-slate-950" id="body">
<div id="main">
<!-- Menu Bar-->
<div class="flex w-screen justify-center z-20 fixed">
<div class="fixed bg-white dark:bg-slate-900 w-64 text-black dark:text-white shadow-sky-200 shadow-md p-2 rounded-full border-sky-100 border-2 top-1 dark:shadow-sky-600 dark:border-sky-900">
<div class="flex flex-row text-center items-center z-10 font-aleo">
<div class="flex-auto justify-between">
<a class="justify-center font-bold text-sky-500 border-2 rounded-full border-sky-300 dark:border-sky-600 pl-2 pr-2" href="../home">Home</a>
</div>
<div class="flex-auto bold font-medium">
<a onclick="notDone()" class="justify-center font-medium cursor-pointer">Projects</a>
</div>
<div class="flex-auto">
<a target="_blank" href="https://github.com/Scythe101" class="justify-center font-medium">GitHub</a>
</div>
</div>
</div>
</div>
<!--Profile Picture + Description-->
<div class="w-full mt-40">
<div class="flex-none">
<div class="" id="pfpContainer">
<div class="pl-12 z-30" id="pfpTwo">
<a target="_blank" href="https://github.com/Scythe101/">
<img src=".\assets\pfp.jpg" alt="profile picture" class="rounded-full w-20 h-20 border-4 border-sky-400 dark:shadow-md dark:shadow-sky-600 p-1">
</a>
</div>
</div>
<div id="pfp" class="fixed left-12 top-1">
<a target="_blank" href="https://github.com/Scythe101/">
<img src=".\assets\pfp.jpg" alt="profile picture" class="rounded-full w-12 h-12 border-2 border-sky-400 dark:shadow-md dark:shadow-sky-600">
</a>
</div>
<div id="header" class="">
<h1 class="text-5xl font-bold font-firacode pl-12 pt-8 text-black dark:text-white">Game developer, web developer,
and programmer.
</h1>
<p class="pl-12 pt-5 text-xl font-medium font-poppins text-slate-600 dark:text-slate-400 pr-12">
I'm Scythe101, a programmer who enjoys web and game development.
I know React (and, of course, HTML, CSS, and JS) and
game frameworks like LOVE and PyGame and fantasy consoles like PICO-8 and TIC-80. I like scripting things in C++ and Lua.
I make a lot of small projects about whatever I feel like doing.
</p>
</div>
</div>
</div>
<!-- Announcements -->
<div class="px-12 pt-80 w-full" id="announcements">
<h1 class="font-firacode text-2xl text-black dark:text-white">Announcements:</h1>
<p class="pt-2 text-xl font-medium font-poppins text-slate-600 dark:text-slate-400">
I added some cool CSS effects to this site! I just finished making a dark mode for this website, and it looks good!
I have some cool plans for this website, including a full project display page, and maybe even a blog? (We'll see about that last one, still unsure.)
</p>
</div>
<div class="h-40 lg:h-screen">
</div>
<!-- Projects -->
<div id="projects" class="pb-24 px-12">
<h1 class="hidden text-left font-firacode text-2xl font-semibold pb-4 text-black dark:text-white">Explore some of my projects!</h1>
<div class="flex flex-col lg:flex-row gap-6 box-border text-center">
<div class="project hidden bg-slate-200 dark:bg-slate-900 rounded-md w-1/1 lg:w-1/4 shadow-md shadow-slate-300 dark:shadow-slate-800 flex flex-col sm:flex-row lg:flex-col box-border">
<div class="pt-3 px-3 pb-3 lg:pb-0 inline-block">
<a target="_blank" href="https://github.com/Scythe101/scythes_breakout">
<img src="./assets/breakout.png" class="rounded-md" >
</a>
</div>
<a href="https://github.com/Scythe101/scythes_breakout" class="px-3 font-xl font-firacode underline text-black dark:text-white pt-3 lg:pt-0 inline-block">Breakout Clone</a>
<div class="px-3 pb-2 pt-3 lg:pt-0">
<span class="font-poppins text-slate-700 dark:text-slate-400 ">This was one of my first coding projects, and it was created using a <a href="https://youtube.com/playlist?list=PLea8cjCua_P0qjjiG8G5FBgqwpqMU7rBk&si=K8yzVpht3wkbCJQB" class="text-sky-400 underline">tutorial</a> by <a href="https://bit.ly/lazydevs" class="text-sky-400 underline">LazyDevs</a>. I recommend that you check out their work!</span>
</div>
</div>
<div class="project hidden bg-slate-200 dark:bg-slate-900 rounded-md w-1/1 lg:w-1/4 shadow-md shadow-slate-300 dark:shadow-slate-800 flex flex-col sm:flex-row lg:flex-col">
<div class="pt-3 px-3 pb-3 lg:pb-0 inline-block">
<a target="_blank" href="https://github.com/Scythe101/MatricesCalculator">
<img src="./assets/mat.png" class="rounded-md" >
</a>
</div>
<a target="_blank" href="https://github.com/Scythe101/MatricesCalculator" class="px-3 font-xl font-firacode underline text-black dark:text-white pt-3 lg:pt-0 inline-block">Matrix Calculator</a>
<div class="px-3 pb-2 pt-3 lg:pt-0">
<span class="font-poppins text-slate-700 dark:text-slate-400">This project is still unfinished, but I'm happy with how it is as-is. I spent waaaaaay too long debugging the UI on this, but now I can say that I know how to use the LOVE 2D framework.</span>
</div>
</div>
<div class="project hidden bg-slate-200 dark:bg-slate-900 rounded-md w-1/1 lg:w-1/4 justify-self-end shadow-md shadow-slate-300 dark:shadow-slate-800 flex flex-col sm:flex-row lg:flex-col">
<div class="pt-3 px-3 pb-3 lg:pb-0">
<a target="_blank" href="https://github.com/Scythe101/scythe101.dev" class="inline-block cursor-pointer z-10">
<img src="./assets/site.png" class="rounded-md" >
</a>
</div>
<div class="pt-3 px-3 pb-3 lg:pb-0">
<a target="_blank" href="https://github.com/Scythe101/scythe101.dev" class="underlinetext-black dark:text-white">
<p class="px-3 font-xl font-firacode underline text-black dark:text-white pt-3 lg:pt-0 inline-block">This website!</p>
</a>
</div>
<div class="px-3 pb-2 pt-3 lg:pt-0">
<span class="font-poppins text-slate-700 dark:text-slate-400">This is a project I made in Tailwind CSS, which was a first for me. It took about 4 days to make, and Tailwind CSS helped speed up the process a <i>ton</i>. This was very fun to work on.</span>
</div>
</div>
<div class="project hidden bg-slate-200 dark:bg-slate-900 rounded-md w-1/1 lg:w-1/4 shadow-md shadow-slate-300 dark:shadow-slate-800 flex flex-col">
<div class="m-auto justify-center justify-items-center text-center py-4 text-slate-400 ">
<a title="Not Finished Yet" class="cursor-pointer" onclick="notDone()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-36 h-36">
<path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z" clip-rule="evenodd" />
</svg>
<p class="text-slate-700 dark:text-slate-400">See More</p>
</a>
</div>
</div>
</div>
</div>
<!-- Where to find me -->
<div class="px-12 pb-4">
<h1 class="font-firacode text-2xl pb-4 hidden text-black dark:text-white">Where to find me:</h1>
<div class="flex flex-rows gap-4">
<div class="bg-slate-200 dark:bg-slate-900 shadow-slate-300 shadow-md dark:shadow-slate-600 w-16 h-16 rounded-full findMe hidden">
<a target="_blank" href="https://github.com/Scythe101">
<img src="./assets/github.jpg" class="rounded-full">
</a>
</div>
<div class="bg-slate-200 dark:bg-slate-900 shadow-slate-300 dark:shadow-slate-600 w-16 h-16 shadow-md rounded-full findMe hidden">
<a target="_blank" href="https://open.spotify.com/user/31teihcmyojoumgum3bplc7m5qnq">
<img src="./assets/spotify.png">
</a>
</div>
<div class="bg-slate-200 dark:bg-slate-900 shadow-slate-300 dark:shadow-slate-600 w-16 h-16 shadow-md rounded-full findMe hidden">
<a target="_blank" href="https://steamcommunity.com/profiles/76561199450744363/">
<img src="./assets/steam.png">
</a>
</div>
<div class="bg-slate-200 dark:bg-slate-900 shadow-slate-300 dark:shadow-slate-600 w-16 h-16 shadow-md rounded-full flex justify-center items-center findMe hidden text-black dark:text-slate-50">
<a href="mailto:[email protected]">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
</svg>
</a>
</div>
</div>
</div>
<div id="bottom" class="pt-24">
<div class="w-screen bg-slate-900 grid grid-cols-1 py-12">
<h1 class="font-firacode pl-12 text-2xl text-slate-200">Sources:</h1>
<a target="_blank" href="https://tailwindcss.com/" class="underline text-slate-300 pl-12 font-firacode">Tailwind CSS</a>
<a target="_blank" href="https://heroicons.com/" class="underline text-slate-300 pl-12 font-firacode">Hero Icons</a>
<a target="_blank" href="https://github.com" class="underline text-slate-300 pl-12 font-firacode">GitHub</a>
</div>
</div>
</div>
</body>
</html>