We cheesed webdev.

The architecture.

So the frontend is decently standard stuff: React, Typescript, hosted on Firebase Hosting.

Lê Portfolio Templates

So assume you have filled in all your profile data: name, description, experience, projects, education, skills, images etc. You now go to your dashboard, and can see a preview of the full final portfolio. This preview is actually an iframe that loads up a prebuilt (was built during our deployment GitHub Action), minified portfolio template.

Juicy Portfolio Generation

After you’re happy with your portfolio preview, you may be tempted by that succulent “Generate” button to start building your portfolio. When you click it, a request is sent to Firebase Functions telling it of the sin you just committed.

Portfolio hosting

Now let’s talk about our hosting strategy. Fun fun. Again, we are leaching off of Microsoft’s generosity. We take the minified portfolio template files, and write your profile data and settings to that json described earlier. We then create a new private repo under our Portosaurus GitHub organisation just for you (we actually pay a couple dollars a month so it can be private ❤), and upload all the files to that repo. Using some GitHub API magic, we enable GitHub Pages for that repo, and Bob’s your daddy, your portfolio is now hosted on a world class CDN, completely for free.

Wrap

So yeah…we gamed the system. Are you not entertained. Essentially 0 cost to run a full on portfolio generation website, always up and running (even if none of you actually use it…like now 😔). This architecture is a lot to take in, and is very unconventional…maybe one day i’ll get someone to draw a nice diagram of it just for ol’ times sake.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store