Personal website and blog built with Gatsby, deployed using Github Actions, hosted on Github Pages.
Home Page: https://kylejones.io
License: MIT License
I'm Kyle, a Welsh Vegan Software Engineer at Made Tech.
😄 Pronouns: He/Him
🎓 I graduated from the MComp Computer Games Development course at the University of South Wales in 2015.
🌱 I'm mentoring budding software engineers.
📚 I'm currently learning front-end technologies like Gatsby and React while studying for some new Certifications.
📫 How to reach me: [email protected]
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
As a visitor to the website,
I want to read excerpts on the blog listings page
So that I can better identify stories that interest me
As a developer,
I want end to end tests to run on the code
So that I can be confident that functionality will work correctly when deploying a release
As the owner of the website,
I want to integrate with the Spotify API
So that visitors to my website can see what music I'm listening to
const query = graphql` query Info {
site {
buildTime(formatString: "DD/MM/YYYY")
}
} `
As a developer,
I want all the working releases git tagged
So that we can easily identify successful deployments and roll back to previous versions
As a web developer,
I want a generic Articles component
So that I can extend it into two derived components - Featured Articles and Recent Articles
As the owner of the website,
I want a favicon
So that my website looks more professional
As the owner of the website,
I want a "Now" page,
So that I can document what I'm focusing on at the current point in my life.
As a website owner,
I want my website to have a sitemap
To improve it's SEO.
Move the Github API call required for the repositories component to be done in the Gatsby GraphQL layer
Example:
Warning: Each child in a list should have a unique "key" prop.
Check the render method of `StaticQueryDataRenderer`. See https://fb.me/react-warning-keys for more information.
in li (at blog.js:56)
in StaticQueryDataRenderer (at gatsby-browser-entry.js:38)
in StaticQuery (at blog.js:33)
in Blog (created by Context.Consumer)
in StyledComponent (created by blog___default)
in blog___default (created by HotExportedblog___default)
in AppContainer (created by HotExportedblog___default)
in HotExportedblog___default (created by PageRenderer)
in PageRenderer (at query-result-store.js:86)
in PageQueryStore (at root.js:51)
in RouteHandler (at root.js:73)
in div (created by FocusHandlerImpl)
in FocusHandlerImpl (created by Context.Consumer)
in FocusHandler (created by RouterImpl)
in RouterImpl (created by Context.Consumer)
in Location (created by Context.Consumer)
in Router (created by EnsureResources)
in ScrollContext (at root.js:64)
in RouteUpdates (at root.js:63)
in EnsureResources (at root.js:61)
in LocationHandler (at root.js:119)
in LocationProvider (created by Context.Consumer)
in Location (at root.js:118)
in Root (at root.js:127)
in StaticQueryStore (at root.js:133)
in _default (at app.js:67)
As the owner of the website,
I want the site to have effective search engine optimization (SEO)
So that the website gains more traffic and is easy to find
As the owner of the website,
I want the site to be as accessible as possible
So that all kinds of users can interact with my website as efficiently as possible
As a web developer,
I want the Tag component to be refactored into it's own file
So that it is easier to work with
Move the Dev.to API call required for the articles component to be done in the Gatsby GraphQL layer
As a blogger,
I want my articles to show the correct cover image and post title when it is shared
So that connections to the sharer will have a better idea of what the post is about
As a developer,
I want unit tests to run on my code
So that I can be more confident in deploying a release
As the website owner,
I want an ld-json to be included
So that the site's SEO is improved
As a blogger,
I want to write my blog posts in markdown and automatically transformed,
So that I don't have to manually write HTML.
As a website owner,
I want a robots.txt file for my website
So that my SEO is improved.
As the website designer,
I want the links on the Now page re-styled
So that they are more aesthetically pleasing
As a blogger,
I want readers to be able to follow me on various platforms
So that I can build up my personal brand
As a blogger,
I want the site to have an RSS feed
So that people can subscribe to my content
As the website developer and owner,
I want to allow visitors to my website to buy me coffee,
So that I can learn to build e-commerce functionality.
As the owner of the website,
I want the site to be as performant as possible
So that users are not deterred and traffic will increase
As the website owner,
I want to integrate with Stripe
So that visitors to my website can buy me coffee.
As the owner of the site,
I want a blog listing page
So that visitors can easily navigate my writing
As a visitor to the website,
I want a search bar
So that I can easily find content on the site that interests me
As a web developer,
I want an articles component
So that I can display links to articles that I write
As the owner of the website,
I want to integrate with the Goodreads API
So that visitors to my website know what I am currently reading.
Expected to be similar to this:
<script data-schema="Organization" type="application/ld+json">
{"name":"The Guardian","url":"http://www.theguardian.com/","logo":{"@type":"ImageObject","url":"https://uploads.guim.co.uk/2018/01/31/TheGuardian_AMP.png","width":190,"height":60},"sameAs":["https://www.facebook.com/theguardian","https://twitter.com/guardian","https://www.youtube.com/user/TheGuardian"],"@type":"Organization","@context":"http://schema.org"}
</script>
Actual:
<script type="application/ld+json"> <!-- -->
{
"@context": "https://schema.org",
"@type": "Author",
"birthDate": "1992-10-13",
"email": "[email protected]",
"gender": "Male",
"jobTitle": "Senior Software Engineer",
"knowsLanguage": "English",
"name": "Kyle Jones",
"telephone": "07432 829513",
"url": "https://kylejones.io"
"name": "Kyle Jones",
}
</script>
As the website owner,
I want a blog page
So that I can publish articles or thought pieces that I write
As the site owner,
I want the site to be translated into multiple languages
So that traffic can be increased further and the site is more accessible
In line with this document published by the IETF and the recent prominence of the Black Lives Matter movement, the branches "master" and "master-source" should be renamed.
Potential alternatives include "main" and "production"
As a web dev,
I want a CI pipeline
So that my code gets automatically built and deployed
As a blogger,
I want social sharing buttons on my posts,
So that visitors can easily share them and further drive traffic
As a web developer,
I want a blog post template,
So that markdown blog posts automatically get styled correctly.
As a developer,
I want my logic to be written in TypeScript
So that it is more readable and typesafe
As documented here, boundActionCreators have been deprecated and should be replaced with actions.
As the owner of the website,
I want to integrate with the Twitter API
So that visitors can see my recent tweets.
As a developer,
I want my markdown links to redirect correctly,
So that the user's navigation is clean and efficient.
As the site owner,
I want visitors to see what games I am playing
So that the Now page is more complete
As a visitor to the website,
I want to view information on the home page
So that I can learn more about the owner
As a blogger,
I want visitors to be able to filter blog posts by tag
So that they can find more articles they are interested in
As a blogger,
I want my blog posts to automatically get added to the website,
So that I do not have to manually upload them.
Add
export function onServiceWorkerUpdateReady() {
window.location.reload(true)
};
at the end of gatsby-browser.js
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.