diff --git a/components/ProjectPanel.module.css b/components/ProjectPanel.module.css
index 850d12c..25bc3c0 100644
--- a/components/ProjectPanel.module.css
+++ b/components/ProjectPanel.module.css
@@ -3,6 +3,8 @@
flex-grow: 0 !important;
padding: 0 !important;
overflow: hidden;
+
+ text-decoration: none;
}
.projectImage {
@@ -40,4 +42,47 @@
.projectPanel:hover .projectDescription, .projectPanel:focus .projectDescription {
visibility: visible;
-}
\ No newline at end of file
+}
+
+@media (hover: none) or (any-pointer: coarse) {
+ .projectPanel {
+ flex-basis: 100% !important;
+ flex-direction: row !important;
+ }
+
+ .projectDescription {
+ position: unset;
+ visibility: visible;
+
+ width: unset;
+
+ align-content: flex-start;
+ text-align: left;
+ text-shadow: none;
+
+ background-color: transparent;
+ border-width: 0;
+ }
+
+ .projectDescription h4 {
+ text-shadow: none;
+
+ text-align: left !important;
+ }
+
+ .projectImage {
+ border-radius: var(--b-border-radius) 0 0 var(--b-border-radius) !important;
+ }
+
+ .projectPanel:hover .projectImage, .projectPanel:focus .projectImage {
+ filter: none;
+ }
+
+ .projectPanel:hover, .projectPanel:focus {
+ --bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 20%);
+ }
+
+ .projectPanel:active {
+ --bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 40%);
+ }
+}
diff --git a/pages/_app.css b/pages/_app.css
index dc383f3..77875e4 100644
--- a/pages/_app.css
+++ b/pages/_app.css
@@ -16,6 +16,36 @@ footer {
min-width: 0;
}
+.chapter-no-header-margin h1,
+.chapter-no-header-margin h2,
+.chapter-no-header-margin h3,
+.chapter-no-header-margin h4,
+.chapter-no-header-margin h5,
+.chapter-no-header-margin h6 {
+ margin-top: 0 !important;
+}
+
+.details-no-indent {
+ margin-left: 0;
+}
+
+.details-no-indent summary {
+ margin-left: 0;
+}
+
+.details-header summary {
+ text-align: center;
+ --bhsl-current-hue: var(--bhsl-primary-hue);
+ --bhsl-current-saturation: var(--bhsl-primary-saturation);
+ --bhsl-current-lightness: var(--bhsl-primary-lightness);
+ font-style: var(--bfont-header-style);
+ font-variant: var(--bfont-header-variant);
+ font-weight: var(--bfont-header-weight);
+ font-stretch: var(--bfont-header-stretch);
+ line-height: var(--bfont-header-height);
+ font-family: var(--bfont-header-family);
+}
+
#__next {
margin: 0 auto;
min-height: 100vh;
diff --git a/pages/index.tsx b/pages/index.tsx
index fda9383..137e5f8 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,8 +1,9 @@
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import React from 'react'
import type {NextPage} from "next"
import {default as Link} from "next/link"
import {faRedditAlien, faMastodon, faGithub, faDiscord, faTelegram, faSteam, faItchIo, faTwitter, faLinkedin, faStackOverflow} from "@fortawesome/free-brands-svg-icons"
-import {faBorderAll, faEnvelope, faPizzaSlice, faGamepad, faBook, faBox, faFilm, faMusic} from "@fortawesome/free-solid-svg-icons"
+import {faBorderAll, faEnvelope, faPizzaSlice, faGamepad, faBook, faBox, faFilm, faMusic, faGlobe, faPlus} from "@fortawesome/free-solid-svg-icons"
import {LinkPanel} from "../components/LinkPanel"
import {ProjectPanel} from "../components/ProjectPanel"
@@ -11,6 +12,13 @@ import {default as imgBlank} from "../public/img/projects/blank.png"
import {default as imgBluelib} from "../public/img/projects/bluelib.png"
import {default as imgSophon} from "../public/img/projects/sophon.png"
import {default as imgParticleClash} from "../public/img/projects/particle-clash.png"
+import {default as imgTheColdNight} from "../public/img/projects/the-cold-night.png"
+import {default as imgLoopingForLoops} from "../public/img/projects/looping-for-loops.png"
+import {default as imgKeepEverythingAlive} from "../public/img/projects/keep-everything-alive.png"
+import {default as imgGravityFusion} from "../public/img/projects/gravity-fusion.png"
+import {default as imgSlimeBloodAndPain} from "../public/img/projects/slime-blood-and-pain.png"
+import {default as imgBleachBeach} from "../public/img/projects/bleach-beach.png"
+import {default as imgBeatTD} from "../public/img/projects/beat-td.png"
const Index: NextPage = () => {
@@ -37,34 +45,84 @@ const Index: NextPage = () => {
My projects
- I should write an intro sentence here
+ In my free time, I have developed many open source projects, some of which have gained popularity and are still in use today!
-
-
This very website!}
- />
- Customizable, flexible and modular CSS library}
- />
- Research hub for universities}
- />
- Match-4 game for two players about particles about to collide}
- />
-
+ Software
+
+
This very website!}
+ />
+ Customizable, flexible and modular CSS library}
+ />
+ Research hub for universities}
+ />
+
+
+ Game jam entries
+
+
LD51: Match-4 particle collider}
+ />
+ LD50: Top-down snowman melter}
+ />
+ LD47: Fruit-looping platformer}
+ />
+ LD46: Lively microgame collection}
+ />
+ LD45: Colorful incremental game}
+ />
+ LD44: Infinite dungeon crawler}
+ />
+ LD42: Wonky physics-based spear fishing simulator}
+ />
+ LD41: Rhythm-based tower-defense}
+ />
+
@@ -134,17 +192,18 @@ const Index: NextPage = () => {
I am by no means a critic, so don't pay this too much attention unless you're interested in what I like...
-
+
- Friends with a website
+ Friends
You can check out my friends' websites here:
-
-
- This section was just created: if you know me, please tell me your website so I can add it here! :D
-
+
+
+
+ And more yet to add!
+