Portfolio website for Sophia, a viola and violin session musician based in Manchester, UK.
Home Page: https://www.sophiadignam.co.uk
Either need a Contact page with a form, or a download .vcf file
Make the collaborator names on the homepage more dynamic.
Some ideas on how to emphasise:
And/or:
However that would need to be a separate ticket with designs/research as to how to do best.
When a user is browsing an artist page, currently the only way to explore other collaborations is to return to the homepage. It's a bit difficult.
Improve this by allowing visitors to browse from one collaborator she has worked with, to another.
Some ideas:
AC
return meta data on the slug pages.
https://nextjs.org/docs/app/building-your-application/optimizing/metadata
Helpful guide: https://nextjs.org/learn/dashboard-app/adding-metadata#favicon-and-open-graph-image
I am noticing slow page loading times. Time to First Byte and FCP etc. (Proper testing is difficult as I am away from computer).
Currently the server builds files on every request (SSR), but I think the load times could be improved by statically generating the html and css on each build, and serving them directly on each request.
At least for components like nav, headers and footer that don't change much.
Bear in mind:
Raise PR and we'll do some A/B testing.
Add the following embed code to the footer. Somewhere that looks nice.
<!--Encore Button Generated 12th January 2024 at 5:55pm; Copyright Encore 2024--><a href='https://encoremusicians.com/hire/violists?utm_source=badge&utm_medium=web&utm_campaign=verified_badge&utm_content=dark-small' target="_parent"><img src='https://encoremusicians.com/img/embeds/badge-dark.svg' alt='Book Sophia Dignam on Encore Musicians' style='width: 80px; height: 80px;'/></a>
Encore Musicians is an online bookings agent, of which Sophia is registered with. This button will boost SEO rankings.
colors: {
primary: {
DEFAULT: "#0c8aca", // primary
// foreground: "#ECEDEE", // text on primary
},
secondary: {
DEFAULT: "#9572cd", // secondary
// foreground: "", // text on secondary
},
warning: {
DEFAULT: "#d7b75e", // warning
// foreground: "", text on warning
},
background: "#000000", // background
foreground: "#ECEDEE", // text on background
focus: "#2caff9", // focus
// default: "", // "base"
},
Regarding the list of posts on latest-work/{slug} (collaborator) pages.
Currently the page displays ALL posts, but this could get messy.
AC
Domain on Google with email also on Google
Make the posts, or artist page easily shareable!
The two photos on the homepage need to display the photographers' credits, e.g. "Photo by @janetjacksonphotographer"
Currently the images are in figure html elements, with the caption in a figcaption as per MDN.
Hero image:
DatoCMS queries are being cached somewhere and are not rendering updated content
In the top left corner of the website where it says 'SD_' when you click on it, it doesn't do anything, and changes colour to grey for a second when being clicked.
Using the External Video field in the CMS, they've done the work of gathering metadata from media links (YouTube, Facebook, Vimeo) via a service called oEmbed.
Details on this are at https://www.datocms.com/docs/content-modelling/external-video-field
This means the API brings back a video thumbnail, which is being used in the Post/Card component, rather than a direct embed.
Currently, I've only tested this with YouTube links, but it needs to be setup to work with Facebook and Vimeo.
AC
Links of Facebook videos will return thumbnails correctly sized
Links of Vimeo videos will return thumbnails correctly sized
Now that the CTA is to Contact
move the Recent Posts to the homepage (latest 3)
Add a redirect from /latest-work to homepage
As a user I expect to tap on the card thumbnail to open the link.
Currently I have to tap on "View this content on..." text to open the link. From watching people use the website, this is not their first instinct.
Make the entire card a link to open the content.
Considerations:
Add some subtle, classy animations to the website!
Ideas:
As a user I want to see the all of the main photograph when browsing on desktop.
Currently the main hero image gets cropped when resizing on some screen sizes or zoom settings.
AC
For improved shraeability, have a look at improved metadata and image optimisation outlined at https://nextjs.org/docs/app/api-reference/functions/image-response
As a user when browsing the homepage I want to know exactly what I am looking at.
Currently, the 'Collaborators' section ("Featured Artists and Events") displays two different things:
Break up this section into two distinct sections:
Each section should have a heading and subheading (can be hardcoded for now)
Considerations:
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.