update about.md scss

assets/css/_about.scss

@@ -8,11 +8,14 @@
     list-style: none;
   }
 
+  .column > p,
+  .column > ul,
   article > p,
   article > ul {
     font-size: 1.1em;
   }
 
+  .column > p,
   article > p {
     margin: 3rem;
   }
@@ -25,5 +28,35 @@
     font-size: 2.2rem;
     line-height: 2.6rem;
   }
+
+  h3 {
+    font-size: 1.1em;
+  }
+
+  // TODO - use grid for this (maybe keep this for fallback?)
+  .row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .column {
+    flex: 0 0 50%;
+
+    @media (min-width: 768px) {
+      flex: 0 0 33%;
+    }
+
+    h3 {
+      margin-left: 1.5em;
+      margin-right: 1.5em;
+      margin-top: 0;
+    }
+
+    li {
+      margin: 1rem 0;
+    }
+  }
 }
 

config.toml

@@ -7,6 +7,9 @@ theme = "hugo-coder"
 
 publishDir = "blog"
 
+[markup.goldmark.renderer]
+unsafe= true
+
 [taxonomies]
 category = "categories"
 series = "series"
@@ -28,16 +31,16 @@ hidecredits = true
 colorscheme = "auto"
 custom_scss = ["/css/main.scss"]
 
-[[params.social]]
-name = "LinkedIn"
-icon = "fab fa-linkedin fa-2x"
-weight = 10
-url = "https://www.linkedin.com/in/rayelliottdev"
 [[params.social]]
 name = "Gitea"
-icon = "fab fa-git-alt fa-2x"
+svg = "gitea.svg"
-weight = 20
+weight = 10
 url = "https://git.rayelliott.dev"
+[[params.social]]
+name = "LinkedIn"
+weight = 20
+svg = "linkedin.svg"
+url = "https://www.linkedin.com/in/rayelliottdev"
 
 
 [[menu.main]]

content/about.md

@@ -4,39 +4,72 @@ date: 2020-01-31T12:54:00Z
 draft: true
 ---
 
-I am an experienced, UK based front-end web developer and designer.
+I am a UK based, freelance, front-end **Web Developer**.
 
-I specialise in helping businesses build an online presence, guiding my clients through every step of the process in an efficient and straight forward manner.
+## What Do I Do?
 
-I am experienced in all aspects of web development:
+I work with small businesses to build and strengthen their online presence.
 
-* Web design and development.
+## What Can I Do For You
-* Fully bespoke custom websites, using the latest technologies.
-* Custom and bespoke WordPress theme development.
-* Custom WordPress plugin development (Gutenberg and classical).
-* WordPress eCommerce integration and development.
-* WooCommerce integration and plugin development.
-* WordPress Management.
-* Social media integration.
-* Core web technologies such as HTML, CSS, JavaScript, PHP, SVG, WebGL.
-* Modern and legacy web development frameworks and libraries
-  * React.js,
-  * Vue.js,
-  * Anime.js, GSAP,
-  * jQuery,
-  * Bootstrap,
-  * Tailwind.
-* Content Management Systems
-  * WordPress,
-  * Gatsby,
-  * Hugo,
-  * OctoberCMS.
 
-All of my work is:
+ ... what do i give the customer that sets me above others ...  
+ ... what problems of the customer do I solve ...
 
-* Fully optimised for on-site SEO.
+* I create **[Bespoke Websites](/tags/bespoke)** using the latest technologies.
-* Accessible and standards compliant.
+* I work with a number of **[Content Management Systems](/tags/cms)**, including **[WordPress](/tags/wordpress)**.
-* Mobile friendly and responsive.
+* I develop custom **Themes** and **Plugins**.
-* Built for performance and speed.
+* I advise and develop **[eCommerce Solutions](/tags/ecommerce)** for your online business.
-* Built with semantic, clean, maintainable code.
+* I customise **[WooCommerce](/tags/woocommerce)** to fit specific business needs.
+* I integrate **Social Media** accounts with websites.
+* I **Manage** websites, taking care of **Backups**, **Updates** and other essential tasks.
+* I turn old, tired websites into **[Fresh and Modern](/posts/leopold)** sites.
 
+## All Of My Work Is
+
+* Fully optimised for on-site **SEO**.
+* **Mobile Friendly** and responsive.
+* Built for **Performance** and **Speed**.
+* **Accessible** and standards compliant.
+* Built with **Semantic**, **Clean**, **Maintainable** code.
+
+## I Enjoy Working With
+
+{{% divwrap row %}}
+{{% divwrap "column" %}}
+  ### Core Web Technologies
+
+  * HTML
+  * CSS
+  * JavaScript
+  * PHP
+  * SVG
+  * WebGL
+{{% /divwrap %}}
+
+{{% divwrap "column" %}}
+  ### Content Management Systems
+
+  * [OctoberCMS](/tags/october-cms/)
+  * [WordPress](/tags/wordpress)
+  * Hugo
+  * Gatsby
+{{% /divwrap %}}
+
+{{% divwrap "column" %}}
+  ### Modern Frameworks and Libraries
+
+  * [Vue.js](/tags/vue)
+  * React.js
+  * Anime.js
+  * GSAP
+  * Tailwind
+  {{% /divwrap %}}
+
+{{% /divwrap %}}
+
+{{% divwrap "column" %}}
+### Legacy and Other Web Technologies
+
+* jQuery
+* Bootstrap
+{{% /divwrap %}}

content/posts/flowmm.md

@@ -3,7 +3,7 @@ title: "Flow Model Management"
 date: 2020-02-08T12:27:18Z
 description: "Developing a portfolio website using Nuxt.js."
 categories: ["Portfolio"]
-tags: ["Vue", "Nuxt", "CMS"]
+tags: ["Vue", "Nuxt", "CMS", "Bespoke"]
 featured_image: "/images/flowmm/flowmm-home.jpg"
 series: ["Portfolio"]
 draft: false

content/posts/giana.md

@@ -3,7 +3,7 @@ draft = false
 date = 2019-12-29T18:55:07Z
 title = "Giana Boutique"
 description = "Developing an ecommerce website using WordPress and WooCommerce."
-tags = ["WordPress", "WooCommerce", "CMS"]
+tags = ["WordPress", "WooCommerce", "CMS", "eCommerce"]
 categories = ["Portfolio"]
 featured_image = "/images/giana/large-1.jpg"
 externalLink = ""

content/posts/leopold.md

@@ -3,7 +3,7 @@ draft = false
 date = 2020-02-01T18:54:46Z
 title = "Marc Leopold Photography"
 description = "Developing a portfolio website using October CMS and Vue.js."
-tags = ["October CMS", "Vue", "CMS"]
+tags = ["October CMS", "Vue", "CMS", "Bespoke"]
 categories = ["Portfolio"]
 featured_image = "/images/leopold/large-1.jpg"
 series = ["Portfolio"]
@@ -12,7 +12,7 @@ series = ["Portfolio"]
 **Marc Leopold** is an apocryphal photographer and visual artist based in Chicago, USA.
 He recently decided his previous (and rather imaginary) website, whose purpose was to showcase his work, was beginning to look dated.
 
-He decided that it was time for a modern, up to date portfolio site.
+He decided that it was time for a modern, up to date [portfolio site](https://leopold.rayelliott.dev).
 
 Being a photographer's portfolio site, the requirements are fairly basic.
 Aside from the portfolio items, we just need some brief background information and an outline of the services provided along with a contact form.

layouts/partials/svg/gitea.svg

@@ -0,0 +1,18 @@
+<svg viewBox="0 30 135 90">
+<g transform="translate(0 -154)">
+<path d="m27.71 195.15c-9.5466-0.0272-22.339 6.798-21.632 23.904 1.1055 26.729 25.457 29.208 35.192 29.423 1.068 5.0136 12.522 22.306 21.002 23.217h37.153c22.278-1.6678 38.961-75.757 26.593-76.038-46.782 2.4769-49.995 2.1384-88.6 0-2.4951-0.0266-5.9723-0.49474-9.7079-0.5054zm2.4913 9.4589c1.3514 13.693 3.5558 21.704 8.0182 33.943-11.383-1.5047-21.07-5.2244-22.852-19.11-0.95096-7.4112 2.3904-15.168 14.833-14.834z" fill="#609926" stroke="#428f29"/>
+</g>
+<g fill="#fff">
+<rect transform="rotate(25.915)" x="87.509" y="18.292" width="34.762" height="34.762" ry="5.4826"/>
+<path d="m79.805 57.359 3.2411 1.61v-23.713h-3.2627z"/>
+</g>
+<g>
+<g>
+<circle transform="rotate(-19.796)" cx="49.065" cy="90.078" r="3.4745" fill="#609926"/>
+<circle transform="rotate(-19.796)" cx="36.81" cy="102.1" r="3.4745" fill="#609926"/>
+<circle transform="rotate(-19.796)" cx="46.484" cy="111.44" r="3.4745" fill="#609926"/>
+<rect transform="rotate(26.024)" x="97.333" y="18.062" width="2.6727" height="27.261" fill="#609926"/>
+<path d="m76.558 68.116c12.976 6.3954 13.013 4.1019 4.8909 20.907" fill="none" stroke="#609926" stroke-width="2.68"/>
+</g>
+</g>
+</svg>

layouts/partials/svg/linkedin.svg

@@ -0,0 +1,29 @@
+<!-- https://commons.wikimedia.org/wiki/File:LinkedIn_Logo.svg -->
+<svg viewbox="0 0 291 80" >
+  <g transform="translate(-200.55198,-393.96227)">
+    <g
+       transform="matrix(1.018827,0,0,-1.018827,170.5996,498.03288)"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" >
+        <path
+          d="m 239.3298,95.036 c 0,2.96 2.4604,5.361 5.4956,5.361 l 63.376,0 c 3.0351,0 5.4956,-2.401 5.4956,-5.361 l 0,-64.117 c 0,-2.961 -2.4605,-5.361 -5.4956,-5.361 l -63.376,0 c -3.0352,0 -5.4956,2.4 -5.4956,5.361 l 0,64.117 z"
+          style="fill:#006699;fill-opacity:1;fill-rule:nonzero;stroke:none" />
+        <g style="fill:currentColor;fill-opacity:1;fill-rule:evenodd;stroke:none">
+          <path d="m 31.1516,37.709 31.0356,0 0,10.189 -19.8042,0 0,38.874 -11.2314,0 0,-49.063 z" />
+          <path
+            d="m 77.9001,37.709 0,33.793 -11.2324,0 0,-33.793 11.2324,0 z m -5.6162,38.407 c 3.917,0 6.355,2.595 6.355,5.84 -0.073,3.315 -2.438,5.837 -6.2803,5.837 -3.8428,0 -6.355,-2.522 -6.355,-5.837 0,-3.245 2.4375,-5.84 6.207,-5.84 l 0.073,0 z" />
+          <path
+            d="m 83.1154,37.709 11.2325,0 0,18.872 c 0,1.01 0.073,2.019 0.3701,2.741 0.8115,2.017 2.6596,4.107 5.7627,4.107 4.0649,0 5.6909,-3.1 5.6909,-7.64 l 0,-18.08 11.2314,0 0,19.377 c 0,10.38 -5.542,15.21 -12.9321,15.21 -6.0591,0 -8.7197,-3.387 -10.1978,-5.694 l 0.075,0 0,4.9 -11.2325,0 c 0.1475,-3.171 0,-33.793 0,-33.793 z" />
+          <path
+            d="m 133.2487,86.772 -11.2329,0 0,-49.063 11.2329,0 0,10.956 2.8072,3.534 8.7939,-14.49 13.8179,0 -14.7783,20.977 12.9316,14.272 -13.5225,0 c 0,0 -9.2368,-12.769 -10.0498,-14.283 l 0,28.097 z" />
+          <path
+            d="m 188.7062,51.805 c 0.1475,0.868 0.3697,2.533 0.3697,4.415 0,8.736 -4.4346,17.604 -16.1094,17.604 -12.4888,0 -18.2524,-9.877 -18.2524,-18.835 0,-11.08 7.02,-18 19.2866,-18 4.8774,0 9.3843,0.72 13.0796,2.234 l -1.4785,7.418 c -3.0293,-1.005 -6.1329,-1.507 -9.9751,-1.507 -5.2466,0 -9.8277,2.153 -10.1978,6.743 l 23.2773,-0.07 z m -23.3505,7.599 c 0.2954,2.884 2.2168,7.138 7.02,7.138 5.0976,0 6.2807,-4.543 6.2807,-7.138 l -13.3007,0 z" />
+          <path
+            d="m 216.801,86.772 0,-16.984 -0.1475,0 c -1.626,2.377 -5.0259,3.963 -9.5322,3.963 -8.6465,0 -16.2573,-6.92 -16.1841,-18.741 0,-10.958 6.8726,-18.094 15.4443,-18.094 4.6553,0 9.0889,2.019 11.3057,5.912 l 0.2222,0 0.4433,-5.119 9.9766,0 c -0.148,2.379 -0.2969,6.488 -0.2969,10.524 l 0,38.539 -11.2314,0 z m 0,-33.421 c 0,-0.864 -0.074,-1.73 -0.2222,-2.45 -0.6641,-3.1 -3.3252,-5.262 -6.5757,-5.262 -4.6557,0 -7.6855,3.748 -7.6855,9.659 0,5.55 2.5869,10.019 7.7588,10.019 3.4726,0 5.9116,-2.378 6.5771,-5.333 0.1475,-0.65 0.1475,-1.371 0.1475,-2.019 l 0,-4.614 z" />
+          </g>
+      <path
+         d="m 261.8728,37.749 0,33.794 -11.2325,0 0,-33.794 11.2325,0 z m -5.6163,38.408 c 3.917,0 6.355,2.595 6.355,5.838 -0.073,3.316 -2.438,5.839 -6.2807,5.839 -3.8423,0 -6.3545,-2.523 -6.3545,-5.839 0,-3.243 2.4375,-5.838 6.207,-5.838 l 0.073,0 z" />
+      <path
+         d="m 268.0881,37.749 11.2324,0 0,18.872 c 0,1.01 0.073,2.019 0.3696,2.741 0.812,2.018 2.6602,4.108 5.7632,4.108 4.0645,0 5.6904,-3.099 5.6904,-7.642 l 0,-18.079 11.2315,0 0,19.377 c 0,10.38 -5.5415,15.21 -12.9316,15.21 -6.0596,0 -8.7198,-3.387 -10.1978,-5.694 l 0.075,0 0,4.901 -11.2324,0 c 0.1474,-3.171 0,-33.794 0,-33.794 z" />
+    </g>
+  </g>
+</svg>

layouts/shortcodes/divwrap.html

@@ -0,0 +1,3 @@
+<div class="{{ .Get 0 }}" >
+  {{ .Inner }}
+</div>