How I came up with my Portfolio
Tags: firstpost, javascript, portfolio, nojs
Published: 2024-07-12 06:53:47

---
title: How I came up with my Portfolio
published: true
description: This is the story of how my first developer portfolio came to be
tags: firstpost, javascript, portfolio, nojs
# cover_image: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1svw78ynew0g3qi2r8g8.jpg)
# Use a ratio of 100:42 for best results.
cover_image: https://images.unsplash.com/photo-1608211051375-bbd05ca3c20c?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&dl=ricardo-gomez-angel-DnzUwYFm1Kg-unsplash.jpg&w=2400
# published_at: 2024-07-12 02:33 +0800
---

---
## The idea
I used to have an [about.me](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](https://linktr.ee/) and [carrd](https://carrd.co/) 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](https://coolors.co/afb927-1c1c1c-646f58-eff1ed-cdd3d5) did the trick. For the music, I can't hire [Akira Yamaoka](https://www.youtube.com/watch?v=td3P1-cfZ4E) yet, but I have [deadeyejam's](https://www.newgrounds.com/audio/listen/545883) 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 />`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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 />`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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%](https://github.com/facebook/create-react-app/issues/1248) 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](https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/), 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](https://supabase.com/docs/guides/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](https://nextjs.org/) to take care of the static stylesheets, contents, and improve SEO.
- Theme Graphics, and maybe a Brand logo.
- A better intro and navigation idea.