tonnygaric.com v2

WHERE
Tonny Garić (Nijmegen, The Netherlands)
WHAT
Personal
WHEN
2018 - present
DISCIPLINES
  • Back-end Development
  • Front-end Development
  • Deployment
USED TECHNOLOGY
  • PHP
  • JavaScript
  • HTML
  • CSS
  • Bootstrap
  • Kirby
tonnygaric.com v2

About tonnygaric.com v2

The website you are visiting right now, is the second major version of my personal website.

Highlights

  • It is possible to send me feedback from each page, by clicking on 'Send feedback' in the footer.
  • Images are loaded as they enter the viewport.
  • Score of 125/100 on Observatory by Mozilla.
  • First hit on Google, if you search for tonny garic on Google, DuckDuckGo and Bing.

Codebase

Here is all software I used to build tonnygaric.com v2:

  • Kirby: used as file-based CMS in PHP
  • Bootstrap: used for styling
  • jQuery: required by Bootstrap, also used for Ajax requests
  • LazyLoad: used to load images as they enter the viewport
  • Mailgun: used to email submitted feedback to me
  • Matomo (formerly Piwik): used for privacy-aware analytics, hosted on my own server
  • highlight.js: used for syntax highlighting of code blocks in articles
  • Disqus: used for comments on articles
  • animate.css: used for animation of the blue bar on the top of each page

Here are all other things I used:

  • GitHub: all code is hosted on GitHub
  • TransIP: website is hosted on a VPS of TransIP, running Ubuntu
  • NGINX: used as webserver
  • UptimeRobot: used to be quickly notified if any downtime happens
  • Visual Studio Code: everything was put together in Visual Studio Code on my MacBook Pro
  • Sketch: used to create my logo
  • Font Awesome: not directly included, but most of the svg icons are downloaded from Font Awesome's website (read their license here)
  • Android Asset Studio: used to create all favicons
  • Favicon Generator: used to generate all favicons
  • Mozilla: used the same images with random patterns, as Mozilla on their blog, for articles without an image

Privacy by design

I tried to take your privacy into account throughout the whole development process. Among other things:

  • Disqus comments for articles are only loaded if you explicitly click on the button 'Load Disqus comments';
  • Replaced Google Analytics (used in v1) with Matomo—which I host on my own server.

If you think I can improve your privacy on my website, please get in touch.

Source code, license and usage

Currently, the source code of my website is privately hosted on GitHub—and thus not open source. Even though I am a proponent of open source, here is my reasoning for this:

I have spend a lot of time into the design and development of my website. As a software engineer, my website (portfolio) is what separates me from the competition—it is the first thing people see about me on the internet. Furthermore, as a completely handcrafted design and codebase, it is also my 'online business card'—it is a reflection of the quality that people can expect from me. For these reasons, I did not open source it.

At the end, my website is obviously a bunch of publicly available HTML, CSS and JS files. I am flattered if you want to use my website as inspiration for your own. However, please do not wget my website. 🙂

If you think that I am wrong, or have any feedback, please get in touch—so we can discuss it.

Security

My website scores 125/100 on Observatory by Mozilla. Check it out by yourself here.

Tonny Garić's colour palette

Branding

Colour palette

tonnygaric.com v2 colour palette

Logo

tonnygaric.com v2 logo

Also see

Also see the previous version of my website here.


SHARE THIS PROJECT