diff options
| -rw-r--r-- | luax/common.luax | 50 | ||||
| -rw-r--r-- | luax/components/animated_bg.luax | 3 | ||||
| -rw-r--r-- | luax/components/carousel.luax | 10 | ||||
| -rw-r--r-- | luax/components/navbar-item.luax | 6 | ||||
| -rw-r--r-- | luax/components/navbar.luax | 17 | ||||
| -rw-r--r-- | luax/components/project.luax | 60 | ||||
| -rw-r--r-- | luax/data/games.lua | 229 | ||||
| -rw-r--r-- | luax/data/projects.lua | 56 | ||||
| -rw-r--r-- | luax/not_found.luax | 3 | ||||
| -rw-r--r-- | luax/pages/article.luax | 3 | ||||
| -rw-r--r-- | luax/pages/contact.luax | 31 | ||||
| -rw-r--r-- | luax/pages/games.luax | 25 | ||||
| -rw-r--r-- | luax/pages/home.luax | 30 | ||||
| -rw-r--r-- | luax/pages/projects.luax | 24 | ||||
| -rw-r--r-- | luax/public/app.css | 161 | ||||
| l--------- | luax/public/assets | 1 | ||||
| -rw-r--r-- | luax/public/carousel.css | 69 | ||||
| -rw-r--r-- | luax/public/contact.css | 22 | ||||
| -rw-r--r-- | luax/public/index.css | 108 | ||||
| -rw-r--r-- | luax/public/index.js | 4 | ||||
| -rw-r--r-- | luax/public/navbar.css | 278 | ||||
| -rw-r--r-- | luax/public/project.css | 126 | ||||
| -rw-r--r-- | luax/reluax.luax | 48 |
23 files changed, 1364 insertions, 0 deletions
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 <html lang="en"> +<head> + <meta charset="UTF-8" /> + <link rel="icon" type="image/svg+xml" href="/assets/images/favicon.svg" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <link rel="stylesheet" + href="//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css" /> + + <link rel="stylesheet" + type="text/css" + href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> + <link rel="stylesheet" + type="text/css" + href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" /> + + <script type="text/javascript" + src="https://code.jquery.com/jquery-1.11.0.min.js"></script> + <script type="text/javascript" + src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> + <script type="text/javascript" + src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> + + <script src="/index.js"></script> + + <link rel="stylesheet" href="/app.css" /> + <link rel="stylesheet" href="/index.css" /> + <link rel="stylesheet" href="/contact.css" /> + <link rel="stylesheet" href="/project.css" /> + <link rel="stylesheet" href="/navbar.css" /> + <link rel="stylesheet" href="/carousel.css" /> + + <meta property="og:image" content="/assets/images/thumbnail.png" /> + <meta property="og:title" content="duckonaut.dev" /> + <meta property="og:description" content="duckonaut's stuff" /> + <meta property="og:url" content="https://duckonaut.dev" /> + <meta property="og:type" content="website" /> + <meta name="theme-color" content="#9191ff" /> + <meta name="twitter:card" content="summary_large_image" /> + <meta name="twitter:site" content="@duckonaut" /> + <meta name="twitter:creator" content="@duckonaut" /> + <title>duckonaut.dev</title> +</head> + +<body> + <div id="app">{$ props.children $}</div> +</body> + +</html> +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 <div></div> +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 + <div class="carousel-wrapper"> + {$ props.children $} + </div> +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 + <a class={'navbar-item navbar-item-' .. props.attrs.name} href={props.attrs.href} rel={props.attrs.rel}> + {$ props.children $} + </a> +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 + <div class="navbar-container"> + <div class="navbar"> + <NavbarItem name="home" href="/">[Home]</NavbarItem> + <NavbarItem name="games" href="/games">[Games]</NavbarItem> + <NavbarItem name="projects" href="/projects">[Other Projects]</NavbarItem> + <NavbarItem name="github" href="https://github.com/Duckonaut">[GitHub]</NavbarItem> + <NavbarItem name="itch" href="https://duckonaut.itch.io/">[Itch.io]</NavbarItem> + <NavbarItem name="twitter" href="https://twitter.com/duckonaut">[Twitter]</NavbarItem> + <NavbarItem name="mastodon" href="https://mastodon.gamedev.place/@duckonaut" rel="me">[Mastodon]</NavbarItem> + <NavbarItem name="contact" href="/contact">[Contact]</NavbarItem> + </div> + </div> +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] = <img class="grow icon" src={getProjectTechIconLink(tech)} /> + end + local targets = {} + for _, target in ipairs(project.targets) do + targets[#targets + 1] = <img class="grow icon" src={getProjectTargetIconLink(target)} /> + end + + local images = nil + if project.images then + images = {} + for _, image in ipairs(project.images) do + images[#images + 1] = <img class="carousel-item" src={getProjectImageLink(project, image)} /> + end + + images = <Carousel>{$ images $}</Carousel> + end + + return ( + <div class="project"> + <div class="project-title"><a href={project.link}>{$ project.name $}</a></div> + <div class="project-info"> + <div class="icon-row"> + <div class="icon-text">Made using</div> + <div class="icon-container"> + {$ techs $} + </div> + </div> + <div class="icon-row"> + <div class="icon-text">Available on</div> + <div class="icon-container"> + {$ targets $} + </div> + </div> + <hr /> + <div class="project-description"> + {$ project.description $} + </div> + </div> + {$ images $} + </div> + ) +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! <br />Game made in 72 hours for <a href=\"https://ldjam.com/events/ludum-dare/50\">Ludum Dare 50</a>, 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. <br /> Game made in 72 hours for <a href=\"https://ldjam.com/events/ludum-dare/49\">Ludum Dare 49</a>, 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! <br /> 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. <br /> 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. <br /> 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. <br /> Game made in a week for <a href=\"https://www.newgrounds.com/bbs/topic/1476469#bbspost26906541_post_text\">Newgrounds July Jam 2021</a>, 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. <br /> Game made in 2 weeks for <a href=\"https://itch.io/jam/lowrezjam-2021\">LOWREZJAM 2021</a>, 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. <br /> Game made in 72 hours for <a href=\"https://ldjam.com/events/ludum-dare/48/\">Ludum Dare 48</a>, 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. <br /> Game made in 8 hours for <a href=\"https://itch.io/jam/jamjam-bhl-kntg-polygon\">Jam Jam</a>, a local in-person event organized by <a href=\"https://www.kntgpolygon.pl/\">KNTG Polygon</a>, 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. <br /> 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! <br /> Game made in 48 hours for <a href=\"https://ldjam.com/events/ludum-dare/47\">Ludum Dare Compo 47</a> 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. <br /> 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 <h1>{$ props.attrs.title $}</h1> +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 + <div class="main-info"> + <div class="main-info-title"> + Contact + </div> + <div class="contact-container"> + <div class="contact"> + Discord + </div> + + <span class="quiet">usually the fastest way to reach me</span> + <br /> + <span class="highlight">EchoDuck</span>#7866 + + <div class="contact"> + Matrix + </div> + <span class="quiet">for the FOSS folks</span> + <br /> + <span class="highlight">*@echoduck</span>:matrix.org + + <div class="contact"> + Email + </div> + <span class="quiet">I check my email daily</span> + <br /> + <span class="highlight">duckonaut</span>*@gmail.com + </div> + </div> +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] = <Project project={game} /> +end + +return function() + return + <div class="main-info"> + <div class="main-info-title"> + Game Projects + </div> + <div class="main-info-subtitle"> + games I've worked on + </div> + + <div class="games-container"> + {$ game_display $} + </div> + </div> +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 <div class="main-info"> + <div class="main-info-title"> + Stanisław Zagórowski + </div> + <div class="main-info-subtitle"> + aka Duckonaut, EchoDuck + </div> + <img src="assets/images/favicon.svg" class="main-info-image logo grow" /> + + <div class="about-paragraph"> + <p> + 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 + <a class="games-link" href="#/games">games </a> + section. Other projects I've been a part of are available in the + <a class="projects-link" href="#/projects">projects </a> + section. I also enjoy some lower-level programming and learning about the + inner workings of various systems. The main technologies I use are + <span class="highlight">C#</span>, <span class="highlight">Unity</span>, + <span class="highlight">Python</span>, <span class="highlight">Rust </span> + and <span class="highlight">C </span> although I'm also familiar with + <span class="highlight">Godot</span>, <span class="highlight">C++</span> + , <span class="highlight">Java </span> and some + <span class="highlight">JavaScript </span> and <span class="highlight">TypeScript</span>. + </p> + </div> + </div> +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] = <Project project={project} /> +end + +return function() + return + <div class="main-info"> + <div class="main-info-title"> + Other Projects + </div> + <div class="main-info-subtitle"> + projects that are not games + </div> + + <div class="projects-container"> + {$ project_display $} + </div> + </div> +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 + <Common> + <Navbar /> + <div class="back-shadows"></div> + <div id="app-main"> + {$ component $} + <AnimatedBg /> + </div> + </Common> +end + +local function route(path) + if path == '/' then + return 200, wrap_component(<Home />) + elseif path == '/projects' then + return 200, wrap_component(<Projects />) + elseif path == '/games' then + return 200, wrap_component(<Games />) + elseif path == '/contact' then + return 200, wrap_component(<Contact />) + elseif reluax.url_matches('/article/{title}', path) then + local title = reluax.url_extract('/article/{title}', path).title + local article = <Common><Article title={title} /></Common> + return 200, article + end + + return 404, NotFound() +end + +return { + name = "hello-world", + route = route +} + |
