Making My Digital Portfolio

So it's no longer highschool and I need an updated personal website. However, my first digital portfolio was more of a experiment rather than an actual portfolio. I never updated it since it's creation, and it's really cringe (but I'll keep it online just for fun 😁).

So it's 7:40 PM on Saturday, September 7th right now and I spent about 5 hours experimenting with Jekyll. I tried starting out with a template, but none of them looks how I wanted, and of course I wanted how to learn how to do everything from scratch, or else I'd lose my mind. The step by step tutorial in the Jekyll docs is where I ended up at, and it cleared up a lot of confusion I had when jumping head first into a theme template.

Before starting the website, I wanted to familiarize myself with what Jekyll had to offer. For example, built-in code highlighting can be accomplished easily with Liquid syntax highlighting.

    {% highlight javascript %}
    function helloWorld {
        var myVar = 10;
    }
    {% endhighlight %}

        function helloWorld() {
            var myVar = 10;
        }

Pretty cool huh? Liquid allows for a lot of cool formatting and filtering tricks.

Looking at the bigger picture however, Jekyll makes it easy to structure multi-page websites. You can utilize the _layouts folder to create page templates, which allows for easy implementation of a universal navigation bar, header, or footer.

One of these layouts I chose to use is for posts, which have an especially easy implementation with Jekyll. First you have to create a _posts folder. Each post in that folder has to follow a specific name format in order for the title and date to be automatically determined. For example, this page's file is called "2024-09-07-Making-My-Digital-Portfolio.html". The date comes first in the filename, then the title, with hyphens representating spaces. Of course this format can be changed in the _config.yml file, which contains global variables, default URLs, and other Jekyll customization options.

The only thing left to do is to add a page that can provide access these individual blog links, preferably using an iteration. Luckily, iterations are easily done through liquid. For example, my Blog page uses a for loop like this:

        {% for post in site.posts %}
            {% comment %} 
                Add and style individual blog post links 
            {% endcomment %}
        {% endfor %}

Once you implement access to each blog page, that's pretty much it. Everything else comes down to customization and what pages you want or don't want to implement. Thank you for reading my first blog on my brand new website!