Refreshing Silverbirder's Portfolio Page (v2)

I have refreshed my portfolio page. In this article, I would like to introduce the motivation for the refresh, the content of the refresh, and the future.

Motivation

Originally, my portfolio page was built using Hugo, a static page generator.

http://kohki.hatenablog.jp/entry/hugo-portfolio

I created a portfolio page with Hugo, referring to the above article. At that time, I think I had the following three thoughts as to why I created a portfolio.

I want people to know what kind of person I am
I want to have my own site
I want to try using a static page generator

Managing articles with Hugo is in Markdown, so it's easy to write for engineers. Also, for design themes, there are public themes available, so you can choose what you like.

Initially, it was very comfortable. I was satisfied with being able to easily publish a stylish portfolio site. However, as I continued to use it, I began to feel frustrated that I couldn't reach the itchy parts. I think this is a trade-off with convenience, but I began to recognize the following disadvantages.

Technical challenges with Javascript are difficult
Customizing design themes is difficult
SEO tuning is difficult

I started to think that the disadvantages outweighed the advantages of convenience. Therefore, I decided to create a portfolio site on my own.

What I did

I created a portfolio site that makes full use of AMP. The overall picture is as follows.

The structure is centered around AMP Optimizer. The source code is in the following repository.

https://github.com/silverbirder/silverbirder.github.io

Technology selection

For this portfolio site, using a web framework with more than necessary features (e.g. Next.js) was rejected because it would increase maintenance costs. Also, static page generators (e.g. Gatsby) were rejected for the reasons of motivation. Therefore, I aimed for a minimal necessary configuration. As a result, the flow became as follows.

Prepare content (Markdown, HTML, JSON)
AMP-ify with AMP Optimizer using 1 as input

I adopted Gulp as a task runner to control these orders. AMP Optimizer is installed with NPM, so I wanted a task runner that is compatible with Node.js. The options were Grunt or Gulp, but Gulp was introduced on the official AMP site, so I chose Gulp.

Here are the major technical choices. Other minor details are as follows:

highlightjs
- Code highlighting feature
jsdom
- Various html processing
  - Anchor setting for h1~h6 tags (like anchorJS)
  - Mixing HTML templates and main content
  - ...etc
ampcssframework
- Wanted Dark Theme and Grid features
Cloudinary
- Image management SaaS. Used for OGP, etc.
For SEO
- Google search console
- Google analytics

Portfolio Content

I was wondering what kind of content to prepare for the portfolio site. There is a Markdown option in AMP Optimizer. It seems that not only HTML but also Markdown can be converted to AMP (via HTML). Therefore, I realized that I could add blog-like content to the portfolio page. Also, the blog content I've written so far was managed in Markdown, so it seemed like I could use it.

As a result, I prepared the following content:

Self-introduction
Blog
Book search
Purchased item list
- Things bought on Amazon, subscriptions
Watch
- RSS I'm checking
Projects
- Introduction of what I've made

I tried to add a WebPush feature for RSS on the Watch page, but it required a server to push, and it seemed like the development would be prolonged, so I gave up.

How was it after the renewal?

As expected, I was able to extend various portfolio site features that I couldn't do with Hugo.

Technical challenges with Javascript are difficult
- I was able to try AMP and Web Worker (amp-script)
Customizing design themes is difficult
- I was able to tune CSS frameworks and CSS
SEO tuning is difficult
- I was able to use SearchConsole and GoogleAnalytics
- I was able to tune sitemap and meta tags

What I couldn't do as expected was the constraint of AMP, and there were technologies that couldn't be run on amp-script like WebComponents. Also, I tried to import ES Module (skypack) on WebWorker (amp-script), but I gave up because Safari was not supported.

However, my final impression is that I was able to process HTML flexibly, and I can do anything on AMP, so I think it was good to renew.

What I learned

I will briefly reflect on it from the experiential learning model. (for the first time)

Experience	Reflection	Conceptualization	Trial
Tried AMP for the first time	I hadn't used AMP before, but there were fewer issues than I thought. However, there were also unexpected issues.	The challenges of unfamiliar technology elements are unknown even if anticipated	Try out unknown technologies lightly
Didn't use frameworks like Next.js or Gatsby	I wanted a simple configuration. I didn't want to include a framework with more features than necessary.	To ensure maintainability, configure with minimal features	Weigh maintainability when choosing large-scale technologies

In Conclusion

I have refreshed my portfolio. Since I had never built a website from scratch before, it was a good study to develop everything by hand, including sitemap and JSON-LD. There are still many issues with my portfolio, but I would like to improve it little by little.