<!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 name="viewport" content="width=device-width, initial-scale=1">
<title>Home - MassiveBox</title>
<link rel="stylesheet" href="deps/bulma/css/bulma.min.css">
<link rel="stylesheet" href="deps/forkawesome/css/fork-awesome.min.css">
<script src="deps/jquery/dist/jquery.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>
$(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");
});
var dob = new Date("09/03/2004");
var month_diff = Date.now() - dob.getTime();
var age_dt = new Date(month_diff);
var year = age_dt.getUTCFullYear();
$("#age").text(Math.abs(year - 1970));
});
</script>
</head>
<body>
<section class="hero is-primary is-fullheight" style="padding: 2vw 7vw 2vw 7vw; background: #050732 !important">
<nav class="navbar" 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="fa 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="fa fa-cloud"></i></span><span>Projects</span></span></a>
<a class="navbar-item" href="https://blog.massivebox.net" target="_blank" rel="noopener noreferrer"><span class="icon-text"><span class="icon"><i class="fa fa-feed"></i></span><span>Blog</span></span></a>
<a class="navbar-item" href="contact.html"><span class="icon-text"><span class="icon"><i class="fa fa-envelope"></i></span><span>Contact</span></span></a>
</div>
</div>
</nav>
<div class="hero-body">
<table style="width: 100%">
<tr style="text-align:center">
<td><p>
<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>
<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" style="font-size: 9vw;"><b><i>MassiveBox</i></b></p><!-- Desktop -->
<p class="is-size-5">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 <span id="age"></span> 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 class="button is-link" href="https://codeberg.org/massivebox">Codeberg</a>
<a class="button is-link" rel="me" href="https://blob.cat/massivebox">Fediverse</a>
<a class="button is-link" href="https://blog.massivebox.net">Blog</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"></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>MySQL</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://blob.cat/massivebox">Fediverse account</a></p>
<div id="mastodonfeed" style="overflow-x: hidden; overflow-y: auto; height: 50vh; margin-top: 5px">
</div>
</section>
<script src="deps/rssparser/dist/rss-parser.min.js"></script>
<script>
let parser = new RSSParser();
parser.parseURL('/feed.atom', function(err, feed) {
if (err) {
$("#mastodonfeed").html(`<p><span class="icon has-text-danger"><i class="fa fa-times"></i></span> Error parsing Pleroma 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://blob.cat/massivebox" target="_blank" rel="noopener noreferrer">massivebox@blob.cat</a></small> <small>`+date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear()+`</small></p>
`+entry.content.replace(/:(\S*):/gm, '<img src="/emoji/$1" width="16" alt="$1" loading="lazy">')+`
</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="fa fa-heart"></i></span>.<br>
All logos in this page are copyright of their owner.<br>
<a href="https://gitea.massivebox.net/massivebox/website" target="_blank" rel="noopener noreferrer">Source code</a> | <a href="https://ecodash.massivebox.net" target="_blank" rel="noopener noreferrer">Environmental Report</a> | <a href="/pages/privacy.html" target="_blank" rel="noopener noreferrer">Privacy Policy</a>
</p>
</div>
</footer>
</body>
</html>