<!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"> <head> <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> <link rel="icon" type="image/x-icon" href="/assets/favicon.ico"> <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" /> <script async> $(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> <body> <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"> <nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="./"> <img src="assets/navlogo.jpg" alt="Navigation bar logo"> <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> <div class="hero-body"> <table style="width: 100%"> <tr> <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 --> <td> <div> <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 --> <p class="title" align="center" style="font-size: 9vw;"><b><i>MassiveBox</i></b></h1><!-- Desktop --> <p class="is-size-5" align="center">Yup. That's me.</p> </div> </td> </tr> </table> </div> </section> <section class="section"> <p class="title">Who am I</p> <p class="subtitle"> I'm Matteo, a 17 years old guy from Brescia, Italy.<br> 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> <a rel="me" href="https://c.im/@massivebox"><button class="button is-link">Mastodon</button></a> <a href="https://github.com/massivebox"><button class="button is-link">GitHub</button></a> </section> <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"> <figure class="image is-1by1"><img src="assets/homeicons/go.jpg" alt="go's logo" loading="lazy"></figure> </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"> <figure class="image is-1by1"><img src="assets/homeicons/front.jpg" alt="html, javascript, css" loading="lazy"></figure> </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"> <figure class="image is-1by1"><img src="assets/homeicons/linux.jpg" alt="linux tux" loading="lazy"></figure> </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"> <figure class="image is-1by1"><img src="assets/homeicons/c.jpg" alt="c logo" loading="lazy"></img></figure> </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"> <figure class="image is-1by1"><img src="assets/homeicons/py.jpg" alt="python logo" loading="lazy"></figure> </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"> <figure class="image is-1by1"><img src="assets/homeicons/sql.jpg" alt="mysql logo" loading="lazy"></figure> </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"> <figure class="image is-1by1"><img src="assets/homeicons/docker.jpg" alt="docker logo" loading="lazy"></figure> </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"> <figure class="image is-1by1"><img src="assets/homeicons/compose.jpg" alt="compose logo" loading="lazy"></figure> </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"> <figure class="image is-1by1"><img src="assets/homeicons/redis.jpg" alt="redis logo" loading="lazy"></figure> </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"> <figure class="image is-1by1"><img src="assets/homeicons/mongo.jpg" alt="mongodb logo" loading="lazy"></figure> </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"> <figure class="image is-1by1"><img src="assets/homeicons/php.jpg" alt="php logo" loading="lazy"></figure> </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"> <figure class="image is-1by1"><img src="assets/homeicons/jamstack.jpg" alt="jamstack image" loading="lazy"></figure> </div> <div class="card-content"> <p><b>Jamstack</b></p> <p>It's my way of life.</p> </div> </div> </div> </div> </div> </section> <section class="section"> <p class="title">What's happening</p> <p>Feed from my <a href="https://c.im/@massivebox">Mastodon profile</a></p> <div id="mastodonfeed" style="overflow-x: hidden; overflow-y: auto; height: 50vh; margin-top: 5px"> </div> </section> <script src="deps/rss-parser.min.js"></script> <script> let parser = new RSSParser(); parser.parseURL('https://c.im/@massivebox.rss', function(err, feed) { 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>`); } 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"> <a href="`+entry.link+`"><img src="assets/avatar.jpg" alt="My profile picture"></a> </p> </figure> <div class="media-content"> <div class="content"> <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> `+entry.content+` </div> </div> </article> </div>`; $("#mastodonfeed").html($("#mastodonfeed").html()+html); }) }) </script> <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>