kelvinlockwood / kelvinlockw.xyz Goto Github PK

The following sections of paragraph text get switched to centred on smaller screens but it would be better if they stay left aligned...

https://www.zachleat.com/web/eleventy-image/

https://obsolete29.com/posts/configuring-responsive-images-eleventy/

Add 10 pixels of space between the top and bottom row of services...

Remove 20 pixels of space here so that the services section moves up the page a little...

Remove 10 pixels of space here...

Better if we can our dotted background implemented in pure css.

Here's an example...
https://codepen.io/edmundojr/pen/xOYJGw

https://github.com/cypress-io/netlify-plugin-cypress

https://glebbahmutov.com/blog/test-netlify/

https://github.com/11ty/eleventy-plugin-rss

Tutorial here > https://obsolete29.com/posts/rss-on-eleventy/

Each of these examples have integrated RSS...
https://github.com/equinusocio/xity-starter
https://github.com/yinkakun/eleventy-duo
https://github.com/5t3ph/11ty-netlify-jumpstart/
https://github.com/nhoizey/nicolas-hoizey.com
https://github.com/hirusi/smix-eleventy-starter
https://github.com/google/eleventy-high-performance-blog

Style RSS feed with xsl file as explained here...
https://github.com/genmon/aboutfeeds/blob/main/tools/pretty-feed-v3.xsl

Add some spacing for the second line of tags...

For small screen widths I think this will look better if we put the date and read time on the same line and centred. The tags will be next, displaying on one line in a similar way to the homepage (they can roll on to second line if necessary)

It will be better if the menu is centred or right aligned. I think right aligned could work because it will be close to the menu icon...

Use the same tag style we use for the Articles and Notes pages...

I'd like to change the standard text-white (#ffffff) throughout the site to a mywhite which is #fdecf0

A few issues here:

1. We'd like to "shorten" the url so that it only displays ben-evans.com
2. The Markdown for italics hasn't worked
3. Tags should be in lowercase only 'ecommerce'

Something wrong here with alignment...

Update: Paragraph text should be 700 pixels wide

The current line length we have in place is too narrow, I'm currently measuring it at 590 pixels (on my desktop browser).

The line length on Medium is 670 pixels and on Wired its 620 pixels.

We probably should be aiming for 670 but bear in mind that our page layout / style is closer to Wired than Medium.

https://www.wired.co.uk/article/bamboo-architecture

Make the line length a little longer so that all-rounder fits on the same line. This should keep everything on 4 lines.

Bannerbear was the inspiration for this section of our own page...

To achieve Bannerbear's "full bleed effect" I suggest we follow their CSS for that section. Gabriel is creating an image asset based on the same dimensions to occupy the space.

Add some spacing so the text doesn't cling to the left side of the page...

1. Remove pencil icon from Articles list page
2. Style date and read time the same as per the articles-list page
3. Remove the full stop from read time

This page of the XD prototype has a gradient which makes the "central page" blend into the call-to-action section...
https://xd.adobe.com/view/8a626811-2fea-419b-5abd-4177a925eb9e-fc53/screen/485e3ce5-6a2a-4f82-ba0d-718f2e01d18c/

I think this could work nicely at both the top and the bottom of our "central pages", so all our pages will go from dark green to the lighter green and then back to the darker green.

I've captured these screenshots from the smallest width of my chrome browser...

We currently have a sticky menu but as you scroll it leaves us with this dead space at the top of the page...

If we ensure that the nav menu items persist in the gutter space they won't clash with the content of the page, meaning we can display text right to the top of the page.

To achieve this the menu items need to be stacked vertically so that they comfortably fit within the right hand gutter, it will look something like this...

Replace the current icons on the homepage with these from https://heroicons.com/
https://github.com/tailwindlabs/heroicons

Remove and replace with the RSS icon...

Change the "paper airplane" to the mail icon...

We're only displaying 3 services but there should be 6 > https://xd.adobe.com/view/8a626811-2fea-419b-5abd-4177a925eb9e-fc53/

I mentioned in #22 this section can be 1040 wide

#37 explains the icons for this section

There are mistakes in the current text, replace with this...

Customer Development
Let me help you understand prospective customers and their needs that you may be able to satisfy. You cannot validate your assumptions on your own, I’ll take you through a challenging process where we talk with customers to discover if your assumptions are true.

Hyper-convenient Design Thinking
I like to remove things that create friction and distraction and this typically means a shorter route to a solution. Less is often more. Whilst I’m not a graphic designer I do think deeply about the lack of attention span people have when they’re confronted with new products or steps within those products.

Marketplace Research
Rarely is a marketplace as simple as supply and demand. And whilst the internet empowers us to remove middlemen there are always other stakeholders to consider. I can help you figure out the wider ecosystem that your product or marketplace operates in, and if, and how you could fuel adoption.

Product Architecture
The requirements are clear but there are many ways for the features and components of your product to fit into the overall system and business model. I take a user-centred approach to map the functions and features you require, to the form of your product.

Crowdfunding
There’s nowhere to hide if you launch a crowdfunding campaign unprepared. The eager and eagled-eyed investors will pick apart every word, picture and number in your materials. I’ve had previous success with equity crowdfunding and I can help you get your ducks in a row.

Pitch Deck Development
You have a blank canvas to communicate your ideas but you’re struggling to connect the creative side of your brain with the logical side. I can distill your vision and convert your messaging & content into a compelling and flowing narrative.

I want to apply this to my name in the top left hand corner. As we scroll down the page and reach the background gradient it should create an interesting transition effect on the text.

Mix blend mode has several different options so we’ll have to play around to find a good solution here. Screen and Lighten look the most likely candidates.

https://highrise.digital/blog/css-blend-modes/
https://dev.to/kaos/dynamic-text-effects-with-css-mix-blend-mode-242a
https://css-tricks.com/almanac/properties/m/mix-blend-mode/

The goal here is to automatically generate an OpenGraph image for each blog post (Article) we create...

https://github.com/shuhei/shuhei.github.com
https://shuheikagawa.com/blog/2019/10/13/generating-twitter-card-images/

https://www.juanfernandes.uk/blog/automated-open-graph-images-with-11ty-and-cloudinary/

https://github.com/nhoizey/nicolas-hoizey.com/blob/main/src/tools/social-images.njk
https://github.com/nhoizey/nicolas-hoizey.com/blob/main/src/_11ty/shortcodes/opengraph.js
https://github.com/nhoizey/nicolas-hoizey.com/blob/main/src/_includes/social-image-background.njk
https://github.com/nhoizey/nicolas-hoizey.com/blob/main/src/_includes/head.njk

We don't have an About page, About needs to be changed to Work.

We're currently linking to the Work page from the 'Book me now' button in the footer. (This button should actually link to https://www.buymeacoffee.com/kelvinlockwood/e/24822)

Each Work / Product item is currently 1020 pixels wide (on desktop). I might be better in the region of 900 pixels to fit in with the other content types and be consistent when displayed on this category page...
https://pedantic-sinoussi-3efb9c.netlify.app/tags/ux/