Skip to content

Commit

Permalink
Added dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@Scythe101
Scythe101 authored Feb 3, 2024
1 parent dd20890 commit a867fd9
Show file tree
Hide file tree
Showing 4 changed files with 264 additions and 67 deletions.
Binary file added assets/github.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
117 changes: 60 additions & 57 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,54 +7,57 @@
<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=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">
<body class="w-screen overflow-x-hidden bg-white dark:bg-slate-950">
<div id="main">
<!-- Menu Bar-->
<div class="flex w-screen justify-center z-20 fixed">
<div class="fixed bg-white w-64 backdrop-opacity-100 shadow-sky-200 shadow-md p-2 rounded-full border-sky-100 border-2 top-1">
<div class="flex flex-row text-center items-center z-10">
<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 pl-2 pr-2" href="../home">Home</a>
<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">Projects</a>
<a onclick="notDone()" class="justify-center font-medium cursor-pointer">Projects</a>
</div>

<div class="flex-auto">
<a href="https://github.com/Scythe101" class="justify-center font-medium">GitHub</a>
<a target="_blank" href="https://github.com/Scythe101" class="justify-center font-medium">GitHub</a>
</div>
</div>
</div>
</div>
<!--Profile Picture + Description-->
<div class="flex w-screen row mt-40">
<div class="flex-none" id="header">
<div class="pl-12">
<a 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 p-1">
<div class="w-full mt-40">
<div class="flex-none">
<div class="pl-12" id="pfp">
<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>
<h1 class="text-5xl font-bold font-firacode w-screen pl-12 pt-8 pr-8">Game developer, web developer,
and programmer.
</h1>
<p class="w-screen pl-12 pt-5 text-xl font-medium font-poppins text-zinc-600 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 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="pl-12 pt-80" id="announcements">
<h1 class="font-firacode text-2xl">Announcements:</h1>
<p class="w-screen pt-2 text-xl font-medium font-poppins text-zinc-600 pr-12">
I added some cool CSS effects to this site! I'm planning on implementing a dark mode soon, so keep an eye out for that!
<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>
Expand All @@ -64,58 +67,58 @@ <h1 class="font-firacode text-2xl">Announcements:</h1>
</div>
<!-- Projects -->
<div id="projects" class="pb-24 px-12">
<h1 class="hidden text-left font-firacode text-2xl font-semibold pb-4">Explore some of my projects!</h1>
<div class="flex flex-col lg:flex-row gap-6">
<div class="project hidden bg-slate-200 rounded-md w-1/1 lg:w-1/4 shadow-md shadow-slate-300 flex flex-col sm:flex-row lg:flex-col box-border">
<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 href="https://github.com/Scythe101/scythes_breakout">
<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 pt-3 lg:pt-0">Breakout Clone</a>
<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-zinc-700 ">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>
<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 rounded-md w-1/1 lg:w-1/4 shadow-md shadow-slate-300 flex flex-col sm:flex-row lg:flex-col">
<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 href="https://github.com/Scythe101/MatricesCalculator">
<a target="_blank" href="https://github.com/Scythe101/MatricesCalculator">
<img src="./assets/mat.png" class="rounded-md" >
</a>
</div>
<a href="https://github.com/Scythe101/MatricesCalculator" class="px-3 font-xl font-firacode underline pt-3 lg:pt-0 inline-block">Matrix Calculator</a>
<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-zinc-700">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>
<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 rounded-md w-1/1 lg:w-1/4 justify-self-end shadow-md shadow-slate-300 flex flex-col sm:flex-row lg:flex-col">
<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 href="https://github.com/Scythe101/scythe101.dev" class="inline-block cursor-pointer z-10">
<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 href="https://github.com/Scythe101/scythe101.dev" class="underline">
<p class="font-xl font-firacode pt-3 lg:pt-0">This website!</p>
<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-zinc-700">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>
<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 rounded-md w-1/1 lg:w-1/4 shadow-md shadow-slate-300 flex flex-col">
<div class="m-auto justify-center justify-items-center text-center py-4 text-slate-400">
<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">See More</p>
<p class="text-slate-700 dark:text-slate-400">See More</p>
</a>
</div>

Expand All @@ -124,24 +127,24 @@ <h1 class="hidden text-left font-firacode text-2xl font-semibold pb-4">Explore s
</div>
<!-- Where to find me -->
<div class="px-12 pb-4">
<h1 class="font-firacode text-2xl pb-4 hidden">Where to find me:</h1>
<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 shadow-slate-300 shadow-md w-16 h-16 rounded-full findMe hidden">
<a href="https://github.com/Scythe101">
<img src="./assets/github-mark.svg">
<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 w-16 h-16 shadow-md rounded-full findMe hidden">
<a href="https://open.spotify.com/user/31teihcmyojoumgum3bplc7m5qnq">
<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 w-16 h-16 shadow-md rounded-full findMe hidden">
<a href="https://steamcommunity.com/profiles/76561199450744363/">
<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 w-16 h-16 shadow-md rounded-full flex justify-center items-center findMe hidden">
<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" />
Expand All @@ -153,11 +156,11 @@ <h1 class="font-firacode text-2xl pb-4 hidden">Where to find me:</h1>
</div>

<div id="bottom" class="pt-24">
<div class="w-screen bg-slate-600 grid grid-cols-1">
<h1 class="font-firacode pt-6 pl-12 text-2xl text-slate-200">Sources:</h1>
<a href="https://tailwindcss.com/" class="underline text-slate-300 pl-12 font-firacode">Tailwind CSS</a>
<a href="https://heroicons.com/" class="underline text-slate-300 pl-12 font-firacode">Hero Icons</a>
<a href="https://github.com" class="underline text-slate-300 pl-12 font-firacode">GitHub</a>
<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>

Expand Down
1 change: 1 addition & 0 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ function scrollHandler() {

window.addEventListener('scroll', scrollHandler);

var pfp = document.getElementById('pfp');
const checkpoint = 300;
window.addEventListener("scroll", () => {
const currentScroll = window.pageYOffset;
Expand Down
Loading

0 comments on commit a867fd9

Please sign in to comment.