How I came up with my Portfolio

rhizene — Fri, 12 Jul 2024 06:53:47 +0000

The idea

I used to have an about.me included in my email signature. I update it from time to time, but it lacks the links that I want to add. Back then, linktree and carrd weren't a thing, and even if they are I still like to add the projects that I have worked up somehow. The basic portfolio function, at least the links and few "about me" texts, should also work without the JS.

The theme

Silent Hill's relaxing vibe accompany me during COVID coding sessions; I think a B.G.M., font and a color scheme is all I need. Though I want to create a color scheme, color theory is not my area. A quick visit to coolors did the trick. For the music, I can't hire Akira Yamaoka yet, but I have deadeyejam's jam for the dead as the jam for the dead jamming for the dead (thanks!).

I may add graphics soon, but for now this and learning the tools would do.

The tools

HTML

The basics of knowing how search engine reads an HTML document helps the engine determine that a page has relevant information. Instead of <divs />, go <em />s, headers (<h1 />, <h2 />, ...), <section />, <aside />, <main />...

In this project, I got to try <dialog />. It still needs JavaScript to work. In my opinion, having a "dialog" tag is better than eating another layer of <div /> for dessert. If Search engines can feel, it may be like this I don't know.

The <details /> allows summarizing details without JS. With further styling, this works for me.

CSS / SASS

The first Webkit version of the portfolio handles SASS to CSS to satisfy the no JS requirement. As I transfer to React, there is an added optional process of picking some of the SASS files to become the static stylesheet.

I thought of checking how to apply React's %PUBLIC_URL% in an external stylesheet so the static stylesheet would not be optional. For now, the optional static stylesheet handling will do.

React

Dividing the portfolio into components is desirable since it would be mostly list of links, portfolio items, and skills.

It's also nice to know that React's components can have their own Module Stylesheets, but to include some of the component styles in the static stylesheet, the style modules need to be imported to the main SASS file.

Github Pages

Just a simple host for a 3-piece landing page, plus page assets.

Supabase

The portfolio needs to have a source of information somehow. With Supabase, I already have a web admin for database, a file store, and API already in the cloud! There's just a bit of learning curve for desiring a local dev environment for Edge Functions. Be prepared to carve a CLI path to:

Docker setup, if you haven't
Initialize a Supabase project
Connect to your Supabase project online
Pulling and creating local setup for Supa's Database
Configuring Deno in VSCode
Starting the local database
Writing the Edge Function

... And finally Deploying the function online.

Result

https://github.com/rhizene/status

What's Next?

I am considering looking into Next to take care of the static stylesheets, contents, and improve SEO.
Theme Graphics, and maybe a Brand logo.
A better intro and navigation idea.

DEV Community: rhizene