I always start with pen and paper
As always, my first step was to create a rough sketch using just my trusty notepad and a pen. This allowed me to experiment quickly without even looking at a display.
Ewa Buszewska ewa.cool
Stylish one-pager for a Polish-speaking SEO copywriter.
I've been asked to create a simple one-page portfolio for a SEO copywriter based in Warsaw.
The main challenge was, client didn’t want to use any external systems other than Google Docs, where she would normally write.
initial sketches
Technical challenges
For the front-end, I went with my favorite React Router, used as framework. It allows for server rendering and pre-rendering, giving the page great speed.
This is a smaller project, so architecture was simple and I did it without neither feature-driven nor atomic design methodologies.
The most interesting part was using Google Docs as a content management system. For this, I’ve created a separate application to consume the Google API and save the content. This also solved the issue of having to re-authenticate, as it happens in the background in a loop.
Stack
- React Router
- TypeScript
- Motion
- SCSS
- Google Docs
- NodeJS
- Github + Vercel
Smartphone version
After designing components, I’ve assembled them for viewports. For mobile it was rather straightforward, as I knew that content is the most important. For this, I’ve decided to go with the simple, yet popular and battle-tested one-column layout.
Colors
One of the first things I’ve done was to pick a color palette. I believe it can dictate the whole design.
The main keyword was “green” and “orange”. I wanted a cool yet comforting green palette broken by a vivid, yet not aggressive orange for accents.
- Background
- #F2F8F3
- Highlight
- #DCEBDE
- Body
- #4A5A50
- Headings
- #294A38
- Accent
- #E97D3C
Typography
I knew there will be a lot of content to read on the page. That’s why I’ve decided to go with a serif font from the start.
To contrast this, all the titles and headings are written using a bold sans-serif font.
Desktop version
Large version is a natural evolution of smaller screens. More horizontal screen space allowed me to put images in more interesting pattern, as well as make other sections better adjusted for landscape mode.
Contact
Book a 30-min Call
Book a free 30-minute call for a no-obligation quote and consultation.
Meeting takes place on Google Meet and is scheduled using Cal.com.
Write or call me
The quickest way to kick things off!
I'll get back to you within 24 hours, but usually much sooner (Mon-Fri).
Designed and developed in
Warsaw, Poland