Frontpage of the Xavier Wendling website seen on various screens

My portfolio website

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

Year

Since 2009

Type

Personal

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.

Year 2009

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.
Year 2017

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.
Year 2019

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
Year 2020

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.

Managing my content with the Prismic headless CMS.

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.

Year 2021

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.

Xavier Wendling website 2021 redesign. iPhone mockups.

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.
Xavier Wendling websitre. 2021 redesign. Personal brand.

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.

Managing my website content with Sanity.io

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.