How to Build This Portfolio Site

Thank you for visiting my portfolio site. I will document the background and process of creating this site here.

The Story Behind This Site

After deciding to pursue a Ph.D. and starting to create my own works again, I began to feel the desire to compile and publish a record of my achievements and creations. All I wanted from a portfolio site was “a place to post my achievements, research/works, and blog posts” and “the ability to create both Japanese and English pages.”

Initially, I tried building a portfolio with Google Sites, but I abandoned it because it couldn’t handle switching between Japanese and English. Since I had no knowledge of HTML or the like, I decided to simply run a Hugo template on GitLab Pages. I believe anyone can choose a template they like and build a site by reading resources like “Starting a Blog with Hugo + GitLab Pages.”

However, Hugo templates can be quite tricky. To get the appearance you want, you often have to choose a complex template, but if that template stops being updated, it can become incompatible with newer versions of Hugo, and you might not be able to build your site. As far as I can remember, I’ve used themes like FeelIt and Blowfish.

Blowfish was good because it is still actively maintained, but I figured it would stop being updated someday. Just as I was getting tired of being at the mercy of templates, I heard from a university club classmate at a gathering that “LLMs and websites are an incredibly good match.” With my history of trial and error, I immediately decided to try building a site from scratch with Gemini, using Hugo and GitLab Pages without a template.

As it turned out, I was able to build a site with all the features I wanted in about two days without any issues. The site I wanted wasn’t that complicated in the first place, so perhaps it was also beneficial that standard features were sufficient.

Portfolio Sites I Referenced

I referenced many people’s websites when creating this site. Thank you very much.

• Eriko Yamada’s Site
• Kentaro Seki’s Site
• Kaito Kobayashi’s Site
• Prof. Kei Matsushima’s Site
• Haruto Kamijo’s Site

The Minimum Necessary Information to Give Gemini

Here, I’ve organized my conversation history with Gemini and listed the minimum necessary information to create the site’s skeleton. Communicating the overall picture of the site to the AI at the beginning will help the development process go smoothly.

• What environment will you use?
  • Use Hugo (a static site generator) and GitLab Pages (a hosting service). Build from scratch without a template.
• What is the basic site information?
  • The site’s title, author name, and URL.
  • Whether it needs to be multilingual (in this case, Japanese and English). Which language should be the default.
• What is the page structure?
  • What pages are needed (e.g., About, Research, Blog).
  • The hierarchical structure (e.g., a top page with about, research, and docs underneath it).

        / (Homepage)
        ├── /about/ (About page)
        ├── /research/ (Research themes list page)
        │   └── /research/my-first-research/ (Individual research page)
        └── /docs/ (Blog post list page)
            └── /docs/my-first-post/ (Individual post page)
    

  • What elements you want to display on each page (e.g., a two-column layout with a profile picture and bio on the homepage).
• What are the desired basic design elements?
  • The overall color scheme (accent color, etc.).
  • The desired fonts.
  • What to display in the header and footer (social links, etc.).

Original Features and Settings Added to the Basic Site

Through conversation with the AI, I implemented the following features in addition to the basic skeleton. I will also document the process, which involved many errors and corrections.

• Page Structure and Multilingual Support
  • Template Organization: I created and assigned roles for baseof.html as the site skeleton, index.html for the homepage, list.html for section lists, and single.html for individual articles.
  • Multilingual Support: I configured English and Japanese in hugo.toml. Initially, the main URL was for Japanese, but I later switched it so that English became the main URL (savoia-mech.gitlab.io/about/) and Japanese was in a subdirectory (savoia-mech.gitlab.io/ja/about/). The date format was also changed for each language.
• Design and Layout
  • Sticky Header: I made the header stay fixed at the top of the screen during scrolling. The key was to use position: sticky in CSS and set a margin-top on the content to prevent it from being hidden. Also, to distinguish it from the <header> tag of the article title area, I applied the style using an ID (#site-header).
  • Fonts and Color Scheme: I initially tried “Yu Gothic” but settled on loading the web font “Noto Sans JP” from Google Fonts. I defined an accent color (#41A9D1) as a CSS variable to create a consistent look across the site.
  • Two-Column Profile: On the homepage, I implemented a layout with the image on the left and the bio on the right. I used display: flex in CSS and adjusted it with a @media query so that it stacks vertically on narrow screens.
  • Responsive Design (Hamburger Menu): On devices with narrow screens like smartphones, the navigation menu is collapsed into a three-line “hamburger” icon. Clicking it opens a full-screen menu. This required modifications to HTML, CSS, and JavaScript, and involved several debugging cycles, especially regarding CSS specificity issues (which rule was stronger between #site-header .main-nav and body.nav-open .main-nav).
• Enhanced Content Display
  • Table of Contents (TOC): I implemented a feature to automatically extract headings (##, ###) from articles and display them as a sticky sidebar on the right. It can also be disabled on a per-page basis by writing showToc: false in the Markdown front matter. The title “目次 / Table of Contents” was made multilingual, but I eventually decided it was unnecessary and removed it.
  • Image Display Shortcodes: I created custom figure shortcodes to specify image width by percentage and gallery shortcodes to arrange multiple images horizontally. This made image placement within Markdown more flexible.
  • Social Media Icons: Below the bio, I placed icons for X, GitHub, etc. By embedding SVG code directly into the template and using fill: currentColor in the CSS to link it to the text color, the icons automatically adapt to dark mode.
• Interactive Features
  • Dark Mode Toggle: I implemented a toggle icon in the top right to switch between light and dark modes. JavaScript adds/removes the .dark-mode class from the <body> tag, and the user’s choice is saved in localStorage to be remembered on their next visit. Initially, it was linked to the OS setting, but I changed it to “always display in light mode first.”
• Deployment and SEO
  • Deployment to GitLab Pages: I wrote a .gitlab-ci.yml file to configure automatic building and deployment of the site whenever changes are pushed to the main branch.
  • Favicon: To support many devices, I created a complete set of favicons with RealFaviconGenerator and placed them in the static folder.
  • SEO Measures: To improve search engine visibility, I added meta description tags, a robots.txt file, and registered the site with Google Search Console and submitted the sitemap.