Active feature list

General

• Set font type scale

Use typescale.com and copy the CSS code from here. Also, refer to this blog post which should include details about how to make font sizes responsive.

Use ems to adjust the letter spacing so it's applied relative to the font size of the element you're styling.

Undecided between Noto Sans and Poppins, but leaning more towards the former since Poppins may cause readability issues due to its a being similar to o, among others. Run usability tests.

• Set colour scheme

• Implement responsive design

Media queries, or the use of device widths to target particular layouts, go against the underlying theory of responsive design which advocates for content to fit any viewport. Meanwhile, CSS Grid and Flexbox ensure that it is content that dictates the breakpoints, not the other way around.

While both can be used at the same time, the grid layout is ideal for structured layouts, with a parent that controls its children; a flexbox allows the children to be resized independently of the parent. See here for details.

• Create section layout

Include the section side titles (set at the centre of the viewport) and contact button with a conditional statement to hide the latter in the case of the Contact section.

• Create general layout

Include the header, the footer and the option to include a side title. Set a dark scrollbar (or disabled with the no-scroll library), and style the active text selection using the selection modifier.

• Create article layout

This is for the blog posts as well as the privacy policy and the disclaimer.

• Add scroll-to-anchor animation

The idea behind it is to limit the user's viewport to one section only, but this will mess up with the Home fade in/out animation. It's mostly good for the about section. See here for an implementation. This example is broken.

• Add home button

Set the button as part of a fixed header with passthrough like Steven Mengin's (or with transparency), hidden only on the Home section. Apply a lighten on hover animation to it.

• Add contact button

Button with a hover animation, hidden only on the Contact section and on small screens. When clicked, trigger a scroll-to-anchor animation if on main page, or else redirect.

• Add footer

Make the footer responsive with clickable external buttons and a Disclaimer button with underline on hover.

• Add disclaimer

Link to it from the footer with a button hover animation. Refer to this example.

• Add CV

Clicking the CV button shall open a new tab displaying the CV, or download it?

• Add text animations

Learn the fundamentals of CSS animations (see animate.css). But once that knowledge is grasped, turn to libraries for complex object animations. No reason to re-invent the wheel. GSAP, Barba.js, AoS, ScrollMagic, are all excellent solutions but GSAP is the most complete.

Check out Lenis. See also this one.

Make the text show up from the bottom to the top, particularly the title. See Carvico, this one and this heading animation.

• Add hyperlink animation

Adopt the link hover effect as implemented by Hackernoon.

• Add license

Read here for the distinction between copyright and license type. Interesting note about copyright at the bottom of this page.

Home

• Hide header

• Update profile image

Convert image to SVG then export at a higher resolution before editing. Use optimized webp with fallback to png.

• Add job title animation

See here for implementation and here to choose the correct titles.

• Add Blog widget

Widget split into two parts: a button with a hover animation, and a heading carousel with an underline on hover animation. Clicking the title opens the linked article and clicking the button shows the blog. On a small display, the button is hidden and replaced with static text. Truncate the article title based on the display size. This won't be pursued since it takes the user's attention away from the planned navigation.

• Add announcement banner

Use it to advertise the book launch, and later switch it with the Blog widget. Likewise, this won't be pursued since it takes the user's attention away from the planned navigation.

• Add availability tag

• Add fade to black animation

Change the transparency of the elements on scroll (increase when out-of-focus, decrease when in-focus), similar to this implementation.

• Add down arrow

May be required to counter the illusion of completeness. If clicked, move viewport to the next section. Refer to this example.

About

• Add timeline

A similar component is the accordion. Use Carvico's as a template.

• Add intro

A 2-3 sentence description in which you mention "based in the EU" (and "Renaissance man" or "polymath"?)

• Update copy

• Add section atwork

Follow Quantica Capital's example by using an text-to-image generator to produce artwork following the style of 20th century artists. Overlay the images with a dark linear gradient to improve readability. Use fade in/out for the image animation. Consider excluding them on small screens.

Book

• Add switcher

Add an anchor to the top of the switcher such that when the user switches to a different section, the viewport moves upwards to show the top part.

• Make title sticky

• Add text end markers

• Create moving image carousel

See here for details. There's no need to convert the artwork to SVG format (clear out the background only).

• Make copy responsive

The text layout shall follow this example.

• Deploy Quarto sub-domain

• Add 'Read book' button

Blog

• Add articles

• Add intro

Highlight the fact that the topics covered in the blog (or journal) are wide-ranging, reflecting my various interests.

• Add 'View all' button

Link to blog from 'Featured articles' section, with the hover animation.

• Add featured articles to index page

• Add cards

The text within each card shall be taken from the corresponding article and truncated accordingly. Hovering over the card shall animate the post title with an underline. Is underline on hover animation better here than Tushi's or here?

• Add pagination

Back and forward arrows at the bottom should suffice (turning grey if no pages are left), but this is only a concern if the blog has many posts. Once clicked, the viewport must show the top of the page.

• Add tags

Might consider showing them within the blog card as well, but likely excluded on small screens. Show tags on the top page where users can click on them to filter out the posts below.

• Add context menu

Show which section is currently displayed by increasing the font weight of its heading. Hide the menu on small screens. See example.

• Add back button

Animate the button with a move to the left on hover.

• Support link sharing

Contact

• Add contact form

Resize fields based on the viewport.

• Add privacy policy

Follow the same layout as a blog article. Link it to the contact form via a hyperlink. See here for details. Use either TermsFeed or Free Privacy Policy Generator.

• Integrate contact form submission API

KwesForms has a free tier (limited to 100 submissions a month).

• Add form submission notification

Planned features

Performance

• Implement Lighthouse recommendations

Use both the extension and https://pagespeed.web.dev/. SEO is the most important.

• Turbo integration to improve SPA loading time

In an SPA, the server responds to user requests by sending JSON (not HTML), and the client is responsible for doing a partial page update, updating the page as needed with the received payload. This can be achieved by a JS client like React (or Turbo?)

See here and here to learn more.

• Add SVG plot support

Observable Plot is a library from the Observable framework (see docs) which statically serves plots as SVGs from a JSON data input. See here for example code, though re-implement it in MDX like in this example.

SEO

• Improve SEO ranking

Refer to the Google's starter guide.

The most important meta tag for ranking is the title tag, not keyword tags. Read here to learn more about how to create clickable titles. Adding an image (and a meta tag image) to every blog post gains more attention when sharing links on social media.

Ensure a diverse and relevant link profile to maintain and improve rankings, and invest in brand recognition and authority within your niche.

UX

• Set a circular mouse pointer

An implementation following this example necessitates a change to how buttons are animated, at the very least. See also this tutorial.

• Change heading style

Font headings are ideal for a dev-oriented portfolio, in which open-source projects are given more attention.

• Change blog card

See here for inspiration.

• Add background music

Using instrumental music would be worth testing. See here for another example.

• Add multi-language support

Limit this feature only for the index page.

New sections

• Add case studies/publications section

Make sure to highlight problems and ways to solve them, preferibly by linking to a case study in the blog. Limit the text to a single page to improve readability. Consider whether you should drop the 'Featured posts' section.

• Add featured projects section

See here for the inclusion of a skills carousel.

• Add product launch section

Web analytics

• Configure Plausible integration

CMS

• Configure TinaCMS integration

Refer to the docs to set up contextual editing with TinaCMS instead of, or complimentary to, using Joplin with mark-magic or joplin-garden-worker.

Blog

• Add Webmentions support

Refer to this tutorial. See (example). Consider also Giscus.

• Add search functionality

Limited to the blog page, in place of the tag filter list. Search functionality can be easily implemented using Algolia (see tutorial).

• Make article title stick to the top

Have the blog title contract to one side and stay fixed, like in this example.