Website redesign v2

In 2021, I started this website with Astro. It’s an all-in-one web framework that ships with the less JS, is UI agnostic, and has a great developer experience.

Since the first version, my goal has been to make this website search-friendly, like a small wiki for the things I’ve learned and the things I’m passionate about.

Release Notes

Homepage

I redesigned the homepage to be more modern and complete with the latest blog posts and projects. The layout maximizes the space for the content and the images.

Old Homepage

New Homepage

Blog

I’ve been thinking for a long time about how to separate the blog posts depending on the type. For example, I have some posts that are more like notes, meaning they are more like thoughts, ideas, and reflections. On the other hand, I have some posts that are more like tutorials, meaning they are more like step-by-step guides.

On this version, I’ve added the type field to the frontmatter of the blog posts. This reflects on the blog page where you can now filter the posts by type.

Old Blog

New Blog

In the blog layout, I added the Expressive Code plugin to enhance the code blocks with syntax highlighting (and a lot more).

Old Blog Layout

New Blog Layout

Theme

The default theme is the system theme. While coding for dark mode was straightforward, getting the light theme to look good and readable for longer content was challenging. However, I think I’ve found a good balance

Dark Theme	Light Theme

Projects

One of the pages with the most improvements is the projects page. On build, I’ve added a script to fetch the projects from my GitHub repositories and display them on the page.

1
const fetchUserRepos = (username) => {
2
  const url = `https://api.github.com/users/${username}/repos?per_page=500`;
3

4
  return new Promise((resolve, reject) => {
5
    https.get(url, { headers: { 'User-Agent': 'node.js' } }, (res) => {
6
      let data = '';
7

8
      res.on('data', (chunk) => {
9
        data += chunk;
10
      });
11

12
      res.on('end', () => {
13
        try {
14
          const repos = JSON.parse(data)
15
            .map(repo => {
16
              const repoData = {
17
                title: repo.name,
18
                description: repo.description || '',
19
                url: repo.html_url,
20
                demo: repo.homepage || '',
21
                post: '',
22
                lastModified: repo.updated_at,
23
                author: repo.owner.login
24
              };
25

26
              if (repo.topics && repo.topics.length > 0) {
27
                repoData.tags = repo.topics;
28
              }
29

30
              if (repo.license && repo.license.name) {
31
                repoData.license = repo.license.name;
32
              }
33

34
              return repoData;
35
            });
36
          resolve(repos);
37
        } catch (error) {
38
          console.error(`Error parsing repository data for ${username}:`, error);
39
          reject(error);
40
        }
41
      });
42
    }).on('error', (err) => {
43
      console.error(`Error fetching repository data for ${username}:`, err);
44
      reject(err);
45
    });
46
  });
47
};

I’ve also made the same scripts for HuggingFace collections, datasets and models. This allows me to keep the website static and mostly up to date while adding the latest projects automatically.

Old Projects	New Projects

About

The about page is now more than a simple presentation of myself. I’ve added publications and appearances. There is also an extensive list of social links where you can find me.

The best thing about this page is a little code trick: when visitors click on the city name, it checks their User-Agent and redirects them to either the Apple Maps app or website.

Old About	New About

Search

While browsing Astro Integrations, I stumbled upon astro-collection-search, and it was exactly what I was looking for. This tool allows you to search through the Astro Content Collections. The repository includes examples, and the integration is very easy to set up.

I’ve always loved the cmd+k shortcut to search through content on wikis like the Tailwind CSS documentation. This is the first time I’ve implemented it on my website, and I am very happy with the results.

There are many small UX improvements that make the search better. For example, the search input immediately gains focus, arrow keys can be used to navigate through the results, and the first result can be opened by pressing the enter key.

Search Initial State

The search textfield looks at blog post titles, content and sorts by relevance.

Search Results

The last improvement in the search bar is the share button that appears on the initial state before the user starts typing. This allows the user to share the current search results with a link. This clever little feature is thanks to share() method of the Navigator interface.

Here is the code for the search component:

1
// Share functionality
2
async function sharePage() {
3
  const shareData = {
4
    title: document.querySelector('meta[property="og:title"]')?.getAttribute('content') || document.title,
5
    url: window.location.href,
6
  };
7
  console.log(shareData);
8

9
  try {
10
    // First check if Web Share API is supported
11
    if (navigator.share) {
12
      await navigator.share(shareData);
13
      return;
14
    }
15

16
    // Fallback to clipboard API
17
    if (navigator.clipboard && navigator.clipboard.writeText) {
18
      await navigator.clipboard.writeText(window.location.href);
19
      showNotification('URL copied to clipboard!');
20
      return;
21
    }
22

23
    // Last resort fallback using execCommand
24
    const textArea = document.createElement('textarea');
25
    textArea.value = window.location.href;
26
    textArea.style.position = 'fixed';
27
    textArea.style.left = '-999999px';
28
    textArea.style.top = '-999999px';
29
    document.body.appendChild(textArea);
30
    textArea.focus();
31
    textArea.select();
32

33
    try {
34
      document.execCommand('copy');
35
      showNotification('URL copied to clipboard!');
36
    } catch (err) {
37
      console.error('Fallback clipboard copy failed:', err);
38
      showNotification('Failed to copy URL. Please copy it manually.');
39
    } finally {
40
      textArea.remove();
41
    }
42
  } catch (err) {
43
    console.error('Error sharing:', err);
44
    showNotification('Failed to share page');
45
  }
46
}

And this is how it looks like in Safari

Search

Conclusion

This is the first redesign of my website since 2021. I’m very happy with the results, the search is a great addition mainly for my own use to reference things quickly. If you want to see the code and try it out, you can find it on GitHub.