From 95717ddda7c5d4d96a5ce12f694aa94dc6962b96 Mon Sep 17 00:00:00 2001 From: ray Date: Mon, 24 Feb 2020 19:45:08 +0000 Subject: [PATCH] convert about.md to html page updated layout ready for inserting a cover image. removed now unneeded divwrap shortcode. added baseurl shortcode. --- assets/css/_about.scss | 73 ++++++++++++++++++---- content/about.html | 106 ++++++++++++++++++++++++++++++++ content/about.md | 67 -------------------- layouts/shortcodes/baseurl.html | 1 + layouts/shortcodes/divwrap.html | 3 - 5 files changed, 167 insertions(+), 83 deletions(-) create mode 100644 content/about.html delete mode 100644 content/about.md create mode 100644 layouts/shortcodes/baseurl.html delete mode 100644 layouts/shortcodes/divwrap.html diff --git a/assets/css/_about.scss b/assets/css/_about.scss index 62d4a7e..a90928c 100644 --- a/assets/css/_about.scss +++ b/assets/css/_about.scss @@ -1,6 +1,63 @@ .page.about { + &.header-expanded .wrapper { + .navigation { + z-index: 10; + } + + &::before { + content: ""; + z-index: -1; + display: block; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + + background-color: #707070; + } + + header { + z-index: 5; + position: relative; + margin-top: 0; + margin-bottom: 9.6rem; + height: calc(100vh - 1.6em); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-size: 1.3em; + + @media (min-width: 768px) { + margin-bottom: 8.4rem; + } + } + + .more-hint { + position: absolute; + right: 50%; + bottom: 0; + transform: translateX(50%); + font-size: 1em; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .more-scroll { + font-size: 2em; + } + + .more-svg { + height: 3em; + width: 3em; + } + } .content { text-align: center; + font-size: 1.1em; } ul { @@ -8,25 +65,16 @@ list-style: none; } - .column > p, - .column > ul, - article > p, - article > ul { - font-size: 1.1em; - } - - .column > p, - article > p { + p { margin: 3rem; } - li { + li p { margin: 2rem 0; } h2 { - font-size: 2.2rem; - line-height: 2.6rem; + font-size: 1.4em; } h3 { @@ -59,4 +107,3 @@ } } } - diff --git a/content/about.html b/content/about.html new file mode 100644 index 0000000..ca43b24 --- /dev/null +++ b/content/about.html @@ -0,0 +1,106 @@ +--- +title: "About Me" +date: 2020-01-31T12:54:00Z +--- +
+

+ I am a UK based, freelance, front-end Web Developer. +

+

+ I work with small businesses to Build and Grow their online presence. +

+ +
+ + + +
+
+ + + +

All Of My Work Is

+ + + +

I Enjoy Working With

+ +
+
+

Core Web Technologies

+ +
    +

  • HTML

    • +

  • CSS

    • +

  • JavaScript

    • +

  • PHP

    • +

  • SVG

    • +

  • WebGL

    • +
+
+ +
+

Content Management Systems

+ + +
+ +
+

Modern Frameworks and Libraries

+ +
    +

  • Vue.js

    • +

  • React.js

    • +

  • Anime.js

    • +

  • GSAP

    • +

  • Tailwind

    • +
+
+
+ +
+

Legacy and Other Web Technologies

+ + +
+ + diff --git a/content/about.md b/content/about.md deleted file mode 100644 index 4b049c2..0000000 --- a/content/about.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: "About Me" -date: 2020-01-31T12:54:00Z ---- - -I am a UK based, freelance, front-end **Web Developer**. - -* I work with small businesses to **Build** and **Grow** their online presence. -* I create **[Bespoke Websites](/tags/bespoke)** using the latest technologies. -* I work with a number of **[Content Management Systems](/tags/cms)**, including **[WordPress](/tags/wordpress)**. -* I develop custom **Themes** and **Plugins**. -* I advise and develop **[eCommerce Solutions](/tags/ecommerce)** for your online business. -* 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**. -* Built with **Security** in mind. -* **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 %}} diff --git a/layouts/shortcodes/baseurl.html b/layouts/shortcodes/baseurl.html new file mode 100644 index 0000000..4e0d7b6 --- /dev/null +++ b/layouts/shortcodes/baseurl.html @@ -0,0 +1 @@ +{{ .Page.Site.BaseURL }} diff --git a/layouts/shortcodes/divwrap.html b/layouts/shortcodes/divwrap.html deleted file mode 100644 index d4bd462..0000000 --- a/layouts/shortcodes/divwrap.html +++ /dev/null @@ -1,3 +0,0 @@ -
- {{ .Inner }} -