I've always wanted to have a personal portfolio website. A little corner of the internet where I could showcase my work, share my hobbies, and just say I have a personal website. But for the longest time, I wasn't sure what would go on it. I dabbled in various hobbies and projects but needed more time to be ready to combine them into a cohesive presentation. But now here we are!

Open-Source Software and Photography

As you probably already know, I am a software engineer, developer, r&d engineer, or whatever you like to call it → I write code. One of the most beautiful things about being a developer is the open-source software and its community, especially in the crypto/web3 space. Supporting each other (primarily) and building in the open is a different kind of passion. I started contributing to open-source software when we began building Masca at Blockchain Lab:UM. With Masca being a fantastic project, the idea of having a website to showcase projects I'm working on came up.

Additionally, I picked up photography as an amateur a couple of years ago. I have always wanted to shoot beautiful portraits of my girlfriend, family, and friends, and bokeh is one of the core effects I consider to make up a great portrait photo. The reason for my picking up photography was the poor performance of the bokeh effect on the iPhone's portrait mode - you can see the blur being digitally applied instead of it being there because of the actual lens settings. With more and more photos piling up, I wanted to show some of them to more people, and this is how the idea of having a Gallery on my personal website came up.

The more photos I took and the more open-source projects I contributed to, the more I wanted a place to display them. Building a website now made more and more sense because I had something to put on there.

The Tech Stack

We mostly used Next.js with React and Supabase for frontend projects I worked on, so deciding which tech stack to use was a no-brainer for me. I used NextUI with TailwindCSS for styling because of their simplicity and whatnot. Oh, and I made the logo myself, I hope you dig it! For hosting, I use Vercel because of their amazing free tier.

Optimizing photos' loading times was the most excellent "feature" I implemented. Next.js heavily pushes server-side rendering, so I wanted to get and cache as much data as I could on the server. I get the URLs of the first 10 photos on the server side and then serve them to the client, which then fetches the following 10 pictures by using infinite scroll with TanStack Query (kudos to the developer for abstracting those principles and everything else it supports to such an extent - I recommend you check it out). Check out below how I build the useInfiniteQuery to handle this.

const useImages = (initialData: { src: string; placeholder: string }[]) => {
  return useInfiniteQuery({
    queryKey: ['images'],
    queryFn: async ({ pageParam }) => {
      const response = await fetch('/api/images', {
        headers: {
          'Content-Type': 'application/json',
        },
        method: 'POST',
        body: JSON.stringify({
          limit: 5,
          offset: pageParam,
        }),
        next: { revalidate: 60 * 60 * 24 * 7 }, // cache for 7 days
      });
      if (response.status !== 200) {
        return [];
      }
      return (await response.json()).urls;
    },
    staleTime: Number.POSITIVE_INFINITY,
    initialPageParam: 0,
    getNextPageParam: (lastPage, pages) => {
      if (lastPage.length === 0) {
        return null;
      }
      return pages.flat().length + 1;
    },
    initialData: {
      pages: [initialData],
      pageParams: [0],
    },
    placeholderData: keepPreviousData,
  });
};

And then, in the GalleryGrid component, I make sure to load new photos each time the user reaches the bottom of the page like shown in the code below.

export default function GalleryGrid({
  data,
}: { data: { src: string; placeholder: string }[] }) {
  const images = useImages(data);
  const observer = useRef<IntersectionObserver | null>(null);
  const sentinelRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (observer.current) observer.current.disconnect();

    observer.current = new IntersectionObserver(
      (entries) => {
        if (
          entries[0].isIntersecting &&
          !images.isFetching &&
          images.hasNextPage
        ) {
          images.fetchNextPage();
        }
      },
      { root: null, rootMargin: '0px', threshold: 1.0 }
    );

    if (sentinelRef.current) {
      observer.current.observe(sentinelRef.current);
    }

    return () => {
      if (observer.current) observer.current.disconnect();
    };
  }, [images]);

  return (
    <div className="flex flex-col justify-center">
      <Masonry
        items={images.data.pages.flat()}
        config={{
          columns: [1, 2, 3, 4],
          gap: [12, 12, 6, 3],
          media: [640, 768, 1024, 1280],
        }}
        render={(item, idx) => (
          <Image
            key={idx}
            src={item.src}
            alt={`Gallery image at: ${item}`}
            style={{
              width: '100%',
              height: 'auto',
            }}
            width={512}
            placeholder="blur"
            blurDataURL={item.placeholder}
            height={512}
            sizes="100vw"
            className="rounded-xl object-fit shadow-lg"
          />
        )}
      />
      <div ref={sentinelRef} />
      {images.isFetching && <Spinner size="md" className="my-12" />}
    </div>
  );
}

I first set the initialData to what I fetch already on the server side and then useInfiniteQuery to handle "pagination".

Challenges and Learnings

Even though I prefer working more on the backend, infrastructure, and DevOps, I had a blast creating my personal website. One challenge I faced was using the Plaiceholder package to fetch placeholder images for my photos. Still, it doesn't make sense to use it for so many pictures because it sends a request for every single one, and because of it, Vercel times out in production. Even though those placeholders are cached for the next week, the loading time is more significant and can exceed 10 seconds, leading to errors. To solve this, I just used a blank grey placeholder instead of generating unique ones using Plaiceholder.

"Almost" perfect Lighthouse score

I also scored an almost perfect score on Lighthouse. The only issue is accessibility because the Hamburger nav button does not have aria labels set. Besides that, everything is perfect! You can view the report here.

Conclusion

So, there you have it! That's the story of how I decided to create my personal website. It's been a fun journey, and I'm excited to continue improving it. The website is open source and available on GitHub. Check it out, and let me know what you think!

Inspiration

https://morten.dev/

https://portfolio.skippy-ai.com/

Written with ❤️, from me to you.

Twitter | Farcaster | Lens

This being my first entry, I feel a slight need to introduce myself. At the time of writing this, I am 24 years old, I was born in 1998, and since I come from Maribor, Slovenia, where we’re like ten years behind the western world, I still consider myself more of a 90s baby. Having been born at the start of the fast-evolving era of technology, I literally grew up going from needing to unplug the landline phone to surf the internet to have the world’s info in the palm of my hand, so understanding the technology was never a problem for me. I’m currently finishing my Master’s Degree study at the Faculty of Electrical Engineering and Computer Science at the University of Maribor, Slovenia. I’ve been in the Computer Science industry for about four years now. Still, my love and interest in technology and computer science have been keeping me company since I was ten years old - at first, having the need to play every video game released but having no money to afford it, so I had to become a pirate to get it for free, and later starting to wonder how video games are made, how the internet works, and how exactly can I write something in a simple input field and the person at the other end of the world receives my message instantly. It was all the whys and the hows until I was 14 when I first wrote a piece of code - it was a simple Python script, a console application that gave info about some PCs and hardware that was decent at the time. The information was not fetched from anywhere but was simply a hardcoded string that displayed when “navigating” to a specific section - but it was a beginning. I have also been obsessed with privacy since I remember, and I always had to have everything in control, which may be a vital factor explaining my interest in Web3 and data privacy.

Feel free to check out my Linktree for links to my professional and social profiles and my GitHub.

Ideology & Interests

Some of the people I meet in my everyday life don’t actually get why I spend time trying to contribute to Web3 and trying so hard to be an exemplary participant in it. Even some of my professors think Blockchain technology doesn’t solve any problem that hasn’t already been solved. While that might be true for the majority of “projects” out there, I believe there are still a lot of technical and social unsolved problems for which the blockchain may present a solution. Of course, I am not expecting every single thing and platform in the world to switch or use blockchain technology. It doesn’t even make sense in most cases. But, staying private, owning my data, being sure there’s no central authority that can shut me down whenever they want, and being independent and not relying on a few third parties providing me services online seems like a real treat. The thing I like about Web3 is that theoretically, no one can be censored, and no one can be excluded from participating. Give power to the people, make them somehow equal, and let’s see what happens.

A quote from a blockchain documentary I really like:

“Hold on. Satoshi turned money into code. Code is just letters and numbers, which is speech, right? So money now is speech, which is a pretty powerful idea if you think about it.”

- Torsten Hoffman, Cryptopia, 2020

Experience & Current Work

My first student job was setting up routers and TV receivers for a local ISP here in Maribor, Slovenia. Then, I started my work at Nicehash, where I first worked as an iOS Developer on Nicehash mobile app and then on a backend responsible for managing miners mining via Nicehash’s platform. After Nicehash, I worked at a company that I am not even going to mention as it doesn’t deserve any publicity and advertisement since the quality of their products and the company’s lead is trash. After that shitty company, I found out about Blockchain Lab:UM, where I currently work, and is actually my first job directly related to blockchain and Web3. I worked on a Moodle plugin for the EduCTX network. This is the product I am the proudest of in a weird, funny way because a great part of it is written in PHP, which I dislike, and my work on it has become a running gag with my colleagues.

And so we arrive at the Masca - an SSI Snap for MetaMask, our most actively developed project, and our baby. There is too much I have to tell about it, so please, if you’re interested, feel free to explore our Medium posts and check out Blockchain Lab:UM’s Linktree.

Conclusion

Joining the Mirror, my first entry briefly introduces myself, presents my ideology and interests, and gives an overview of my experience and projects I worked on and am working on. Please do not expect regular entries from me or to stick to a specific topic. This is more of a personal blog. I am willing to write when inspired and have time and something to write about.

You can still subscribe to me or collect this entry.

Written with ❤️, from me to you.