Sharcross Agyemang

Sharcross.com

A digital headquarters, not a portfolio.

Most personal websites follow the same formula. A short introduction, a selection of projects, an about page, and a contact form.

We wanted to do something different with Sharcross.com.

The idea was to build a digital headquarters that could grow with me. A place for my work, writing, ventures, experiments, music, interests, timeline and references, without making each part feel like a separate website.

The site needed to feel personal, but it also needed to behave like a proper system.

01. The Brief

The starting point was simple: build a personal website that did not feel like a portfolio.

A portfolio is usually designed around work that has already been completed. Sharcross.com needed to represent something that was still evolving.

The site needed to accommodate different types of content and make it easy to add more over time. That included companies, field notes, experiments, speaking events, a personal library, music and social links.

Rather than designing a page for each category, we treated the website more like a building.

The homepage is the entrance.

The different sections are rooms.

The Atelier is the interior system that connects them.

This gave the site a structure that could expand without losing its identity.

02. The Homepage

The homepage was intentionally kept quiet.

There is a full-bleed hero, a weathered background and three glass cards that act as the main entry points.

There is no long list of skills. No conventional project grid. No large “Hire Me” banner.

The homepage is there to establish the atmosphere and give visitors somewhere to go.

The interesting part of the website happens beyond the homepage.

Each entry point opens into its own editorial environment using the same Atelier shell. Writing, ventures, experiments, music and other content have their own spaces, but they still feel like parts of the same website.

The goal was consistency without making every page look identical.

03. The Visual System

The visual direction is built around two main ideas: Obsidian and Parchment.

The homepage uses a deep slate-blue storm environment, while the interior pages use warmer parchment and ink tones.

We deliberately avoided accent colours and decorative gradients.

The colour system is intentionally restrained so that photography, typography and the changing weather can provide the visual variation.

Satoshi is used throughout the site as the single typeface.

Instead of relying on several fonts to create hierarchy, the system uses size, weight, spacing and italic styles to create distinction.

That keeps the identity consistent across every part of the site.

04. Glassmorphism

Glass is used, but sparingly.

The frosted cards sit over imagery and atmospheric backgrounds, allowing the interface to remain readable without completely hiding what is happening behind it.

We did not want the site to become another example of glassmorphism being used simply because it looks good in a screenshot.

The glass has a practical role. It separates the interface from the environment while allowing the environment to remain visible.

05. The Weather System

The weather is one of the more experimental parts of the site.

The homepage responds to live weather conditions and changes the atmosphere accordingly.

We built a canvas-based particle system that handles rain, snow and storm conditions.

Rain is not simply rendered behind the interface. The particles detect the glass cards and interact with them, creating splashes and deflections when they make contact.

Snow changes the appearance of the cards and the surrounding environment.

Storm conditions introduce heavier rain and distant lightning.

The system is intentionally subtle. It is there to establish a mood rather than become the main attraction.

Weather can also be controlled from the admin side, which means it can be used as an editorial layer as the site changes throughout the year.

06. The Atelier

The Atelier is the shared shell used across the interior of the website.

It gives the different sections a common visual language while allowing each one to have its own purpose.

Field notes are designed for reading.

Experiments are presented more like a laboratory.

The library works as a collection of references.

The timeline documents important moments and developments.

Speaking events have their own structured presentation.

The result is a site that feels connected without forcing every type of content into the same template.

07. The Content System

The website is powered by structured content rather than hardcoded pages.

There are eight main CMS entities:

Company

Field Note

Lab Experiment

Timeline Entry

Speaking Event

Library Item

Social Link

Spotify Playlist

This means we can continue adding content without having to rebuild the site every time something changes.

A new company can be added to the system.

A new field note can be published.

A speaking event can be added to the timeline.

A new library item can be saved.

The website can therefore grow alongside the person it represents.

08. The Admin Experience

The admin area was designed as part of the website rather than treated as a separate backend.

It uses the same Atelier visual language as the public-facing pages.

This was an intentional decision.

If the public website is supposed to feel like a digital studio, the place where that studio is managed should feel like part of the same environment.

The result is an editing experience that feels much closer to using the website itself than working inside a generic CMS.

09. Small Systems That Make the Site Smarter

A number of small behaviours are automated throughout the site.

Social links identify their platform and display the appropriate icon automatically.

Field notes can detect their topic and calculate reading time.

The Spotify integration pulls the active monthly playlist into the listening section.

These are relatively small details, but they remove repetitive manual work and keep the different sections consistent.

10. Responsive Design

The site was designed mobile-first.

The larger editorial layouts collapse naturally as the screen becomes smaller, rather than simply shrinking everything down.

Columns become single layouts where necessary.

Cards adapt to smaller screens.

Typography scales appropriately.

The interface does not rely on horizontal scrolling or awkward compressed layouts.

The objective was to make the mobile version feel like a deliberate design rather than a reduced version of the desktop site.

11. Performance

The visual effects needed to be balanced carefully against performance.

Images are lazy-loaded and optimised.

Assets are kept as lightweight as possible.

The particle system is throttled and responds to changes in viewport size.

The weather engine only needs to create atmosphere. It should never make the website feel heavy.

This was particularly important because the site combines large imagery, animation, canvas effects and glass surfaces.

12. Accessibility

The visual effects are not essential to understanding the site.

The experience respects prefers-reduced-motion, allowing visitors who have requested reduced motion to experience a much calmer version of the interface.

This was important because the weather and animation should enhance the experience without becoming a barrier to using it.

13. SEO

SEO was considered as part of the structure of the website rather than something added after the design was finished.

The site uses structured data including Person, WebPage, BreadcrumbList and AboutPage markup.

The content architecture also gives search engines a clearer understanding of what the different sections represent.

The objective was not to fill the website with keywords.

It was to make the structure understandable to both people and machines.

14. Why It Was Built This Way

The biggest decision was treating the website as a place rather than a collection of pages.

A traditional portfolio answers one question:

“What have you made?”

Sharcross.com is designed to answer something broader.

That meant the website had to be capable of changing.

It needed somewhere for new ideas to go.

Somewhere for new ventures to appear.

Somewhere for experiments to be documented.

Somewhere for writing to accumulate.

The design therefore had to accommodate the future, not just present the past.

15. The Outcome

Sharcross.com became a digital headquarters rather than a conventional portfolio.

The homepage establishes the atmosphere.

The Atelier provides the visual structure.

The CMS makes the content easy to manage.

The weather gives the site a living quality.

The admin system allows the whole thing to evolve without rebuilding it.

Most importantly, the website feels like an environment rather than a brochure.

It is designed to change as we change.

Designed and engineered by Evuve.