2021-08-04 16:12:51 +00:00
<!DOCTYPE html>
<!--
MassiveBox's Homepage
Copyright (C) 2021 MassiveBox
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see < https: / / www . gnu . org / licenses / > .
-->
< html lang = "en" >
2021-12-26 19:25:09 +00:00
< head >
2021-08-04 16:12:51 +00:00
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Home - MassiveBox< / title >
< link rel = "stylesheet" href = "deps/bulma.min.css" >
< script src = "deps/jquery.min.js" > < / script >
< script src = "deps/fontawesome.min.js" > < / script >
2021-12-26 19:25:09 +00:00
< link rel = "icon" type = "image/x-icon" href = "/assets/favicon.ico" >
2021-08-04 16:12:51 +00:00
< meta charset = "UTF-8" / >
< meta name = "author" content = "MassiveBox" / >
< meta name = "description" content = "MassiveBox is a free time developer and FOSS enthusiast. This is his website." / >
< meta name = "keywords" content = "developer, web, backend, telegram, session, massive, box, massivebox" / >
2021-12-26 19:25:09 +00:00
< script async >
2021-08-04 16:12:51 +00:00
$(document).ready(function() {
// Check for click events on the navbar burger icon
$(".navbar-burger").click(function() {
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
$(".navbar-burger").toggleClass("is-active");
$(".navbar-menu").toggleClass("is-active");
});
});
< / script >
< / head >
2021-12-26 19:25:09 +00:00
2021-08-04 16:12:51 +00:00
< body >
2021-12-26 19:25:09 +00:00
< section class = "hero is-small is-black" >
< div class = "hero-body" >
< p >
This website is available on < u > < a href = "https://lokinet.org/" target = "_blank" rel = "noopener noreferrer" > Lokinet< / a > < / u > : < u > < a href = "http://i455hht9c6q6nsw3gk66wdheoo9yteauhjsdumi333ajpor86pay.loki/" > SNApp URL< / a > < / u > .
< / p >
< / div >
< / section >
< section class = "hero is-primary is-fullheight" style = "padding: 2vw 7vw 2vw 7vw; background: #050732 !important" >
2021-08-04 16:12:51 +00:00
< nav class = "navbar" role = "navigation" aria-label = "main navigation" >
< div class = "navbar-brand" >
< a class = "navbar-item" href = "./" >
2021-12-26 19:25:09 +00:00
< img src = "assets/navlogo.jpg" alt = "Navigation bar logo" >
2021-08-04 16:12:51 +00:00
< div style = "width: 15px" > < / div >
< p class = "is-size-4" > < b > < i > MassiveBox< / i > < / b > < / p >
< / a >
< a role = "button" class = "navbar-burger" aria-label = "menu" aria-expanded = "false" data-target = "navbarBasicExample" >
< span aria-hidden = "true" > < / span >
< span aria-hidden = "true" > < / span >
< span aria-hidden = "true" > < / span >
< / a >
< / div >
< div id = "navbarBasicExample" class = "navbar-menu" >
< div class = "navbar-end" >
< a class = "navbar-item" href = "./" > < span class = "icon-text" > < span class = "icon" > < i class = "fas fa-home" > < / i > < / span > < span > Home< / span > < / span > < / a >
< a class = "navbar-item" href = "projects.html" > < span class = "icon-text" > < span class = "icon" > < i class = "fas fa-swatchbook" > < / i > < / span > < span > Projects< / span > < / span > < / a >
< a class = "navbar-item" href = "contact.html" > < span class = "icon-text" > < span class = "icon" > < i class = "fas fa-envelope" > < / i > < / span > < span > Contact< / span > < / span > < / a >
< / div >
< / div >
< / nav >
2021-12-26 19:25:09 +00:00
2021-08-04 16:12:51 +00:00
< div class = "hero-body" >
< table style = "width: 100%" >
< tr >
2021-12-26 19:25:09 +00:00
< td style = "" > < p align = "center" >
< video autoplay loop muted playsinline class = "is-hidden-touch" style = "width: 257px" >
< source src = "assets/spinning.webm" type = "video/webm" >
< source src = "assets/spinning.mp4" type = "video/mp4" >
< / video >
< / p > < / td > <!-- Desktop -->
2021-08-04 16:12:51 +00:00
< td >
< div >
2021-12-26 19:25:09 +00:00
< p align = "center" >
< video autoplay loop muted playsinline class = "is-hidden-desktop" style = "width: 257px" >
< source src = "assets/spinning.webm" type = "video/webm" >
< source src = "assets/spinning.mp4" type = "video/mp4" >
< / video >
< / p > <!-- Mobile -->
2021-08-04 16:12:51 +00:00
< p class = "title" align = "center" style = "font-size: 9vw;" > < b > < i > MassiveBox< / i > < / b > < / h1 > <!-- Desktop -->
2021-12-26 19:25:09 +00:00
2021-08-04 16:12:51 +00:00
< p class = "is-size-5" align = "center" > Yup. That's me.< / p >
< / div >
< / td >
< / tr >
< / table >
< / div >
< / section >
2021-12-26 19:25:09 +00:00
2021-08-04 16:12:51 +00:00
< section class = "section" >
< p class = "title" > Who am I< / p >
< p class = "subtitle" >
2021-09-04 13:17:39 +00:00
I'm Matteo, a 17 years old guy from Brescia, Italy.< br >
2021-08-04 16:12:51 +00:00
In my free time I like fiddling around with code, and sometimes I come up with something decent that I publish to the world.< br >
I like cats, Linux, Free and Open Source Software, and privacy.
< / p >
< a href = "https://codeberg.org/massivebox" > < button class = "button is-link" > Codeberg< / button > < / a >
2021-09-04 13:17:39 +00:00
< a rel = "me" href = "https://c.im/@massivebox" > < button class = "button is-link" > Mastodon< / button > < / a >
2021-08-04 16:12:51 +00:00
< a href = "https://github.com/massivebox" > < button class = "button is-link" > GitHub< / button > < / a >
< / section >
2021-12-26 19:25:09 +00:00
2021-08-04 16:12:51 +00:00
< section class = "hero is-medium is-link" >
< div class = "hero-body" >
< p class = "title" > Stuff I know (kind of)< / p >
< div class = "subtitle columns" >
< div class = "column is-2" >
< div class = "card" style = "height: 100%" >
< div class = "card-image" >
2021-12-26 19:25:09 +00:00
< figure class = "image is-1by1" > < img src = "assets/homeicons/go.jpg" alt = "go's logo" loading = "lazy" > < / figure >
2021-08-04 16:12:51 +00:00
< / div >
< div class = "card-content" >
< p > < b > Go< / b > < / p >
< p > Backend work, Telegram bots, API endpoints< / p >
< / div >
< / div >
< / div >
< div class = "column is-2" >
< div class = "card" style = "height: 100%" >
< div class = "card-image" >
2021-12-26 19:25:09 +00:00
< figure class = "image is-1by1" > < img src = "assets/homeicons/front.jpg" alt = "html, javascript, css" loading = "lazy" > < / figure >
2021-08-04 16:12:51 +00:00
< / div >
< div class = "card-content" >
< p > < b > HTML, CSS, JavaScript/JQuery< / b > < / p >
< p > Frontend work< / p >
< / div >
< / div >
< / div >
< div class = "column is-2" >
< div class = "card" style = "height: 100%" >
< div class = "card-image" >
2021-12-26 19:25:09 +00:00
< figure class = "image is-1by1" > < img src = "assets/homeicons/linux.jpg" alt = "linux tux" loading = "lazy" > < / figure >
2021-08-04 16:12:51 +00:00
< / div >
< div class = "card-content" >
< p > < b > Linux< / b > < / p >
< p > Runs on all my PCs and my server< / p >
< / div >
< / div >
< / div >
< div class = "column is-2" >
< div class = "card" style = "height: 100%" >
< div class = "card-image" >
2021-12-26 19:25:09 +00:00
< figure class = "image is-1by1" > < img src = "assets/homeicons/c.jpg" alt = "c logo" loading = "lazy" > < / img > < / figure >
2021-08-04 16:12:51 +00:00
< / div >
< div class = "card-content" >
< p > < b > C< / b > < / p >
< p > Stuff with SDL1 and SDL2, mostly 2D games< / p >
< / div >
< / div >
< / div >
< div class = "column is-2" >
< div class = "card" style = "height: 100%" >
< div class = "card-image" >
2021-12-26 19:25:09 +00:00
< figure class = "image is-1by1" > < img src = "assets/homeicons/py.jpg" alt = "python logo" loading = "lazy" > < / figure >
2021-08-04 16:12:51 +00:00
< / div >
< div class = "card-content" >
< p > < b > Python< / b > < / p >
< p > Simple scripts for myself, internal stuff< / p >
< / div >
< / div >
< / div >
< div class = "column is-2" >
< div class = "card" style = "height: 100%" >
< div class = "card-image" >
2021-12-26 19:25:09 +00:00
< figure class = "image is-1by1" > < img src = "assets/homeicons/sql.jpg" alt = "mysql logo" loading = "lazy" > < / figure >
2021-08-04 16:12:51 +00:00
< / div >
< div class = "card-content" >
< p > < b > SQL< / b > < / p >
< p > Database engine of most of my projects< / p >
< / div >
< / div >
< / div >
< / div >
< div class = "subtitle columns" >
< div class = "column is-2" >
< div class = "card" style = "height: 100%" >
< div class = "card-image" >
2021-12-26 19:25:09 +00:00
< figure class = "image is-1by1" > < img src = "assets/homeicons/docker.jpg" alt = "docker logo" loading = "lazy" > < / figure >
2021-08-04 16:12:51 +00:00
< / div >
< div class = "card-content" >
< p > < b > Docker< / b > < / p >
< p > All my projects run on Docker< / p >
< / div >
< / div >
< / div >
< div class = "column is-2" >
< div class = "card" style = "height: 100%" >
< div class = "card-image" >
2021-12-26 19:25:09 +00:00
< figure class = "image is-1by1" > < img src = "assets/homeicons/compose.jpg" alt = "compose logo" loading = "lazy" > < / figure >
2021-08-04 16:12:51 +00:00
< / div >
< div class = "card-content" >
< p > < b > Docker Compose< / b > < / p >
< p > Making Docker easy.< / p >
< / div >
< / div >
< / div >
< div class = "column is-2" >
< div class = "card" style = "height: 100%" >
< div class = "card-image" >
2021-12-26 19:25:09 +00:00
< figure class = "image is-1by1" > < img src = "assets/homeicons/redis.jpg" alt = "redis logo" loading = "lazy" > < / figure >
2021-08-04 16:12:51 +00:00
< / div >
< div class = "card-content" >
< p > < b > Redis< / b > < / p >
< p > Database engine for my simplest projects< / p >
< / div >
< / div >
< / div >
< div class = "column is-2" >
< div class = "card" style = "height: 100%" >
< div class = "card-image" >
2021-12-26 19:25:09 +00:00
< figure class = "image is-1by1" > < img src = "assets/homeicons/mongo.jpg" alt = "mongodb logo" loading = "lazy" > < / figure >
2021-08-04 16:12:51 +00:00
< / div >
< div class = "card-content" >
< p > < b > MongoDB< / b > < / p >
< p > Database engine of some of my projects< / p >
< / div >
< / div >
< / div >
< div class = "column is-2" >
< div class = "card" style = "height: 100%" >
< div class = "card-image" >
2021-12-26 19:25:09 +00:00
< figure class = "image is-1by1" > < img src = "assets/homeicons/php.jpg" alt = "php logo" loading = "lazy" > < / figure >
2021-08-04 16:12:51 +00:00
< / div >
< div class = "card-content" >
< p > < b > PHP< / b > < / p >
< p > It was a long time ago I swear< / p >
< / div >
< / div >
< / div >
< div class = "column is-2" >
< div class = "card" style = "height: 100%" >
< div class = "card-image" >
2021-12-26 19:25:09 +00:00
< figure class = "image is-1by1" > < img src = "assets/homeicons/jamstack.jpg" alt = "jamstack image" loading = "lazy" > < / figure >
2021-08-04 16:12:51 +00:00
< / div >
< div class = "card-content" >
< p > < b > Jamstack< / b > < / p >
< p > It's my way of life.< / p >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
2021-12-26 19:25:09 +00:00
2021-08-04 16:12:51 +00:00
< section class = "section" >
< p class = "title" > What's happening< / p >
< p > Feed from my < a href = "https://c.im/@massivebox" > Mastodon profile< / a > < / p >
2021-08-08 09:18:37 +00:00
< div id = "mastodonfeed" style = "overflow-x: hidden; overflow-y: auto; height: 50vh; margin-top: 5px" >
2021-12-26 19:25:09 +00:00
2021-08-04 16:12:51 +00:00
< / div >
< / section >
2021-12-26 19:25:09 +00:00
2021-08-04 16:12:51 +00:00
< script src = "deps/rss-parser.min.js" > < / script >
< script >
let parser = new RSSParser();
parser.parseURL('https://c.im/@massivebox.rss', function(err, feed) {
2021-08-08 09:18:37 +00:00
if (err) {
$("#mastodonfeed").html(`< p > < span class = "icon has-text-danger" > < i class = "fas fa-times" > < / i > < / span > Error parsing Mastodon RSS feed. Try refreshing the page.< / p > `);
}
2021-08-04 16:12:51 +00:00
feed.items.forEach(function(entry) {
date = new Date(Date.parse(entry.isoDate));
html = `
< div class = "card mb-3" >
< article class = "media" style = "padding: 10px" >
< figure class = "media-left" >
< p class = "image is-64x64" >
2021-12-26 19:25:09 +00:00
< a href = "`+entry.link+`" > < img src = "assets/avatar.jpg" alt = "My profile picture" > < / a >
2021-08-04 16:12:51 +00:00
< / p >
< / figure >
< div class = "media-content" >
< div class = "content" >
2021-12-26 19:25:09 +00:00
< p > < strong > MassiveBox< / strong > < small > < a href = "https://c.im/@massivebox" target = "_blank" rel = "noopener noreferrer" > massivebox@c.im< / a > < / small > < small > `+date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear()+`< / small > < / p >
2021-08-08 09:18:37 +00:00
`+entry.content+`
2021-08-04 16:12:51 +00:00
< / div >
< / div >
< / article >
< / div > `;
$("#mastodonfeed").html($("#mastodonfeed").html()+html);
})
})
< / script >
2021-12-26 19:25:09 +00:00
2021-08-04 16:12:51 +00:00
< footer class = "footer" >
< div class = "content has-text-centered" >
< p >
Website by MassiveBox, handcrafted in Italy with < span class = "icon has-text-danger" > < i class = "fas fa-heart" > < / i > < / span > .< br >
Released under GPL3. < a href = "https://codeberg.org/massivebox/website" target = "_blank" rel = "noopener noreferrer" > Source code< / a > < br >
Icons by < a href = "https://fontawesome.com" target = "_blank" rel = "noopener noreferrer" > FontAwesome< / a > (CC BY 4.0) - All logos in this page are copyright of their owner - < a href = "/pages/privacy.html" target = "_blank" rel = "noopener noreferrer" > Privacy< / a >
< / p >
< / div >
< / footer >
< / body >
< / html >
