Responses by Daniel Spatzek, designer and developer.
Background: I’m not even sure if you can call this a portfolio site—the main purpose of a portfolio is to showcase work that ideally lands you more clients. But that was never my intention when creating dnlsptzkIV (the fourth iteration of my site.) Instead, I aimed for something different: a work of art.
E. H. Gombrich’s famous book The Story of Art begins with the words: “There is no such thing as art. There are only artists.” In my opinion, this implies that art is always personal, a manifestation of thoughts, feelings and ideologies through the creator’s skill.
So, I planned to create something truly mine, something unique that reflects my personality and is greater than the sum of its parts. Not your typical designer portfolio, which usually emerges from the process of taking inspiration from others and combining and changing stylistics until it no longer looks like a copy (which resembles the process of an AI, a topic I don’t want to go into here.)
Design core: The website as a whole had to be a personal statement. I used the medium “portfolio” as a vehicle for this statement, a metaconcept that runs through all sections.
This metaconcept stems from something that’s been bugging me for a long time: people are always looking for rules and guides, completely forgetting that while those rules are still useful, they’re not the only truth. Broken design laws don’t necessarily lead to bad results; if done skillfully, they can lead to a new, unique, more creative outcome.
So, I started writing down some well-known web design rules that designers seem to worship and stick to no matter what—only to break every single one by doing the exact opposite. On the screen, you can see the landing impression, which doesn’t care about rules like “Don’t overload the design,” “UX over UI,” “Keep it clean and simple,” or any other typical web design rule. To be clear, I’m not saying that these established design rules don’t make sense; I just wanted to see if one could pull off a design that did the exact opposite.
Challenges: The transition onto the monitor was the most challenging part, development-wise. It may look easy, but scaling and rotating a full-screen PNG with huge dimensions to 800 percent is never a good idea. I created this section from scratch three times and ended up doing the animation on canvas.
Special navigational features: Here’s a guide for accessing the hidden section.
- Hint 1: FAQ #12 indicates that you might have to enter something on your keyboard.
- Hint 2: Click on the portrait in the FAQ section to find hint #2.
- Hint 3: If you open your console and type something, you will get a console.log message.
- Hint 4: The numbers on the TV—4, 14, 12, 19, 16, 20, 26, 11—type them on your keyboard without spaces.
Technologies: For the framework, I used Nuxt. Animations were done in GSAP and ScrollTrigger. The site uses three.js for WebGL, Storyblok for the CMS and Netlify for the hosting.