2020 - 2022: Carrd
Around 2018, because of my two last names, people started calling me "Marvil" as a nickname. It stuck, and I decided to use it as my online persona. I named most of my social media accounts variations of of this (such as @jorgemarvil on Instagram back then).
As I started to want more of an online presence to show off my 3D renders, I acquired a domain in late 2020, via Hover: marvil.co. It was the cheapest marvil. domain I could find with a professional-ish sounding TLD. The .co extension felt cool, and at about $30/year, it was pretty affordable.
At the time, I had very limited web dev experience, so I just linked it to Carrd (anyone still remember that?). Carrd was perfect for my needs at the time — a dead-simple one-page landing page that let you create a site in minutes. I spent all of 90 seconds customizing it, and I was live.
2022: First Custom Website
By mid-2022, I had learned enough HTML, CSS, and JavaScript to build a simple static website. I had built some ultra-simple web apps before (namely, an application launcher for my PC), and I was itching to build something more involved. More importantly, Carrd's limitations were starting to chafe — I wanted more control over the layout, animations, and especially the functionality.
I decided to build my own website from scratch, and host it on GitHub Pages for free. Looking back, the setup was straightforward enough: Create a repository, add an index.html file, turn on GitHub Pages in the settings, and connect the domain. But, with my limited experience, git felt foreign and scary, and DNS was, as it always is, a nightmare.
I did manage to get it working, though, and I had instant HTTPS hosting with a global CDN. Pretty neat for free! I spent a few weeks designing and coding the site on, well... Notepad...
But the end result was pretty okay for my first attempt! I had an embarassing hero section with a cheesy tagline, and some links to other projects and social media:
The cringe didn't stop there though — the contact form literally just triggered an IFTTT webhook by, uh, redirecting you there. Yup — it literally opened a new tab to http://maker.ifttt.com/trigger/contactform/with/key/my-key?value1=[name]&value2=[email]&value3=[message]. Yikes.
In my defense, I had no idea what a backend even was at the time, and IFTTT used to be great for home automation so I was quite familiar with it. Even so, having had a contact form literally open a new tab that displayed a "Congratulations! You've successfully triggered the contactform event" message is... embarassing.
2023 - Less Egregious Design
By early 2023, I had changed the site again. This time, it had a similar background hero section as it does at the time of writing; but it was a bit distracting and the pattern was too fine. The embarassing hero text had changed to something a bit more palatable, and the subtitle was slightly less cringey:
The contact form was still the same IFTTT hack, unfortunately.
2024 - Modern Redesign
In December of 2024, completely changed the site. I'd just watched a bunch of performance optimization videos (on other languages, so it was completely unrelated), and I got inspired to make my site faster. I got a little obsessed — I wanted to know how fast I could make it load.
This time, I made the index super light, a loading screen that used built-in CSS animations and system fonts, and it would only move out of the loading screen once everything was fully loaded. I added some JavaScript to serve as an image loader, where it would load -lq (low quality) versions of the images first, and then swap them out for the full-res versions once they were loaded.
I added my logo as a hard-coded SVG in the HTML, so it would load instantly without any requests, added some logic to show a fun tech-inspired loading message, and a script that would move the loading screen out of view once everything had been loaded.
I also gave the site a full redesign; something that went along with my new logo and branding. I switched to a more modern look, with a prettier theme, nicer icons, and a more professional tone overall — It had links at the top for my GitHub, Email, and WhatsApp:
The content now featured one of my renders, and some code stuff:
And the contact form was finally replaced with a proper Express backend hosted on Heroku (thank god). It used Nodemailer and Discord webhooks to send me both an email and a Discord message whenever someone filled it out. Finally, no more IFTTT nonsense.
Setting it up was super easy, and it made me think that I could have done that years ago. It was just $7/month, which I didn't even have to pay for since I had some free credits from GitHub Student Pack; and SSL was included for free via Heroku's automatic Let's Encrypt integration.
2026 - Current Version
In January of 2026, I wanted to write a new blog post — a Portfolio entry, really — about my homelab. However, with my site being a static HTML/CSS/JS site, I realized that adding new pages this way every single time I wanted to write something new was going to be a pain. Simply creating a new blog post meant duplicating a pre-existing blogpost, edigint the HTML, manually updating the /blog/ index page, and if I wanted to create an RSS feed, that was going to be even more work. It was tedious, error-prone, and not very scalable.
I decided to take a page off of Jekyll's book, and rebuild my site using a custom static site generator written in Node. I would have used Jekyll, or Hugo, or any of the dozen other SSGs out there, but that's no fun. I wanted something tailored to my needs, something that could adapt my pre-existing content structure and optimizations, and something that I wouldn't need to debloat.
The core concept was simple: Write blog posts in markdown, with a % METADATA block at the top for specific info such as post title, date, author, tags, etc. Then, have the SSG read these files, parse the metadata, convert the markdown to HTML using marked, and generate the final static HTML files using custom templates.
It's worked abosolute wonders so far. In fact, I'm writing this very post on Markdown right now! I just create a new post.md file, add the metadata up top, write the post, and add the necessary images to the /images/ folder. Then, I just run node build.js, and it does the heavy lifting for me.
It has awesome new features such as automatically creating responsive images with Sharp (including the -lq ones I talked about), code syntax highlighting with highlight.js, and automatic generation of metadata for SEO. It's been so much easier compared to my previous setup, and I'm excited to see what other features I build into it!
I also added some new features to the site. For example, the new Guestbook page allows visitors to leave messages for me and future travelers. If I'm honest, I took the idea from a fellow dev. I also stole their microblog idea in order to add my own μBlog page, where I can post short updates and thoughts without the need for a full blog post. Sorry, Ari!
Finally, I also added a comment section to my blog posts, powered by the new backend I built using Express and SQLite. This allows readers to leave comments and engage in discussions about my posts. I had wanted to do this for a while, but solutions like Disqus felt too heavy and intrusive for my site. This way, I have full control over the comments and can moderate them as needed.
I added basic moderation features for the admin panel, such as deleting comments and rate-limiting. These interactions also required a new "Are you human?" check; since even my small site was getting spammed by bots. For this, I implemented re.shittycaptcha.js, a simple CAPTCHA that asks users to type in a specific random number between 1 and 999 generated on the server. It's super basic, but it works well enough for my needs — it stops most bots without inconveniencing real users too much, the way a distorted image CAPTCHA would (while still being completely free for me, lol).
Anyways, I'm really happy with how my personal website has evolved over the years. It's been a fun journey, and I'm excited to see where it goes next! Each iteration has taught me something new, whether it was design principles, performance optimization, backend development, or CI/CD. The site has grown with me, and it's become somewhat of a digital reflection of who I am as a dev.
Please feel free to check out the guestbook, μBlog, and leave comments on this post! I'd love to hear your thoughts and feedback on my journey with marvil.co.