Portfolio v4

Finished translating two blog posts and wrote a new one talking about the website itself. Blog posts also support videos, and I finally wrote the README file for the GitHub repo. I think that’s enough for this project!

Here’s a massive devlog, with the main feature being multilingual! The website is completely readable in English and in French. The locale is automatically set depending on browser preferences, and blog posts can be written by me in those languages. Here are some other changes:

• A new type of audio feedback is played when hovering anything that can be clicked (buttons, links, switches, maps, …).

• Blog posts now display the last time they were edited (if they were).

• “Human/Machine” buttons are disabled when not on the homepage (can’t be switched on posts for example)
• Also did some SEO optimizations with canonical links and page-specific metadata for social networks.
• Added a robots.txt file to avoid exposing translations.json files through search engines.

Added a Table of Contents to blog posts! All sections headers (h1 and h2) are automatically detected and added to a JSON file when doing the initial compilation process. This file is then parsed again to generate the HTML of the ToC at render time.

Added GitHub Sponsors as a link for financial donations, wrote a new blog post, and implemented Audio + Haptics Feedback! Three songs can be played (on all devices) and three types of haptics can be played (on both Android (might need to test tbh) and iOS) depending on what is happening on the website.

This massive devlog is introducing an all new feature that I kept secret until now, inspired by this random website I saw on Twitter. It’s kind of an easter egg, except it’s not really hidden somewhere. Demonstration video is attached so you can directly understand the concept (tldr: a markdown view of the website, to get a vibe of what an LLM can see when browsing this page, except we are the LLM this time).

This devlog also cover some bugs fixes (anchor generation, “go back” navigation history) and character rendering (glitches with UTF or smth idk). I also changed the blog posts font to a serif one, but I’m not particularly fan of this one tbh, will change it later.

The last three blog posts can be displayed from the homepage, and a page to display all of them has been added to the website. Blog posts can also be hidden from this list and from search engines by adding a specific visibility property.

This devlog covers many commits, even through it doesn’t implement majors things for now, but it should officially mark the last devlog for the blog post parsing! It fixes tables, dynamic banners, inline images (in a paragraph), and italic text.
Also, the latest GitHub commit is dynamically displayed in the website footer; support for NodeJS is dropped in favor of Bun; and Markdown contents are built in HTML while building the Docker image if possible, or at runtime if it wasn’t available.

Almost finished the Markdown parser that is made to display blog articles from my Obsidian vault! It includes basic markdown features (titles, links, lists, images, inline code) and more specific one (callout), including custom features (embed a blog article, mention a user)…

Updated my web framework (https://github.com/johan-perso/roc-framework) to allow a web server to register routes while running, making the redirection system (with origins and destinations coming from my Obsidian vault) possible! Also fixed the entry animation of the “Open in AI” Dropdown, and reversed the use of a SVG icon for one of the projects banners (it wasn’t rendering correctly on Firefox).

Spent the last days (even weeks??) on classes💔 I should be back, hopefully, and this devlog is a major update for the developement of my portfolio!
For this project, I am including a blogging system, pulled directly from my Obsidian with two steps:

1. Retrieval, which make me push my Markdown files to the GitHub repo using my new project https://github.com/johan-perso/obsidian-gitpush
2. Parsing, which converts the Markdown in HTML, using all my style and special components

This is still WIP, but it’s been some time since I’ve published something here, so here I am.

The page layout for blog articles is almost done, the only missing piece is a functional backend to get them. In the meantime, this devlog fixes some visuals issues (responsive, animation, overflow, and some minors details), adds a Callout component, and another component to mention someone in an article!

Started to implement main content of blog article: title, image/banner, introduction text and primary buttons/CTAs

Started developing an article page for the future blog feature, currently a static page. A server-side rendered system will be implemented later to create the pages automatically when building the website.

Thanks to images and videos compression (check out one of my friend’s projects! I made the landing page: johanstick.fr/fwl ), the website loads much faster. Some images now use JPG or WEBP instead of PNG, one even uses SVG! This devlog also continues to improve accessibility readers trying to navigate on the website.

The “Copy as markdown” in the “Ask AI to resume” dropdown is now functional: the website fetches a llms.txt file when loading the page (previous devlog), and copies it to the clipboard when the button is pressed, allowing users to use others AIs tools such as native apps (instead of websites) or incompatible one such as Gemini. This devlog also improves the blur intensity of toasts and makes the “about me” left sidebar a component to prepare the next pages.

Some responsive elements were handled by JavaScript, and images can be slow to load, so I added a loading screen! This devlog also add an animation to the “open in ai” dropdown.

Just wrote a 142 lines llms.txt file, with a summary of who I am, my skills, my education, my social media links and contact informations, and a list of my ten favorite projects (with details such as my role, in which year, with what technologies, …).
This will allow any AI with internet access to obtain precise details of the website, which will enhance the “Ask AI to resume” button that I added.

MAJOR responsive update, the website was mainly built for desktop or large tablets (like an iPad Pro 11” or smth), and I was just skipping things every time I saw a responsive issue, reporting it for later, but later is now. The grid can be scaled to display 2/3/5/6 columns, and many texts (like “Ask AI for questions”) have multiple variations to give the best look possible on every form factors.

Two sections have been added to the portfolio: the first represents my past projects (to let them leave a trace or smth), and the second one displays the latest blog post (currently waiting to finish the blog system itself)

All “large” projects cards are now displayed, the next devlog will includes “small” card that doesn’t includes images, for projects with smaller impact

Even more animations 🤌
The main content layout now displays social icons links with a sliding + opacity animation, and a video can even be played when hovering cursor over the image, allowing the user to see more context over the project.

I started the main content layout, which will display all my currents and past projects, blogs articles, and maybe more in the future, using a Bento layout. I also addressed some flaws in the left sidebar that happened to overflow elements when the screen was becoming too small.

I’ve added an “highlight” feature that automatically scroll and emphasize some sections when the user is going to a specific page (johanstick.fr/contact -> johanstick.fr/#contact -> detected by JS from here)

Implemented a toast system with a beautiful blur and some animations, while being responsive for mobile and desktop. This also includes new sections for contact links, and one for donate links (via PayPal, Ko-fi or cryptos).

Added a news banner component, that allow me to add some announcements to the website (if I’m launching a new project for example). The “header” can tell if it’s brand new (“NOUVEAU” on the screenshot) or not by checking the date and comparing it with now, from the server side.

Added a map of where I live 🥖🥐, and tried to better optically align elements on the Y-axis

“Open in AI” dropdown is almost 100% working, you can directly ask ChatGPT/Claude/Grok to review the website for you, the only missing feature is the “Copy Markdown Prompt” that will be added later when most of the content will be available. Among the other AIs that aren’t available, Perplexity was not able to read links, Gemini didn’t supported opening a new thread with pre-filled input, and T3 Chat and Scira AI were too niche for this project.

The segmented control is now interactive and includes a sliding animation, a dropdown menu has also been added on the same row (not currently interactive). I also needed to make an update to the web framework I’m using (and developing) because it was having trouble parsing some JS attributes in the components system.

Started to add the essentials which include my name (of course), “skills” (more to be added soon, I guess? Just Developer and Student for now), socials links (Twitter, GitHub, Telegram for contact), and a two-way button “Human/Machine” (an idea for later, follow the project to see what it will be👀)

Just initialized a new project using my own framework (roc) and TailwindCSS, configured some colors in the Tailwind configuration, downloaded fonts and set up essentials files. I’ve spent about 10h designing a (not so) quick prototype of how it would look, I guess it’s time to start coding!