Time to Elevate: Portfolio V2024
For both obvious and not-so-obvious reasons, it was high time to give my design portfolio a facelift (you are next, photography portfolio)! Traditionally hidden behind a password wall, I'm thrilled to finally share the new page, the journey to get here, and the tools and stack that power this version.
Design: Figma
No surprises here. Figma remains the undisputed design tool of choice. Acquired by Adobe for a whopping "approximately $20 billion in cash and stock," it continues to be the go-to for designers (and others!). Whether the impact is positive or negative, Figma's high update cycles and its current open beta features make it a prime candidate for the new portfolio. And yes, I’m paying for it anyway, might as well use it, right?
I've crafted a collection of necessary local variables, organized into “Colors”, “Radius”, “Spacing”, “Screens”, and some “Strings” I employ for the Text Styles wall. Since the early days of Material Design, mapping out a strong minimum set of Color Tokens has proven useful. With Local variables, this is now a breeze. Learn more about it in my corresponding Blog Post.
Framework: Next.js
Just like the previous version, Next.js secured its place as my framework of choice. Despite delving into a Vue project for the first time this year, completing what I call the "trinity of js" (React, Vue, Angular) and considering Nuxt would have been a good choice as well, I returned to Next (I haven’t done a react project in more than a year). With its newly released app Router in version 13 (last year) and this year's version 14 featuring Server Actions and Partial Pre-rendering, it remains relevant and, quite frankly, a delight to use.
While a portfolio might not demand complex routing, custom APIs, or state management, Next.js's robust and easy-to-understand routing and folder concept, along with data fetching and caching, made building the work and blog sections a breeze.
Headless CMS: DatoCMS
Despite having the chance to work with Strapi on multiple projects, I gave DatoCMS, with its generous free tier, a shot. The react-datocms package seamlessly integrates with Next.js, offering a simple and effective interface for content creation, schema building, and a very helpful Content Delivery API Playground for quickly building, filtering, grouping, and sorting new queries.
Every asset uploaded to DatoCMS is stored on Imgix, a CDN optimized for image delivery, making it easy to manipulate and cache images on the fly. DatoCMS also comes with its own quick-to-use component for Responsive Images (as well as Next.js, of course). I'm still in the process of moving over the old articles, but their block schema strategy is very easy to code for.
This and That:
A small animation library called aos made its way into this version as well. A simple attribute, and things start to fade, slide, and flip.
A form provider for easy contact form integration called web3forms.com was used.
Tailwind, the CSS framework, finally made it in as well. Though it may sound strange, since 2017, I've only encountered it twice in non-personal projects. I guess it needs no introduction, and its usefulness is unquestionable.
Midjourney generates the blog images, while ChatGPT remains the ever-vigilant proofreader and translator of content.
So, that's it! The stack is complete. SEO is done, and apart from a few tweaks here and there, V2024 is alive and kicking! 🎉🥳