From 2294bc65825972106aff44f2ad8204c4f2af30f4 Mon Sep 17 00:00:00 2001 From: Stanisław Zagórowski Date: Fri, 12 Jan 2024 18:44:38 +0100 Subject: luax: initial --- luax/common.luax | 50 +++++++ luax/components/animated_bg.luax | 3 + luax/components/carousel.luax | 10 ++ luax/components/navbar-item.luax | 6 + luax/components/navbar.luax | 17 +++ luax/components/project.luax | 60 +++++++++ luax/data/games.lua | 229 ++++++++++++++++++++++++++++++++ luax/data/projects.lua | 56 ++++++++ luax/not_found.luax | 3 + luax/pages/article.luax | 3 + luax/pages/contact.luax | 31 +++++ luax/pages/games.luax | 25 ++++ luax/pages/home.luax | 30 +++++ luax/pages/projects.luax | 24 ++++ luax/public/app.css | 161 +++++++++++++++++++++++ luax/public/assets | 1 + luax/public/carousel.css | 69 ++++++++++ luax/public/contact.css | 22 ++++ luax/public/index.css | 108 +++++++++++++++ luax/public/index.js | 4 + luax/public/navbar.css | 278 +++++++++++++++++++++++++++++++++++++++ luax/public/project.css | 126 ++++++++++++++++++ luax/reluax.luax | 48 +++++++ 23 files changed, 1364 insertions(+) create mode 100644 luax/common.luax create mode 100644 luax/components/animated_bg.luax create mode 100644 luax/components/carousel.luax create mode 100644 luax/components/navbar-item.luax create mode 100644 luax/components/navbar.luax create mode 100644 luax/components/project.luax create mode 100644 luax/data/games.lua create mode 100644 luax/data/projects.lua create mode 100644 luax/not_found.luax create mode 100644 luax/pages/article.luax create mode 100644 luax/pages/contact.luax create mode 100644 luax/pages/games.luax create mode 100644 luax/pages/home.luax create mode 100644 luax/pages/projects.luax create mode 100644 luax/public/app.css create mode 120000 luax/public/assets create mode 100644 luax/public/carousel.css create mode 100644 luax/public/contact.css create mode 100644 luax/public/index.css create mode 100644 luax/public/index.js create mode 100644 luax/public/navbar.css create mode 100644 luax/public/project.css create mode 100644 luax/reluax.luax (limited to 'luax') diff --git a/luax/common.luax b/luax/common.luax new file mode 100644 index 0000000..64109bb --- /dev/null +++ b/luax/common.luax @@ -0,0 +1,50 @@ +return function(props) +return + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + duckonaut.dev + + + +

{$ props.children $}

+ + + +end diff --git a/luax/components/animated_bg.luax b/luax/components/animated_bg.luax new file mode 100644 index 0000000..029c933 --- /dev/null +++ b/luax/components/animated_bg.luax @@ -0,0 +1,3 @@ +return function() + return

+end diff --git a/luax/components/carousel.luax b/luax/components/carousel.luax new file mode 100644 index 0000000..f2c5fbe --- /dev/null +++ b/luax/components/carousel.luax @@ -0,0 +1,10 @@ +return function(props) + if props == nil or props.children == nil or #props.children == 0 then + return nil + end + + return +

+ {$ props.children $} +

+end diff --git a/luax/components/navbar-item.luax b/luax/components/navbar-item.luax new file mode 100644 index 0000000..d201f82 --- /dev/null +++ b/luax/components/navbar-item.luax @@ -0,0 +1,6 @@ +return function(props) + return + +end diff --git a/luax/components/navbar.luax b/luax/components/navbar.luax new file mode 100644 index 0000000..15b782e --- /dev/null +++ b/luax/components/navbar.luax @@ -0,0 +1,17 @@ +local NavbarItem = require('components.navbar-item') + +return function() + return + +end diff --git a/luax/components/project.luax b/luax/components/project.luax new file mode 100644 index 0000000..ddb8c69 --- /dev/null +++ b/luax/components/project.luax @@ -0,0 +1,60 @@ +local Carousel = require('components.carousel') + +function getProjectImageLink(project, image) + return 'assets/' .. project.type .. 's/' .. project.name_normalized .. '/' .. image +end + +function getProjectTechIconLink(tech) + return 'assets/images/' .. tech .. '.png' +end + +function getProjectTargetIconLink(target) + return 'assets/images/' .. target .. '.png' +end + +return function (props) + local project = props.attrs.project + local techs = {} + for _, tech in ipairs(project.tech) do + techs[#techs + 1] =

+ end + local targets = {} + for _, target in ipairs(project.targets) do + targets[#targets + 1] =

+ end + + local images = nil + if project.images then + images = {} + for _, image in ipairs(project.images) do + images[#images + 1] =

+ end + + images = {$ images $} + end + + return ( +

{$ project.name $}

Made using

+ {$ techs $} +

Available on

+ {$ targets $} +

+ {$ project.description $} +

+ {$ images $} +

+ ) +end diff --git a/luax/data/games.lua b/luax/data/games.lua new file mode 100644 index 0000000..643f48f --- /dev/null +++ b/luax/data/games.lua @@ -0,0 +1,229 @@ +return { + { + name = "Mr Final Boss", + name_normalized = "mr-final-boss", + type = "game", + link = "https://jellingfish-games.itch.io/mr-final-boss", + tech = { + "unity", + "csharp" + }, + targets = { + "windows", + "html5" + }, + images = { + "thumbnail.png", + "screenshot1.png", + "screenshot2.png", + "screenshot3.png", + "screenshot4.png" + }, + description = "The legends say that one day, brave Heroes will slay the evil and malicious Ignatius, the Chaos Bringer... But YOU won't go down without a fight! Be the bossfight everyone is dreading and hunt down as many Heroes as you can in your last stand using a variety of abilities you can choose from!
Game made in 72 hours for Ludum Dare 50, with the theme \"Delay the Inevitable\"." + }, + { + name = "BUMBLING BUILDERS", + name_normalized = "bumbling-builders", + type = "game", + link = "https://oroshibu.itch.io/bumbling-builders", + tech = { + "unity", + "csharp" + }, + targets = { + "windows", + "html5" + }, + images = { + "thumbnail.png", + "screenshot1.png", + "screenshot2.png", + "screenshot3.png" + }, + description = "A physics puzzle game in which you need to protect little creatures from danger that could come from any direction. Build forts with tetris-style blocks. The game features 30+ levels, multiple distinct enemies and a star rating system.
Game made in 72 hours for Ludum Dare 49, with the theme \"Unstable\"." + }, + { + name = "LOUD: My Road To Fame", + name_normalized = "loud", + type = "game", + link = "https://store.steampowered.com/app/1838290/LOUD_My_Road_to_Fame/", + tech = { + "unity", + "csharp" + }, + targets = { + "windows", + "xbox", + "playstation", + "switch" + }, + images = { + "thumbnail.jpg", + "screenshot1.jpg", + "screenshot2.jpg", + "screenshot3.jpg" + }, + description = "A wholesome, music-filled arcade rhythm game in which a young, reclusive rocker goes on a journey of self-discovery. Once she begins to follow her dreams and finds her inner voice, she discovers that it is LOUD!
One of the games I've worked on at Hyperstrange" + }, + { + name = "WUZMAG", + name_normalized = "wuzmag", + type = "game", + link = "https://duckonaut.itch.io/wuzmag", + tech = { + "unity", + "csharp" + }, + targets = { + "windows", + "html5" + }, + images = { + "thumbnail.png", + "screenshot1.png", + "screenshot2.png", + "screenshot3.png" + }, + description = "Turn based arcade survival game. Survive as long as you can by freezing enemies and using them to defeat more enemies.
Game made in roughly 8 hours for a private game jam with friends." + }, + { + name = "Miro", + name_normalized = "miro", + type = "game", + link = "https://duckonaut.itch.io/miro", + tech = { + "monogame", + "csharp" + }, + targets = { + "windows" + }, + images = { + "thumbnail.png", + "screenshot1.png", + "screenshot2.png", + "screenshot3.png" + }, + description = "Small chill game made mostly as an experiment for a nice 2D renderer mechanic. Infect the world around you, breaking it down into its simplest components.
Game made in roughly 8 hours for a private game jam with friends." + }, + { + name = "Thermal Trail", + name_normalized = "thermal-trail", + type = "game", + link = "https://duckonaut.itch.io/thermal-trail", + tech = { + "godot", + "csharp" + }, + targets = { + "windows", + "html5" + }, + images = { + "gameart.png", + "screenshot1.png", + "screenshot2.png", + "screenshot3.png", + "screenshot4.png" + }, + description = "Play as Yolka, a mountain goat who found an unknown egg. Keep the egg warm as you navigate the 3 distinct worlds, and bring it to the hottest place you know: the depths of a volcano.
Game made in a week for Newgrounds July Jam 2021, with the theme \"Egg\"." + }, + { + name = "Greachers", + name_normalized = "greachers", + type = "game", + link = "https://duckonaut.itch.io/greachers", + tech = { + "monogame", + "csharp" + }, + targets = { + "windows" + }, + images = { + "title.png", + "screenshot1.png", + "screenshot2.png", + "screenshot3.png" + }, + description = "Tiny idle simulation game where you manage a team of randomly generated little fellas as they fight other greachers in a sidescrolling world with beautiful procedurally generated graphics.
Game made in 2 weeks for LOWREZJAM 2021, with the theme \"Minibeasts\"." + }, + { + name = "Third Party", + name_normalized = "third-party", + type = "game", + link = "https://duckonaut.itch.io/third-party", + tech = { + "godot" + }, + targets = { + "windows", + "html5" + }, + images = { + "thumbnail.png", + "screenshot1.jpg", + "screenshot2.jpg", + "screenshot3.jpg", + "screenshot4.jpg" + }, + description = "A top-down stealth game where you play as a spy tasked with stealing important data from a rivaling government. Your task would be easy enough if your objective wasn’t in a underground top-secret facility handling an alien outbreak. Without access to conventional stealth techniques, use corpses of your enemies to sneak through the battlefield.
Game made in 72 hours for Ludum Dare 48, with the theme \"Deeper and deeper\"." + }, + { + name = "Your Left", + name_normalized = "your-left", + type = "game", + link = "https://xatriv.itch.io/your-left", + tech = { + "unity", + "csharp" + }, + targets = { + "windows" + }, + images = { + "thumbnail.png", + "screenshot1.jpg", + "screenshot2.jpg", + "screenshot3.jpg" + }, + description = "A simple pacman-inspired arcade game. Try to grab all the stars in a randomly generated maze before the time expires, while your controls are scattered all over the screen. Get as far as you can to get the highest score.
Game made in 8 hours for Jam Jam, a local in-person event organized by KNTG Polygon, with the theme \"One Click\"." + }, + { + name = "Riff n' Rage", + name_normalized = "riff-n-rage", + type = "game", + link = "https://duckonaut.itch.io/riff-n-rage", + tech = { + "monogame", + "csharp" + }, + targets = { + "windows" + }, + images = { + "thumbnail.png", + "screenshot1.png", + "screenshot2.png" + }, + description = "You just got your first guitar, and through sheer luck managed to land in the king's throne room, trying to entertain him. Sadly, his subjects aren't huge fans of your music. Dodge them while trying to play the best you can, or the king won't be merciful.
Game made in 48 hours for a special solo game jam among friends. My theme was \"Power at a price\"." + }, + { + name = "Survive the Temple", + name_normalized = "survive-the-temple", + type = "game", + link = "https://duckonaut.itch.io/survive-the-temple", + tech = { + "godot" + }, + targets = { + "windows", + "html5" + }, + images = { + "cover.png", + "screenshot.png" + }, + description = "A quick movement focused platformer that tests your short term memory. Survive the trap system of an ancient temple! Dash through the lanterns in the correct order before the time runs out, or face certain death!
Game made in 48 hours for Ludum Dare Compo 47 with the theme \"Stuck in a loop\"." + } +} diff --git a/luax/data/projects.lua b/luax/data/projects.lua new file mode 100644 index 0000000..5248a2a --- /dev/null +++ b/luax/data/projects.lua @@ -0,0 +1,56 @@ +return { + { + name = "hyprload", + name_normalized = "hyprload", + type = "project", + link = "https://github.com/duckonaut/hyprload", + tech = { + "cpp" + }, + targets = { + "linux", + "hyprland" + }, + images = { + "logo.png" + }, + description = + "hyprload acts as a plugin manager for the Hyprland Wayland Compositor. It's loaded as a plugin and allows easy, declarative installation and updates of other plugins." + }, + { + name = "split-monitor-workspaces", + name_normalized = "split-monitor-workspaces", + type = "project", + link = "https://github.com/duckonaut/split-monitor-workspaces", + tech = { + "cpp" + }, + targets = { + "linux", + "hyprland" + }, + description = + "A small plugin for the Hyprland Wayland Compositor that allows you to have different workspace namespaces on different monitors." + }, + { + name = "Spirit Mod", + name_normalized = "spirit-mod", + type = "project", + link = "https://spiritmod.fandom.com/wiki/Spirit_Mod_Wiki", + tech = { + "csharp" + }, + targets = { + "windows", + "linux", + "macos" + }, + images = { + "thumbnail.png", + "demo1.gif", + "demo2.gif" + }, + description = + "The Spirit Mod is one of the largest mods for Terraria: with more than 1300 items, 8 bosses, and hundreds of enemies, as well as 3 new events and 3 brand new biomes, the mod has a lot to offer.
I had the privilege of contributing some system code, mainly the \"Stargoop\" system." + } +} diff --git a/luax/not_found.luax b/luax/not_found.luax new file mode 100644 index 0000000..9ad3806 --- /dev/null +++ b/luax/not_found.luax @@ -0,0 +1,3 @@ +return function() + return "404 Not Found" +end diff --git a/luax/pages/article.luax b/luax/pages/article.luax new file mode 100644 index 0000000..670002c --- /dev/null +++ b/luax/pages/article.luax @@ -0,0 +1,3 @@ +return function(props) + return

{$ props.attrs.title $}

+end diff --git a/luax/pages/contact.luax b/luax/pages/contact.luax new file mode 100644 index 0000000..f7085ab --- /dev/null +++ b/luax/pages/contact.luax @@ -0,0 +1,31 @@ +return function() + return +

+ Contact +

+ Discord +

+ + usually the fastest way to reach me +
+ EchoDuck#7866 + +

+ Matrix +

+ for the FOSS folks +
+ *@echoduck:matrix.org + +

+ Email +

+ I check my email daily +
+ duckonaut*@gmail.com +

+end diff --git a/luax/pages/games.luax b/luax/pages/games.luax new file mode 100644 index 0000000..59a68b4 --- /dev/null +++ b/luax/pages/games.luax @@ -0,0 +1,25 @@ +local Project = require("components.project") + +local games = require("data.games") + +local game_display = {} +for _, game in ipairs(games) do + game_display[#game_display + 1] = +end + +return function() + return +

+ Game Projects +

+ games I've worked on +

+ +

+ {$ game_display $} +

+end + diff --git a/luax/pages/home.luax b/luax/pages/home.luax new file mode 100644 index 0000000..19f3f6d --- /dev/null +++ b/luax/pages/home.luax @@ -0,0 +1,30 @@ +return function() + return

+ Stanisław Zagórowski +

+ aka Duckonaut, EchoDuck +

+ +

+ Hello! I'm a programmer, game designer, and artist. I'm currently a + student at the Warsaw University of Technology, studying Computer Science. + A list of the games I've worked on is in the + games + section. Other projects I've been a part of are available in the + projects + section. I also enjoy some lower-level programming and learning about the + inner workings of various systems. The main technologies I use are + C#, Unity, + Python, Rust + and C although I'm also familiar with + Godot, C++ + , Java and some + JavaScript and TypeScript. +

+end diff --git a/luax/pages/projects.luax b/luax/pages/projects.luax new file mode 100644 index 0000000..219f45d --- /dev/null +++ b/luax/pages/projects.luax @@ -0,0 +1,24 @@ +local Project = require("components.project") + +local projects = require("data.projects") + +local project_display = {} +for _, project in ipairs(projects) do + project_display[#project_display + 1] = +end + +return function() + return +

+ Other Projects +

+ projects that are not games +

+ +

+ {$ project_display $} +

+end diff --git a/luax/public/app.css b/luax/public/app.css new file mode 100644 index 0000000..b16cfea --- /dev/null +++ b/luax/public/app.css @@ -0,0 +1,161 @@ +#app-main { + font-family: 'Hack', monospace; + max-width: 1280px; + margin: 0 auto; + padding: 2rem 2rem 2rem 2rem; + text-align: center; +} + +#app { + margin: 0 auto; + text-align: center; + align-content: center; + justify-content: center; +} + +.logo { + height: 6em; + padding: 1.5em; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.preact:hover { + filter: drop-shadow(0 0 2em #673ab8aa); +} + +/* fade in */ +@keyframes fade-in { + 0% { + opacity: 0; + transform: translateY(1em); + } + 60% { + transform: translateY(-0.2em); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.main-info > * { + animation: fade-in 0.2s ease-in; +} + +.main-info { + text-align: center; +} + +@media (min-width: 1150px) { + .main-info { + margin-top: 72px; + } +} + +.main-info-image { + width: 128px; + height: 128px; + border-radius: 100%; + margin: 6px 6px 6px 6px; +} + +.main-info-title { + font-size: 42pt; +} + +.main-info-subtitle { + font-size: 26pt; + font-style: italic; + color: #5c6370; +} + +.quiet { + color: var(--color-gray); + font-style: italic; +} + +.section { + font-size: 22pt; +} + +.highlight { + color: #e5c07b; +} + +.back-shadows { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -1; + background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, var(--color-bg) 10%, var(--color-bg) 90%, rgba(0, 0, 0, 0) 100%); +} + +@media (max-width: 480px) { + .back-shadows { + margin: auto; + max-width: 80%; + } + .main-info-title { + font-size: 32pt; + } + + .main-info-subtitle { + font-size: 18pt; + } +} + +@media (max-width: 1150px) and (min-width: 480px) { + .back-shadows { + margin: auto; + max-width: 60%; + } + .main-info-title { + font-size: 42pt; + } + + .main-info-subtitle { + font-size: 26pt; + } +} + +@media (min-width: 1150px) { + .back-shadows { + margin: auto; + max-width: 40%; + } + .main-info-title { + font-size: 42pt; + } + + .main-info-subtitle { + font-size: 26pt; + } +} + + +@media (max-width: 480px) { + .about-paragraph { + margin: auto; + font-size: 16pt; + max-width: 90%; + } +} + +@media (max-width: 1150px) and (min-width: 480px) { + .about-paragraph { + margin: auto; + font-size: 18pt; + max-width: 80%; + } +} + +@media (min-width: 1150px) { + .about-paragraph { + margin: auto; + font-size: 18pt; + max-width: 60%; + } +} diff --git a/luax/public/assets b/luax/public/assets new file mode 120000 index 0000000..d36378d --- /dev/null +++ b/luax/public/assets @@ -0,0 +1 @@ +../../front/public/assets \ No newline at end of file diff --git a/luax/public/carousel.css b/luax/public/carousel.css new file mode 100644 index 0000000..2465370 --- /dev/null +++ b/luax/public/carousel.css @@ -0,0 +1,69 @@ +.carousel-content { + align-self: center; + max-height: 100%; + white-space: nowrap; + -ms-overflow-style: none; /* hide scrollbar in IE and Edge */ + scrollbar-width: none; /* hide scrollbar in Firefox */ +} + +.carousel-item { + width: 100%; + flex-shrink: 0; + height: auto; + float: left; + text-align: center; + transition: all 250ms linear; + white-space: nowrap; + vertical-align: middle; +} + +.slick-slider { + margin: 24px; +} + +.slick-slide { + margin: 0 auto; + border-radius: 10px; + text-align: center; + float: none !important; + display: inline-block !important; + vertical-align: middle; + min-height: 1px; +} + +/* .carousel-item > * { */ +/* border-radius: 10px; */ +/* vertical-align: middle; */ +/* width: 100%; */ +/* height: auto; */ +/* } */ + +.slick-dots li button::before { + color: var(--color-fg) !important; +} + +@media (max-width: 1150px) { + .carousel-wrapper { + margin: 60px auto; + width: 330px; + height: 220px; + } +} + +@media (max-width: 1150px) and (min-width: 480px) { + .carousel-wrapper { + margin: 60px auto; + width: 480px; + height: 360px; + } +} + +@media (min-width: 1150px) { + .carousel-wrapper { + float: right; + width: 480px; + height: 360px; + } +} + + diff --git a/luax/public/contact.css b/luax/public/contact.css new file mode 100644 index 0000000..93b63bd --- /dev/null +++ b/luax/public/contact.css @@ -0,0 +1,22 @@ +.contact-container { + width: 100%; + max-width: 1120px; + margin: auto; + margin-top: 24pt; + margin-bottom: 48pt; + align-items: center; + justify-content: center; + align-self: center; + font-size: 18pt; +} + +.contact { + margin-top: 24pt; + margin-bottom: 8pt; + font-size: 20pt; + color: #98C379; +} + +.highlight { + color: #e5c07b; +} diff --git a/luax/public/index.css b/luax/public/index.css new file mode 100644 index 0000000..9941a36 --- /dev/null +++ b/luax/public/index.css @@ -0,0 +1,108 @@ +:root { + font-weight: 400; + + color-scheme: dark; + color: var(--color-fg); + background-color: var(--color-bg); + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; + + /* variables */ + --color-bg: #161f30; + --color-fg: #a3b3d9; + --color-search-blue: #083C5A; + --color-white: #a3b3d9; + --color-gray: #647089; + --color-dark-gray: #3e4451; + --color-context: #6b737f; + --color-light-gray: #c8ccd4; + --color-tree-gray: #1b1f27; + --color-blue: #6080dd; + --color-vivid-blue: #61afef; + --color-dark-blue: #223E55; + --color-folder-blue: #61afef; + --color-light-blue: #a3b3d9; + --color-green: #449871; + --color-cyan: #56b6c2; + --color-light-green: #98c379; + --color-red: #c13251; + --color-orange: #c18a56; + --color-light-red: #e06c75; + --color-yellow: #e5c07b; + --color-purple: #604bd8; + --color-magenta: #b071fc; +} + +a:link { + font-weight: 500; + color: #4fc1ff; + text-decoration: inherit; +} + +a:visited { + color: #4fc1ff; +} + +a:hover { + color: #60d2ff; +} + +a:active { + color: #66d8ff; +} + + +body { + margin: 0; + /* display: flex; */ + /* place-items: center; */ + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +span { + display: inline; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +.hack { + font-family: Hack, monospace; + font-weight: 500; +} + +.grow { + transition: all .2s ease-in-out; + transform: scale(1); +} + +.grow:hover { + transition: all .2s ease-in-out; + transform: scale(1.1); +} diff --git a/luax/public/index.js b/luax/public/index.js new file mode 100644 index 0000000..982672e --- /dev/null +++ b/luax/public/index.js @@ -0,0 +1,4 @@ +$(document).ready(function() { + $('.carousel-wrapper').slick({}); +}); + diff --git a/luax/public/navbar.css b/luax/public/navbar.css new file mode 100644 index 0000000..9120052 --- /dev/null +++ b/luax/public/navbar.css @@ -0,0 +1,278 @@ +/* on big screens, navbar is fixed to the top of the screen */ +.navbar-container { + position: fixed; + /* gradient from top to bottom, full to transparent */ + top: 0; + width: 100%; + z-index: 9999; + margin: auto; +} + +/* on smaller ones, make it behave as a normal element laid out at the top of the page */ +@media (max-width: 1150px) { + .navbar-container { + position: static; + } +} + +.navbar { + padding-top: 20pt; + padding-bottom: 12pt; + align-items: center; + justify-content: center; + align-self: center; + background: linear-gradient(to bottom, var(--color-bg) 0%, var(--color-bg) 75%, rgba(0, 0, 0, 0) 100%); +} + +.navbar-icon { + font-family: Hack, monospace; + font-weight: 500; + color: #646cff; + font-size: 1.5em; + padding: 0.5em; + margin: 0.5em; +} + +.navbar { + align-self: center; + display: block; + width: 100%; + text-align: center; +} + +.navbar-item { + font-family: Hack, monospace; + font-size: 18pt; + text-align: center; + float: none; + clear: left; + display: inline-block; + margin: 0 0.25em; + transition: all 0.2s ease-in-out; +} + +.navbar-item:hover { + padding-left: 0.5em; + padding-right: 0.5em; + transition: all 0.2s ease-in-out; +} + +.navbar-current { + font-weight: bold; +} + +/* home */ + +.navbar-item-home:link { + color: #98C379; + text-decoration: none; +} + +.navbar-item-home:visited { + color: #98C379; + text-decoration: none; +} + +.navbar-item-home:hover { + color: #afd088; + text-decoration: underline; +} + +.navbar-item-home:active { + color: #afd088; + text-decoration: underline; +} + +/* games */ + +.navbar-item-games:link { + color: #e06c75; + text-decoration: none; +} + +.navbar-item-games:visited { + color: #e06c75; + text-decoration: none; +} + +.navbar-item-games:hover { + color: #ef7a80; + text-decoration: underline; +} + +.navbar-item-games:active { + color: #ef7a90; + text-decoration: underline; +} + +/* projects */ + +.navbar-item-projects:link { + color: #d19a66; + text-decoration: none; +} + +.navbar-item-projects:visited { + color: #d19a66; + text-decoration: none; +} + +.navbar-item-projects:hover { + color: #dfa873; + text-decoration: underline; +} + +.navbar-item-projects:active { + color: #dffa73; + text-decoration: underline; +} + +/* github */ + +.navbar-item-github:link { + color: #c678dd; + text-decoration: none; +} + +.navbar-item-github:visited { + color: #c678dd; + text-decoration: none; +} + +.navbar-item-github:hover { + color: #d286eb; + text-decoration: underline; +} + +.navbar-item-github:active { + color: #d286eb; + text-decoration: underline; +} + +/* itch */ + +.navbar-item-itch:link { + color: #e06c75; + text-decoration: none; +} + +.navbar-item-itch:visited { + color: #e06c75; + text-decoration: none; +} + +.navbar-item-itch:hover { + color: #ef7a80; + text-decoration: underline; +} + +.navbar-item-itch:active { + color: #ef7a90; + text-decoration: underline; +} + +/* twitter */ + +.navbar-item-twitter:link { + text-decoration: none; +} + +.navbar-item-twitter:visited { + text-decoration: none; +} + +.navbar-item-twitter:hover { + text-decoration: underline; +} + +.navbar-item-twitter:active { + text-decoration: underline; +} + +/* mastodon */ + +.navbar-item-mastodon:link { + color: #6a4ae0; + text-decoration: none; +} + +.navbar-item-mastodon:visited { + color: #6a4ae0; + text-decoration: none; +} + +.navbar-item-mastodon:hover { + color: #7a55e8; + text-decoration: underline; +} + +.navbar-item-mastodon:active { + color: #7a55e8; + text-decoration: underline; +} + +/* cohost */ + +.navbar-item-cohost:link { + color: #b63b73; + text-decoration: none; +} + +.navbar-item-cohost:visited { + color: #b63b73; + text-decoration: none; +} + +.navbar-item-cohost:hover { + color: #c54a7f; + text-decoration: underline; +} + +.navbar-item-cohost:active { + color: #c54a7f; + text-decoration: underline; +} + +/* tumblr */ + +.navbar-item-tumblr:link { + color: #00b8ff; + text-decoration: none; +} + +.navbar-item-tumblr:visited { + color: #00b8ff; + text-decoration: none; +} + +.navbar-item-tumblr:hover { + color: #00c5ff; + text-decoration: underline; +} + +.navbar-item-tumblr:active { + color: #00c5ff; + text-decoration: underline; +} + +/* contact */ + +.navbar-item-contact:link { + color: #e5c07b; + text-decoration: none; +} + +.navbar-item-contact:visited { + color: #e5c07b; + text-decoration: none; +} + +.navbar-item-contact:hover { + color: #f2ce89; + text-decoration: underline; +} + +.navbar-item-contact:active { + color: #f2ce89; + text-decoration: underline; +} diff --git a/luax/public/project.css b/luax/public/project.css new file mode 100644 index 0000000..ba14088 --- /dev/null +++ b/luax/public/project.css @@ -0,0 +1,126 @@ +.icon { + display: inline; + width: 32px; + height: 32px; + transition: 0.3s; + transform-origin: center; + filter: brightness(70%) +} + +.icon:hover { + filter: brightness(80%); +} + +.icon-row { + width: 320px; + height: 36px; +} + +.icon-container { + height: 36px; + float: right; +} + +.icon-text { + width: auto; + height: 36px; + line-height: 36px; + float: left; + vertical-align: middle; + margin-right: 8px; + color: #5c6370; +} + +.project { + display: table; + align-self: center; + clear: both; + margin-bottom: 24pt; +} + +.project-info { + font-size: 14pt; +} + +.project-description { + font-size: 16pt; + text-align: justify; +} + +.project-image-gallery { + margin-left: 24px; + margin-right: 10px; +} + +@media (max-width: 1150px) { + .project-title { + text-align: center; + font-size: 24pt; + margin-bottom: 8px; + text-decoration-line: underline; + } + + .project-image-gallery { + margin: 60px auto; + width: 330px; + height: 220px; + } + + .project-info { + float: none; + width: 90%; + margin: auto; + } + + .project-description { + font-size: 14pt; + } +} + +@media (max-width: 1150px) and (min-width: 480px) { + .project-title { + text-align: center; + font-size: 24pt; + margin-bottom: 8px; + text-decoration-line: underline; + } + .project-image-gallery { + margin: 60px auto; + width: 480px; + height: 360px; + } + + .project-info { + float: none; + width: 90%; + margin: auto; + } + + .project-description { + font-size: 14pt; + } +} + +@media (min-width: 1150px) { + .project-title { + text-align: left; + font-size: 32pt; + margin-bottom: 8px; + text-decoration-line: underline; + } + .project-image-gallery { + float: right; + width: 480px; + height: 360px; + } + .project-info { + float: left; + max-width: 600px; + } + + .project-description { + font-size: 16pt; + } +} + + diff --git a/luax/reluax.luax b/luax/reluax.luax new file mode 100644 index 0000000..ebe1f21 --- /dev/null +++ b/luax/reluax.luax @@ -0,0 +1,48 @@ +local Common = require("common") +local Navbar = require("components.navbar") +local AnimatedBg = require("components.animated_bg") + +local Home = require("pages.home") +local Projects = require("pages.projects") +local Games = require("pages.games") +local Contact = require("pages.contact") +local Article = require("pages.article") +local NotFound = require("not_found") + +math.randomseed(os.time()) + +local function wrap_component(component) + return + + +

+ {$ component $} + +

+ +end + +local function route(path) + if path == '/' then + return 200, wrap_component() + elseif path == '/projects' then + return 200, wrap_component() + elseif path == '/games' then + return 200, wrap_component() + elseif path == '/contact' then + return 200, wrap_component() + elseif reluax.url_matches('/article/{title}', path) then + local title = reluax.url_extract('/article/{title}', path).title + local article =

+ return 200, article + end + + return 404, NotFound() +end + +return { + name = "hello-world", + route = route +} + -- cgit v1.3.1