In my not-so-long career as a programmer, I’ve always wanted to create a portfolio website. Something that not only shows that I can indeed code but also introduces me as a person—and that’s quite a challenge. Creating a site that brings you closer to the reader in a simple way, while still delivering a meaningful experience.
1. A Not-So-Authentic Introduction
The year was 2023. I was a 19-year-old young adult, relentlessly studying web development. Before 2023, I focused heavily on Python and C#. So when I first decided to build my own website, I didn’t have the tech stack I do today. And that’s where my first site was born. The first version, although not unique nor particularly creative, was built using just HTML and CSS. It was inspired by another site (I forgot which one).
And unsurprisingly, it was a static site. It had hover effects on icons, but no personality. This site bothered me a lot, and due to several personal issues, I couldn’t give it the attention it deserved. So I started imagining ways I could present myself with a modern touch that would stand out from the typical developer websites—while still being one.
Some time later, I participated in a hackathon hosted by Mulvi, a local company. During the event, I worked a lot on their website to understand their brand aesthetics and ended up liking the shapes and the idea behind them. So, how did that affect my “Design System”? Let’s just say it helped me figure out what I wanted to express.
Soon after, I got an internship where I learned PHP and embarked on wild coding adventures that didn’t add much to my career but definitely matured me and gave me clarity on what I want from life.
2. The One-Day Website
Jumping to 2024, after leaving that internship and a junior position, I decided to bring those original ideas to life. This time, I wanted to showcase my projects to stand out. My skill set had expanded—I’d learned React, Next.js, Tailwind, and SASS. And one fine late night, this version was born:
In this version, I achieved a few goals:
- Introduce myself
- Showcase my projects
But the site still wasn’t final. I was already writing on LinkedIn and planning a YouTube channel about programming. I also needed an API to add and update projects. Plus, I wanted to separate my personal projects from the libraries I had created.
The aesthetics didn’t appeal to me anymore. It felt like I was stuck in an old version of myself, and I wanted to fly.
3. The Almost Space Launch
A few months later, I envisioned an improved version. Something more beautiful and something to be proud of. I thought of gradients with strong blurs and even posted some of those ideas on LinkedIn. It was something I planned to keep, especially for the channel, which was starting to feel real—I was committed to creating content.
Truth is, I’ve always loved teaching. Talk to me about programming in person, and you’ll see how annoyingly passionate I can get. But it really hurts not having a base to start from—not having a space for people to access my content or even get introduced to it. The next video on my channel will be the starting point for everything I create moving forward. I want to build a timeless foundation that serves any developer, no matter their level.
Unfortunately, due to life obligations eating up all my free time, I lost the energy to keep this project going.
Back to today—while looking for some old references—I realized how awful Font Awesome is. I wasn’t even going to rant about relying on external dependencies, but here we are. A friend shared his pro key with me to use in my project. But now the key doesn’t work anymore, and Font Awesome has an overwhelming number of icon libraries. Now I have to almost refactor a 1-year-old project.
Eventually, I got it working. The icons are wrong, but the idea was to build a minimal prototype to showcase.
It was an interesting project. Even though it was simple in functionality, I learned a lot—like reusing an old-school web tool: the iframe.
An iframe allows your site to embed another site in a defined area. But it’s limited, as many modern sites don’t allow this anymore. Still, I got really attached to the idea.
A cosmic, unknown-themed aesthetic. One feature I really wanted to add to bring immersion into this concept was: stars. The theme was metallic gradients, and stars would add a colorful misty vibe to the whole look. Sadly, I couldn’t master a satisfying implementation.
4. Falling from the Sky and Observing Nature
After failing, I decided to study more about what interests me, like software engineering. I recently started learning AWS (I even posted a video on deploying to AWS if you’re interested). But honestly, my desire to build projects has reached a point where I can’t hold it in anymore. I need to create content urgently—but first, I need a personal brand.
That’s one of the key reasons I tried to create something memorable, something that truly says who I am. I’m not someone who chases trends. I want to build something completely mine—my brand. The internet has affected me in many ways—positively and negatively—so I needed to step away for a while.
I went back to my aesthetic roots. I wanted something simple, but I noticed that when a project goes monochrome, it becomes hard to design. The elements feel too limited, too dull.
So I thought of two things:
- I’ve been a dedicated MacBook user for over a year now—seriously, if you ever get the chance, develop on a MacBook!
- I needed a meaningful, memorable color scheme.
I’m deeply inspired by Apple’s visual direction—not in the sense of copying them, but for their boldness. Their focus on user experience. The experimental nature of their interfaces. Just look at Liquid Glass. I’m not sure how it will age—we’re still on Beta 3 (today is July 19, 2025)—but Liquid Glass isn’t exactly a successor to Fruitiger Aero.
Fruitiger Aero imagined a future where humanity and nature coexist, radiant, vibrant, and fluid. In that view, tech brings us closer to nature. Liquid Glass is more practical, less utopian—it imagines a tech-dominated world where tech reconnects us with ourselves. Because love is the only thing that truly unites us.
And that boldness from Apple—you don’t see it in other companies. Everyone else copies Apple and delivers something worse. Don’t tell me Windows looks good—even Gnome has surpassed it in every way.
Then comes color psychology. How do colors affect us? What brings logos and brands to life? Unfortunately, creative processes are hellish. It’s hard to pick colors for someone like me—a nerd and audiophile—so I decided to combine friendly colors.
I opened Figma and built an experimental version of what I wanted to share with the world:
It was simple, but I liked it. It worked. And that’s hard to pull off without a strong design background. I then started building the site.
5. Shallow Waters and Artificial Lake at Andromeda’s Neighbourhood
Unfortunately, the site turned out too simple. Instead of continuing with the cosmic sketches, I abandoned all innovations to build something new.
Although basic, this version helped me revisit old projects like the QR Code Generator. I used it to practice internationalization and apply this new aesthetic in a modest way.
I won’t say much about this project—it needed revisiting anyway. Now, it’s in a stable state.
A month later, frustrated with life and scrolling LinkedIn, I found a post about React Bits—a collection of styled React components using Motion or GSAP. I stumbled upon an interactive dot grid and decided to use it on my site. That’s when I realized I didn’t have to reinvent the wheel just for the sake of it. I can create new things with existing tools and still be authentic.
My friends, after a long journey, let’s finally talk about my most ambitious project: my personal website!
6. Meet My New Website!
After nearly 2 weeks of development, it’s finally done. It was a lot of work, especially since I was also writing this article. The idea here is to document my journey so I can look back and track my growth. I also discovered a new way of creating content—not necessarily through tutorials, but by sharing my experiences.
The site is a visual experience that varies depending on the platform. I got tons of feedback about UI design, which I plan to dive deeper into in another post. So what’s so special about this site I’ve been talking about?
Even though I’m happy with the final result, I know this interface—called Artificial Lake—will continue to evolve. I focused on building the core idea rather than a final product. For me, a personal site is a foundation for all future projects. So after this, I’ll work on the API (which I already started) and later integrate it with the site. It’s a simple process, so I’m not worried.
Until the API is ready, the site will be available at https://preview.alanreis.blog — this will be the permanent URL for in-progress versions of Artificial Lake.
7. The Numerous Challenges
Now that I’ve shown the site, I need to talk about the development challenges—especially building a site without an API or backend.
Let’s start with internationalization. Translating every element on the site is exhausting—especially maintaining consistency across languages. And when you add something new, you have to translate that too. But once done, it’s very rewarding. I’ll even write about how I handle it without libraries.
Another challenge was portability. The site was heavy—even on desktop—imagine on mobile! I created a carousel to navigate between screens with animations, but performance still worried me. Most Brazilian users are on mid or low-end phones. I had to create mobile-specific components, which drastically improved performance. I didn’t have time to make the site super responsive yet, but that’s coming in the next update.
Despite thinking through mobile UX, navigation still suffered. Desktop buttons weren’t very mobile-friendly. I’ll talk about this in a future post about responsiveness.
Lastly, I had to learn about SEO. After building social media apps for a year, SEO was new to me. I had to map my routes with sitemap.xml and robots.txt and use Next.js Metadata and OpenGraph tags for previewing on X and WhatsApp. Honestly, it was fun. I think I’ll reuse this base in future projects, maybe even turn it into a library.
8. Final Thoughts
I learned a lot building this site:
- How to use Motion (the successor to Framer Motion)
- Improved my internationalization system
- Learned more about Next.js
- Reflected on UI design
This project was highly experimental. I had no base—it all came from my mind. And that’s great because the site even has an Easter egg: on desktop, type ArtificialLake in the console and you’ll see a new global object. Here’s a quick tip: If you unlock it, access andromeda.
Speaking of ArtificialLake, each version will have a name—the current one is Andromeda’s Neighbourhood—and versions will be organized by semester. Probably this year I’ll launch two versions in the same semester due to the early stage of this interface, but over time, I’ll polish it until it needs a visual evolution.
I also designed two other pages for this site, but didn’t show them because they’re informative—I wanted something clean, as they’ll be the focus of the next update.
As this article comes to a close, thank you for joining me on this journey. See you in the next article, where I’ll talk about developing the API.
Lastly, here’s something I wrote during the development of this site and article, followed by the full name of the interface:
One thing I learned from this experiment is that website elements become truly necessary when they need to change form depending on the platform—while still keeping their original essence.
In the end, everything is about the platform. It doesn’t matter if your element works perfectly on desktop. If it can’t adapt to mobile, it’s not good—and maybe not even useful.
ARTIFICIAL LAKE AT ANDROMEDA’S NEIGHBOURHOOD → A.L.A.N.
Alan Reis, 2025
Top comments (0)