Making a portfolio for oneself is without doubt one of the most difficult duties for any artistic skilled. This story isn’t a lot about showcasing work as it’s about proving to myself that I can create an distinctive undertaking. And so started my two-year journey of making a portfolio.
The story started with one problematic thought: initially, I didn’t wish to current initiatives in a regular gallery format. I actually disliked the concept of gathering every part right into a single gallery the place consideration is scattered among the many components, and every undertaking will get misplaced. That was the most important drawback I confronted.
I began making an attempt issues out and experimenting. At first, there was nothing concrete or clear: I got here up with the concept of an inventory—as inconvenient to browse as attainable—in addition to a 3D gallery. However I rapidly deserted these concepts as a result of, first, they have been inconvenient, and second, creating a 3D gallery would have been too troublesome. Plus, initiatives are up to date periodically, which additional complicates the method.
I then started to develop the concept of an inventory, as a result of it appeared like essentially the most acceptable system. But it surely had an issue: it was troublesome to showcase standout initiatives individually. This subject was resolved later within the ideas, however in the intervening time, the record of works continued to evolve. Initially, I wished to current the undertaking as concisely and vividly as attainable, in order that even earlier than clicking by means of, an individual would perceive what the undertaking was and what it was about.
The concept didn’t come instantly, however by means of experimentation, a list-based system emerged that was later used within the last undertaking. It wasn’t good, nevertheless it already mirrored the strategy I used to be striving for. There have been many errors and challenges associated to consumer expertise and improvement, however I used to be already starting to know the system and the narrative I wished to create. This was step one in establishing and structuring the type I wished to attain.
The turning level got here after I was determining how one can current the undertaking. I noticed I didn’t need the basic format the place info and pictures are blended collectively. It’s inconvenient and doesn’t adapt properly to totally different initiatives. That’s when the seek for options started: I wanted to showcase the content material and supply details about the undertaking with out overwhelming the viewer with it. I drew inspiration from modal home windows and options that current content material in layers. The concept of a modal window for the undertaking got here to me whereas I used to be remodeling the format. I favored that each one the important info could possibly be positioned in a small space in order that it wouldn’t distract from exploring the undertaking however would complement it.
Then an aesthetic query arose: how one can make this component noticeable with out it standing out from the system, whereas sustaining the right hierarchy inside it. My colleague and good friend Artem Markovsky gave me some recommendation. He instructed differentiating not solely by means of styling or font alternative, but additionally by means of typographic measurement. This strategy was very useful. With these small adjustments, the system labored as meant. Then the method of creating the undertaking and idea concepts started.
The web site undertaking took two years. Throughout that point, six design ideas have been created, and the sixth one—the one you see now—grew to become the ultimate model. Through the course of, I confronted many difficulties and psychological obstacles as a result of I wished to make the undertaking very stunning and user-friendly, and to push myself past my present stage. Solely after accepting the scope and deadlines, and due to recommendation from mates, did I perceive precisely what I wished to attain and the way.
Tech Stack
My brother dealt with the event. We constructed the undertaking on Webflow, utilizing GSAP and customized JavaScript.
We paid particular consideration to microanimations and responsiveness throughout totally different screens to make sure essentially the most pleasing expertise on all platforms.
Interactions
Your entire design is predicated on layering—this precept is current all through. It permits customers to work together with the content material, discover it, and concurrently course of two streams of data, such because the visible and semantic elements. The design options 2D depth and layering.
Through the course of, SVG masks have been created for presenting the chosen works, in addition to for the subsequent undertaking. The panel that reveals info, the expandable contact button, the resume view, and so forth—all these components serve a single goal: to showcase layering with out hindering the exploration of content material. Let’s study these concepts in additional element.
Residence
The primary component individuals encounter upon coming into is the homepage. One display screen and a video. Easy, very mild, and intuitive, but controversial. I assumed lengthy and onerous about how one can design the homepage, and this was additionally an experiment.
I instantly rejected the concept of constructing the homepage a full-fledged web page as a result of I didn’t wish to overload it. It was essential to me that the consumer determine for themselves what they wished to see, fairly than instantly scrolling down to seek out the standard content material. Perhaps that’s fallacious, however that’s what I did.
Basically, the house display screen is a hub: it accommodates all the mandatory gadgets and two-click navigation. The carousel gives context and engagement, whereas the contact modal conveniently connects me and the consumer with a single click on. And if the consumer wants time to suppose, they’ll at all times choose an fascinating merchandise from the menu and discover it additional.
Venture Gallery
That is the primary, normal system. Initially, I wished to show initiatives as an inventory, however I used to be nervous that this format wouldn’t enable me to focus on prime initiatives. That’s how two radical options have been born.
The primary web page for all initiatives has a transparent, easy, and intuitive construction: a pop-up card, undertaking info, and pictures. You don’t must click on right into a undertaking to know what it’s about. This isn’t a basic gallery with a single picture: right here, there are a number of pictures that describe the undertaking from the very first seconds and assist you to determine whether or not it’s price clicking in and whether or not the undertaking is related. It’s handy as you may instantly discover the initiatives that curiosity you.
The chosen initiatives use a special mechanism—the wow impact—with shapes and SVG masks. That is carried out so as to add depth to the initiatives and present that they’re extra than simply design: the initiatives stand out both for his or her uniqueness or for the outcomes they’ve achieved. These are two totally different techniques that coexist in good concord and meet the wants of various audiences.
Venture Info
It’s offered as a dropdown menu and follows the identical algorithm in all places. Some fields are hidden if they aren’t current within the initiatives. That is handy: undertaking info is at all times at your fingertips and doesn’t intrude with searching.
On cellular, that is carried out with a button on the backside of the display screen for simple clicking. The knowledge totally expands, permitting you to learn it, then conveniently shut it and proceed exploring the content material.
On the finish of every undertaking, there’s a transient abstract and a transition to the subsequent undertaking, offered in a singular format with a hover tooltip. Hover tooltips all through the location characteristic a slight delay and easy animation, making you wish to see them time and again!
CV
A easy construction that makes loads of sense, and it’s very vital in as we speak’s world. I noticed that once you don’t replace your initiatives and resume for a very long time, it turns into very troublesome to make adjustments later. I added an updatable abstract of all my initiatives and expertise to the location, which will be downloaded with a single click on as a handy doc.
That is handy for me to replace the content material, and for shoppers or HR to rapidly and simply perceive who I’m and the way I will be useful. The shape is designed to be as concise and easy as attainable so that you don’t must scroll up and down or look from one fringe of the display screen to the opposite: every part you want is within the middle—easy, clear, and quick.
Weblog
The weblog is organized into sections: the content material is on the correct, and basic details about the article is on the left. The precise facet is organized in order that it’s straightforward to learn and navigate. For simplicity and fast navigation, a desk of contents button has been added to the article, serving to customers leap to the part they want or discover fascinating.
There was additionally the query of how one can show extra articles. I didn’t wish to use the basic methodology with an inventory of articles. So I positioned two kinds within the backside proper nook and added a hover tooltip that adjustments because the mouse strikes over the kinds. To make the adjustments extra noticeable, we added a tilt in numerous instructions.
About Me
The “About Me” web page accommodates a few fascinating components. One is a scroll video the place I fade out of the body, and a story about who I’m begins. This impact generated loads of constructive reactions as a result of, proper from the beginning, individuals are launched to the individual the story is about. Moreover, the web page makes use of a scroll-based kind that expands as you scroll, revealing a full-height picture showcasing the primary design rules. It’s a superb accent set off, after which the web page transitions to a black type. On the backside of the web page, there’s a hover button that seems once you hover over the textual content within the footer. It is a good instance of buyer interplay.
Structure and Construction: Organizing Code, Guaranteeing Efficiency, and Enabling Scalability
Basically, the whole undertaking is predicated on the construction and structure of the content material and the way customers work together with it. It isn’t full of wow-factor results on each scroll, nevertheless it doesn’t must be. The preliminary purpose was to create an intuitive, user-friendly, and quick system for exploring initiatives so that folks may grasp the details with out even clicking by means of.
To create a “wow” impact, we added an inventory of chosen works: it’s wanted to focus on the perfect initiatives and provides them particular consideration. However the primary focus was on all of the works. We additionally positioned a particular emphasis on adaptability and suppleness, in order that design components work equally properly on each small and huge screens. That’s why the buttons characteristic icons, and the weather are highlighted with excessive distinction and are straightforward to know. They don’t conflict with one another or mix into each other. Particular consideration was given to improvement and optimization to make sure the location works on gadgets of various efficiency stage.
Branding components are a narrative of their very own. Within the branding, I wished to create a symbiosis of my minimalist strategy and a daring, accent-driven type. Because of this strategy, we created caps, candles, a lighter, and far more—all that includes designs and types that convey the message I wished to convey. The emblem was additionally used on the web site in a simplified type to create a focus and steadiness the composition, whereas the branding features a full-scale model of the brand that works throughout numerous media.
On the core of the branding, I wished to mirror the multifaceted nature and rules that I incorporate into my work. That’s why the ultimate model of the branding contains two emblem codecs: a big and a small model, in addition to media and components which can be utterly totally different in temper and elegance: gadgets, stickers, keychains, merchandise, and so forth. I wished to deliver all the flexibility and elegance I integrated into the web site—together with using 4 fonts—into the actual world, making it clear, tangible, and bodily.
Reflections
On this part, it’s price addressing the relevance of a portfolio and a web site for a artistic individual usually. It’s really a really advanced and troublesome system that’s extremely onerous to construct. Going by means of this course of, you start to know your self otherwise. You study to guage your concepts and messages and work on how others understand them.
Would I prefer to redo something? Undoubtedly sure—the portfolio isn’t good and has many points concerning each design and UX patterns, nevertheless it’s my portfolio, and it’ll adapt to me over time. If I had the prospect to journey again in time and begin over, I might gladly undergo all of the challenges I’ve confronted over the previous two years once more. I might simply attempt to not restrict myself and design from the guts—to not create a bland web site or undertaking that merely generates leads, however to create a visible and a website that you simply’ll love and get an actual kick out of.
The toughest half is getting began and never criticizing your self for errors—that’s most likely what I might have carried out. I hope my undertaking and presentation helped convey every part I wished to share. For some, the undertaking will function a mirror and assist them discover options to their very own issues, whereas others might not prefer it.
I hope my undertaking and presentation might be helpful and assist encourage a couple of extra individuals. I like every part!
