Compare commits

..

9 Commits

Author SHA1 Message Date
Ray Elliott 0be3976859 commit images
commit images that might not have been committed when they should have
been a number of commits ago
2020-02-18 17:26:20 +00:00
Ray Elliott 7eb0a4c38a tidy up code/formatting 2020-02-18 17:25:18 +00:00
Ray Elliott cdaa876a45 add description to front matter 2020-02-18 17:22:37 +00:00
Ray Elliott 3659d02b72 adjust formatting 2020-02-18 17:19:00 +00:00
Ray Elliott 8e8a1385c7 add Portfolio series 2020-02-18 17:17:53 +00:00
Ray Elliott 42f6138ed5 add alt text for all images 2020-02-18 17:03:28 +00:00
Ray Elliott 33cd8de86b commit stantham screenshot
should have been commited in commit db8063, but someone might have
forgot.
2020-02-18 16:53:30 +00:00
Ray Elliott 37f377badb add woocommerce logo 2020-02-18 16:45:43 +00:00
Ray Elliott 29f6fd7aaa center images within .content 2020-02-18 14:09:10 +00:00
10 changed files with 101 additions and 78 deletions

View File

@ -7,23 +7,26 @@ theme = "hugo-coder"
publishDir = "blog" publishDir = "blog"
[taxonomies]
category = "categories"
series = "series"
tag = "tags"
# hugo-coder config # hugo-coder config
[params] [params]
author = "Ray Elliott" author = "Ray Elliott"
info = "Hello World!" info = "Hello World!"
avatarurl = "/images/profile--bg-darker.jpg" avatarurl = "/images/profile--bg-darker.jpg"
favicon_32 = "/images/favicon-32x32.png" favicon_32 = "/images/favicon-32x32.png"
favicon_16 = "/images/favicon-16x16.png" favicon_16 = "/images/favicon-16x16.png"
hidecredits = true hidecredits = true
colorscheme = "auto" colorscheme = "auto"
custom_css = ["/css/custom.css"] custom_css = ["/css/custom.css"]
[[params.social]] [[params.social]]
name = "LinkedIn" name = "LinkedIn"
@ -38,22 +41,22 @@ url = "https://git.rayelliott.dev"
[[menu.main]] [[menu.main]]
name = "About" name = "About"
weight = 3 weight = 3
url = "about/" url = "about/"
[[menu.main]] [[menu.main]]
name = "Portfolio" name = "Portfolio"
weight = 5 weight = 5
url = "categories/portfolio/" url = "categories/portfolio/"
[[menu.main]] [[menu.main]]
name = "Posts" name = "Posts"
weight = 10 weight = 10
url ="posts/" url ="posts/"
[[menu.main]] [[menu.main]]
name = "Categories" name = "Categories"
weight = 20 weight = 20
url = "categories/" url = "categories/"
[[menu.main]] [[menu.main]]
name = "Tags" name = "Tags"
weight = 30 weight = 30
url = "tags/" url = "tags/"

View File

@ -1,9 +1,11 @@
--- ---
title: "Flow Model Management" title: "Flow Model Management"
date: 2020-02-08T12:27:18Z date: 2020-02-08T12:27:18Z
description: "Developing a portfolio website using Nuxt.js."
categories: ["Portfolio"] categories: ["Portfolio"]
tags: ["Vue", "Nuxt"] tags: ["Vue", "Nuxt"]
featured_image: "/images/flowmm/flowmm-home.jpg" featured_image: "/images/flowmm/flowmm-home.jpg"
series: ["Portfolio"]
draft: false draft: false
--- ---
@ -86,7 +88,7 @@ With SPAs being an important component of the modern web I wanted this project t
## The Design ## The Design
![]( /images/flowmm/flowmm-model.jpg ) ![A black and white cropped shot of a stylish male model.]( /images/flowmm/flowmm-model.jpg )
The design brief from the non-existent owners of Flow Model Management was quite The design brief from the non-existent owners of Flow Model Management was quite
simple. A visually appealing, elegant site, with some background information and an easy simple. A visually appealing, elegant site, with some background information and an easy
@ -107,7 +109,7 @@ Lato, which goes well with Montserrat, is also modern and elegant, much like Mon
{{< {{<
figure figure
src="/images/flowmm/flowmm-model-1.jpg" src="/images/flowmm/flowmm-model-1.jpg"
alt="" alt="A black and white shot of a stylish male model."
class="icon-inline icon-right flowmm-model-thumb" class="icon-inline icon-right flowmm-model-thumb"
caption="As the site is for a modelling agency, I decided that making the models a prominent feature would be an ideal way to make the site visually appealing. By bringing the models to centre stage and focusing attention on stylish images of the models, this focuses the aesthetic of the site towards an elegant, stylish look." caption="As the site is for a modelling agency, I decided that making the models a prominent feature would be an ideal way to make the site visually appealing. By bringing the models to centre stage and focusing attention on stylish images of the models, this focuses the aesthetic of the site towards an elegant, stylish look."
>}} >}}
@ -141,4 +143,4 @@ Combining Docker with Dokku also allows for simple deployment, which can be done
&nbsp; &nbsp;
![]( /images/flowmm/flowmm-home-footer.jpg ) ![A screenshot of the website of Flow Model Management]( /images/flowmm/flowmm-home-footer.jpg )

View File

@ -1,60 +1,61 @@
+++ +++
draft = true draft = true
date = 2020-01-11T18:55:07Z date = 2019-12-29T18:55:07Z
title = "Giana Boutique" title = "Giana Boutique"
description = "" description = "Developing an ecommerce website using WordPress and WooCommerce."
slug = ""
tags = ["WordPress", "WooCommerce"] tags = ["WordPress", "WooCommerce"]
categories = ["Portfolio"] categories = ["Portfolio"]
featured_image = "/images/giana/large-1.jpg" featured_image = "/images/giana/large-1.jpg"
externalLink = "" externalLink = ""
series = [] series = ["Portfolio"]
+++ +++
Now, this site, is one of the earliest I ever worked upon. Now, this site, is one of the earliest I ever worked upon.
It was my first time using WooCommerce and second time using WordPress to build a site. It was my first time using WooCommerce and the second time using WordPress to build a site.
It is the site of Giana Boutique, an online ecommerce store. It is the site of [Giana Boutique](https://giana.rayelliott.dev/), a fictitious, online ecommerce store.
Done quite some time ago. This was done quite some time ago. Very early on in my career as a web developer.
Their [website](https://giana.rayelliott.dev/). Nothing special, for an ecommerce site, was required. I used the WordPress plugin **WooCommerce** along with a pre-existing theme with a few modifications.
Uses pre-existing theme. {{<
figure
src="/images/logos/woocommerce-logo.png"
alt="The WooCommerce logo."
class="logo woocommerce"
caption=""
>}}
Nothing special required. The main customisations were little bits of CSS to tidy some things up -- so a child theme was created.
Main customisations were little bits of CSS to tidy some things up -- created child theme based on a theme from [ModernThemes](https://modernthemes.net/) called Exchange. The parent theme is called **Exchange** and was obtained from [ModernThemes](https://modernthemes.net/).
Now, why did I use the Exchange theme?
Now, onto why I used the Exchange theme?
Well, it was pretty much entirely because it was free and I thought it looked okay. Well, it was pretty much entirely because it was free and I thought it looked okay.
It was free and I felt it was a reasonable looking theme that I could use to get started with setting up a WordPress site to use WooCommerce. It was free and I felt it was a reasonable looking theme that I could use to get started with setting up a WordPress site to use WooCommerce.
Would I use it again? Would I use it again?
Certainly not.
I felt it was difficult to customise, although this may have been at least partly due to my inexperience.
Doesn't really offer much over Storefront, the WooCommerce theme from Automattic???
Doesn't do much to set it above all the other similar looking WooCommerce sites around.
I feel it is perfectly fine for someone wishing to set up a WooCommerce with an acceptable theme quickly with little effort.
Not so good for developers.
I wouldn't.
The main reasons being:
Plugins used: * I felt it was difficult to customise, although this may have been at least partly due to my inexperience.
* It doesn't really offer anything over Storefront, the WooCommerce theme from Automattic -- the core developers of WooCommerce itself.
The advantage of using a theme from the actual WooCommerce developers, is that we know it will be written to the same high standard without any compatibility issues and should always be up to date with the latest version of WooCommerce.
It does look a little different, but nothing substantial. Certainly nothing that couldn't be achieved with some customisation of Storefront.
* Doesn't do much to set it above all the other similar looking WooCommerce sites around. It looks clean and fresh, but nothing particularly stands out.
* [Contact Form 7](https://wordpress.org/plugins/contact-form-7/). So, I feel it is perfectly fine for someone wishing to set up a WooCommerce with an acceptable theme quickly with little effort.
* [Cookie Notice](https://wordpress.org/plugins/cookie-notice/). But, not so good for developers, who will most likely want to customise and would be better off starting with an alternative such as Storefront.
* [Display Posts](https://wordpress.org/plugins/display-posts-shortcode/).
Would most likely write own plugin for this now.
* [Hustle](https://wordpress.org/plugins/wordpress-popup/).
* [iThemes Security](https://wordpress.org/plugins/better-wp-security/).
* [MC4WP:Mailchimp for WordPress](https://wordpress.org/plugins/mailchimp-for-wp/).
* [QuickView WooCommerce](https://wordpress.org/plugins/quick-view-woocommerce/).
* [UpdraftPlus - Backup/Restore](https://wordpress.org/plugins/updraftplus/).
* [WooCommerce](https://wordpress.org/plugins/woocommerce/).
* [WP Super Cache](https://wordpress.org/plugins/wp-super-cache/).
Would certainly reassess the best plugins available currently, if doing this site now. So, If I was to redo the site, I would almost certainly base it on the Storefront theme and include a lot more custom elements.
Would definitely use a better theme. I feel a problem with WooCommerce is a lot of the sites are similar, with little to differentiate them.
Main reason using this is that it was free. This gives the perfect opportunity to make a site stand out a little more, and make it more engaging, by adding more interesting features.
Would now almost certainly develop a child theme based on [Storefront](https://woocommerce.com/storefront/#).
Of course, it is important such features do not detract from the overall user experience.
We do not want flashy, distracting elements that will take attention away from the important elements.
This is why I feel classy and subtle is always the way to go for ecommerce sites.
![Screenshot of the Giana Boutique website]( /images/giana/large-5.jpg )

View File

@ -2,13 +2,11 @@
draft = false draft = false
date = 2020-02-01T18:54:46Z date = 2020-02-01T18:54:46Z
title = "Marc Leopold Photography" title = "Marc Leopold Photography"
description = "" description = "Developing a portfolio website using October CMS and Vue.js."
slug = ""
tags = ["October CMS", "Vue"] tags = ["October CMS", "Vue"]
categories = ["Portfolio"] categories = ["Portfolio"]
featured_image = "/images/leopold/large-1.jpg" featured_image = "/images/leopold/large-1.jpg"
externalLink = "" series = ["Portfolio"]
series = []
+++ +++
**Marc Leopold** is an apocryphal photographer and visual artist based in Chicago, USA. **Marc Leopold** is an apocryphal photographer and visual artist based in Chicago, USA.
@ -134,7 +132,7 @@ This is to draw the attention of visitors to the full colour photographs that ar
{{< {{<
figure figure
src="/images/leopold/medium-2.jpg" src="/images/leopold/medium-2.jpg"
alt="" alt="A screenshot of the website of Marc Leopold Photography as seen on a mobile device."
>}} >}}
## The Deployment ## The Deployment

View File

@ -2,13 +2,11 @@
draft = false draft = false
date = 2020-01-20T18:55:00Z date = 2020-01-20T18:55:00Z
title = "Charles Stantham Legal Services" title = "Charles Stantham Legal Services"
description = "" description = "Developing a website using WordPress, OceanWP and Elementor."
slug = ""
tags = ["WordPress", "Elementor"] tags = ["WordPress", "Elementor"]
categories = ["Portfolio"] categories = ["Portfolio"]
featured_image = "/images/stanthams/large-1.jpg" featured_image = "/images/stanthams/large-1.jpg"
externalLink = "" series = ["Portfolio"]
series = []
+++ +++
**Charles Stantham** are a firm of made up solicitors who decided they wanted me to make up a [website](https://stanthams.rayelliott.dev/) for their firm. **Charles Stantham** are a firm of made up solicitors who decided they wanted me to make up a [website](https://stanthams.rayelliott.dev/) for their firm.
@ -61,7 +59,7 @@ As there were some minor customisations required that were not possible through
{{< {{<
figure figure
src="/images/stanthams/large-5.jpg" src="/images/stanthams/large-5.jpg"
alt="" alt="A screenshot of the website of the Charles Stantham law firm."
class="medium" class="medium"
caption="" caption=""
>}} >}}
@ -130,7 +128,7 @@ All of which is achieved in the design choices of the theming and layout.
{{< {{<
figure figure
src="/images/stanthams/stanthams-team.jpg" src="/images/stanthams/stanthams-team.jpg"
alt="" alt="A cropped screenshot of the website of the Charles Stantham law firm."
class="medium" class="medium"
caption="" caption=""
>}} >}}

View File

@ -1,3 +1,9 @@
.content img {
display: block;
margin-left: auto;
margin-right: auto;
}
.navigation .navigation-title { .navigation .navigation-title {
text-transform: none; text-transform: none;
} }
@ -50,7 +56,6 @@ body.colorscheme-dark .avatar img {
} }
.content figure.icon-inline > img { .content figure.icon-inline > img {
display: block;
height: auto; height: auto;
width: auto; width: auto;
} }
@ -100,7 +105,6 @@ body.colorscheme-dark .avatar img {
} }
.content figure.icon-inline.flowmm-model-thumb > img { .content figure.icon-inline.flowmm-model-thumb > img {
display: block;
height: auto; height: auto;
width: 100%; width: 100%;
max-width: 250px; max-width: 250px;
@ -132,7 +136,6 @@ body.colorscheme-dark .avatar img {
} }
.content figure.logo > img { .content figure.logo > img {
display: block;
height: 100%; height: 100%;
} }
@ -197,3 +200,21 @@ body.colorscheme-dark .avatar img {
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: url(../images/logos/october-icon.png); background-image: url(../images/logos/october-icon.png);
} }
body.colorscheme-dark .logo.woocommerce > img {
background-color: #fafafa;
border: solid 16px #fafafa;
border-bottom-width: 10px;
border-radius: 6px;
box-sizing: content-box;
}
@media (prefers-color-scheme: dark) {
.logo.woocommerce > img {
background-color: #fafafa;
border: solid 16px #fafafa;
border-bottom-width: 10px;
border-radius: 6px;
box-sizing: content-box;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB