About This Portfolio

Welcome to my personal portfolio. This page exists to explain the basic tech used to display the data on this website.

Tech Used

This portfolio is written in PHP 8.2 and uses an in-house framework for routing and PJAX. Data is served traditionally on the initial request and all subsequent requests are handled by AJAX & PushState.

To ensure fast load times, the server will only serve what is necessary for the next page to load. Below is an example of my custom PJAX solution returning the data that is necessary to load the My Links page.

{
    "Title": "My Links - Jake Andreoli",
    "CSSFiles": [
        "\/Assets\/CSS\/Home.css?1649249956"
    ],
    "JavaScriptFiles": [],
    "HTML": {
        "Body": "<h1>My Links<\/h1>\n<p>Here you can find links to social media accounts and other things to follow what I'm working on!<\/p>\n<div class=\"Skills\">\n    <a href=\"https:\/\/github.com\/jakeandreoli\" target=\"_blank\" class=\"Skill\">\n        <span class=\"Title\">GitHub<\/span>\n        <span class=\"Inner\">\n            <span class=\"fab fa-github\"><\/span>\n            <br \/>\n            @jakeandreoli\n        <\/span>\n    <\/a>\n    <a href=\"https:\/\/www.linkedin.com\/in\/jakeandreoli\/\" target=\"_blank\" class=\"Skill\">\n        <span class=\"Title\">LinkedIn<\/span>\n        <span class=\"Inner\">\n            <span class=\"fab fa-linkedin\"><\/span>\n            <br \/>\n            @jakeandreoli\n        <\/span>\n    <\/a>\n    <a href=\"mailto:jake@andreoli.one\" target=\"_blank\" class=\"Skill\">\n        <span class=\"Title\">Email<\/span>\n        <span class=\"Inner\">\n            <span class=\"far fa-envelope\"><\/span>\n            <br \/>\n            jake@andreoli.one\n        <\/span>\n    <\/a>\n<\/div>"
    },
    "ServerTime": 0.008001
}

The client then swaps out the old data with the new. If a file is already loaded, we will ignore it. If a file is no longer needed, it will be unloaded. This ensures there is no JavaScript or CSS conflicts.

Projects

To list all of my project pages and on the homepage, I used markdown files with INI syntax at the top of the file.

An example of this can be found below:

[Meta]
Title=Cards Against Lucas

[Project]
StartYear=2018
EndYear=2018
Role="UI/UX Web Developer"
Preview=/Assets/Images/CardsAgainstLucas.webp
Description="Created the frontend experience for a real-time, multiplayer Cards Against Humanity clone in collaboration with Lucas Cardellini."
Tech=JavaScript
Public=true
---
# Cards Against Lucas
// Content would go here

The homepage then loads each markdown file and sorts it by the ending year. If no ending year is specified, it is labeled as present and sorted first.

Dark Theme

The site's dark theme toggle will dynamically load a CSS file that contains new data for existing site variables.

Why am I explaining this?

This site is designed to be performant and lightweight. It allows the site to be easily updated and new additions to be made utilizing markdown files and serves content to the end-user in a speedy fashion. All the tech used on this site is custom built