Brief
Create and grow a website that will be the centerpiece for my personal branding efforts. Design a user experience that is useful and enjoyable, adequately serving my target audience and reflects on the highly visual nature of my work.
Role
- UX/UI
- Visual Design
- Branding
- Web Development
- Writing
My portfolio website is not only the centerpiece of my personal branding efforts. It also has always been the perfect testing ground to experiment with new design ideas and new development technologies and workflows.
This case study is about a journey, my journey as a creative web developer. It documents the evolution of this website and the design and technical decisions I have made at each stage.
Early years
A long run with Wordpress
For several years, this website was developed using WordPress. The popular CMS was then my go-to solution for personal and commercial projects. My portfolio helped me develop a significant expertise with WordPress and its underlying technologies such as LAMP/LEMP and mySQL.
Wordpress the pro way
Free, open-source, easy to set up and extend through a rich plugin ecosystem, WordPress was a great and accessible solution to get running. However, from day one, my focus was to go beyond the basics and develop systems to ensure security, maintainability, easy and reliable deployments. Over the years, my workflow had matured into a solution that included:
- A custom developed theme, tailored to my specific vision and needs.
- State-of-the-art WordPress configuration and structuring with Bedrock.
- PHP dependency management with Composer.
- Build automation with Gulp.
- Automated server provisioning & deployment to staging and production with Trellis and Ansible.
Back to the future
Embracing the JAMStack
Highlights:
- Saying Goodbye to WordPress.
- Embracing the JAMStack approach and its beniefits.
- Selecting the Hugo static website generator.
- Content described in markdown.
Highlights
Investing into React
This year's major rewrite is to be understood looking at the bigger picture. Considering current trends in web development and how I can best spend my limited resources to stay relevant and sharp as a creative web developer, I have decided to make an investment and fully embrace the React ecosystem.
Technology
Gatsby
Among emerging React frameworks, I have chosen the Gatsby framework. Highlights:
- Content sourced from externally hosted and versioned markdown and queried through GraphQL.
- Taking advantage of static PWA performance out-of-the box, automatic code and data splitting, prefetching, optimized SEO and a rich plugin ecosystem.
- Deployed to Netlify
Highlights
More awesomeness
Year 2020 is another one of big technical changes. In retrospect, thanks to Next.js I consider it an important milestone toward perfection.
Highlights:
- Website fully redeveloped with Next.js and deployed to Vercel's platform.
- All contents migrated to the Prismic headless CMS and queried through graphQL.
- Light design language evolution for clarity and simplicity.
Best React framework ever
Adopting Next.js
The website has been fully redeveloped with Next.js and deployed to Vercel's platform.
Content management
Moving content to Prismic
This update features another major change. All my content has been migrated to the Prismic headless CMS and is queried from their API through graphQL. The change also brings out-of-the-box imgix image hosting and optimization.
Highlights
Key aspects of this release
For this release my main focus was to go back to the essence of what a designer and content creator's portfolio should be, its target audience and intended purpose. That process led to a series of decisions in terms of user experience design and personal branding.
On the technical side, I am more than ever invested into Next.js and have switched to the Sanity.io content platform.
Revamped User Experience
Reassessing my goals with this portfolio website has led to a number of UX design decisions aimed at delivering a useful, enjoyable and actionable experience for end users. That includes:
- Clear, carefully crafted introduction of who I am, what I do, my current status and availability.
- Limited and relevant set of featured projects / case studies.
- Secondary material (blog, side projects...) still accessible but moved away from prime locations.
- Simplified navigation.
- Personal brand refinements.
Unique, memorable, unique
Refined personal brand
To stand out and leave a lasting impression that speaks to who I am, I have revisited various aspects of my personal brand, trying to stay genuine, to be more focused, engaging and inviting, to tell a compelling and authentic story. I also have worked on being more consistent across platforms including this website and my social media accounts.
The perfect match
Next.js + Sanity.io
All content was moved from Prismic to the Sanity.io content platform for superior real-time editing capabilities, content modeling and customization right from my development sandbox, a modern and well documented query API, perfect integration with Next.js and great performance.
Design
I have worked on a design evolution that brings a sense of simplicity and clarity. Changes include a reduced color palette, generous negative spaces and a new geometric logomark that better asserts my brand.
