add CV

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@stylistic/jsx/jsx-pascal-case": "off"
+  }
 }

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "cSpell.words": [
+    "Dirents",
+    "Sitecore"
+  ]
+}

content/home.md

@@ -0,0 +1,14 @@
+---
+title: Awesome kitties
+date: 2019-03-17T19:31:20.591Z
+cats:
+  - description: 'Maru is a Scottish Fold from Japan, and he loves boxes.'
+    name: Maru (まる)
+  - description: Lil Bub is an American celebrity cat known for her unique appearance.
+    name: Lil Bub
+  - description: 'Grumpy cat is an American celebrity cat known for her grumpy appearance.'
+    name: Grumpy cat (Tardar Sauce)
+---
+Welcome to my awesome page about cats of the internet.
+
+This page is built with NextJS, and content is managed in Decap CMS

content/pages/cv.yml

@@ -0,0 +1,163 @@
+competencies:
+  - Software Development
+  - Software Architecture
+  - UI/UX Design
+  - Full-Stack Development
+  - Team Leadership
+  - Recruitment and Onboarding
+  - Web Application Development
+  - Cloud Hosting (AWS
+  - GCP)
+  - Database Management
+  - User Interface Design
+  - Project Management
+education:
+  - 10 GCSEs @ Duchess Community High School
+certifications:
+  - Sitecore Professional Developer Certification (Sitecore 8.2) - Aug. 2017
+languages:
+  - name: English
+    proficiency: Native
+  - name: German
+    proficiency: Professional Working Proficiency
+  - name: Arabic (Levantine)
+    proficiency: Elementary
+experience:
+  - position: Software Development Tutor
+    employer: Yarbz Digital Ltd
+    start: Sep. 2023
+    end: Mar. 2024
+    desc: I teach students of all levels modern software development, including
+      coding fundamentals, computer science theory and modern software
+      technologies. I also help them prepare for tech interviews!
+  - position: Freelance Software Consultant
+    employer: Yarbz Digital Ltd
+    start: Aug. 2021
+    end: Mar. 2024
+    desc: >-
+      * Designed and developed the front-end and back-end of the innovative
+      recruitment platform "Radr" using Angular 13, Node.js, TypeScript,
+      MongoDB, and hosted on Google Cloud Platform.
+
+      * Developed Fifty Five and Five's flagship website (fiftyfiveandfive.com) using PHP, WordPress, and Tailwind, enhancing its online presence.
+
+      * Built front-end of sportank.com, a dynamic social network catering to American Football enthusiasts and athletes, using Angular 10, Tailwind, SCSS, and TypeScript.
+
+      * Designed and built a proof-of-concept using Angular, Node.js, and gRPC, enabling real-time voice input streaming from web browsers to medical speech recognition software, leading to its active use by doctors for efficient communication.
+
+      * Maintained and improved the Integra Planner event management platform used by thousands of people for multi-day events, specifically for GARA Choruses.
+
+      * Enabled efficient event planning and management by utilizing Angular, Ionic for mobile apps, AWS, SQL Server, and .NET Core.
+
+
+      **Skills:** ASP.NET · Amazon Elastic Container Registry (ECR) · Angular · TypeScript · Amazon ECS · Python (Programming Language) · Node.js · ASP.NET MVC · Content Management Systems (CMS) · Amazon Web Services (AWS) · Next.js · Microsoft Azure · Git · React.js · C# · Full-Stack Development · Umbraco · WordPress · Web Development · JavaScript · Front-End Development · MySQL · Microsoft SQL Server · Cloud Development · PHP · NoSQL · AWS Lambda · HTML · Microservices · Technical Requirements · Firebase · ASP.NET Core · Agile Methodologies · Google Cloud Platform (GCP) · MongoDB · User Interface Programming
+  - position: Contract Software Engineer
+    employer: The Data Shed
+    start: Jan. 2023
+    end: Aug. 2023
+    desc: >-
+      * Facilitated the recovery of funds for more than 100,000 customers
+      affected by loan mis-selling by developing a robust web application using
+      Next.js, TypeScript, React, Node.js, AWS Cognito, and AWS ECS.
+
+      * Implemented a wide range of features, including voting, bank details collection, messaging functionality, claims processing, and document management.
+
+
+      **Skills:** Amazon Elastic Container Registry (ECR) · TypeScript · Amazon ECS · Tailwind CSS · Node.js · Amazon Web Services (AWS) · Next.js · React.js · docker · Front-End Development · NoSQL · AWS Lambda · HTML · Agile Methodologies · User Interface Programming
+  - position: Software Architecht
+    employer: T101
+    start: Sep. 2020
+    end: Jul. 2021
+    desc: >-
+      * As well as fulfilling the engineering responsibilities required by my
+      previous role, my responsibilities now additionally entail designing,
+      documenting and leading on architectural changes.As well as fulfilling the
+      engineering responsibilities required by my previous role, my
+      responsibilities now additionally entail designing, documenting and
+      leading on architectural changes.
+
+
+      **Skills:** ASP.NET · Angular · TypeScript · Amazon ECS · ASP.NET MVC · Kubernetes · Amazon Web Services (AWS) · Git · C# · Full-Stack Development · Web Development · JavaScript · Front-End Development · MySQL · Microsoft SQL Server · Cloud Development · NoSQL · HTML · .NET Core · Microservices · Technical Requirements · ASP.NET Core · Agile Methodologies · Google Cloud Platform (GCP) · User Interface Programming
+  - position: Senior Full-stack Developer
+    employer: T101
+    start: Feb. 2020
+    end: Sep. 2020
+    desc: >-
+      * Drove the complete platform re-architecture and development for Recon, a
+      UK-based dating app with 200,000 monthly active users.
+
+      * Modernized and scaled the app by using .NET Core, Firestore, SignalR, Angular 10/TypeScript, gRPC, SQL Server, MySQL, microservices and Kubernetes on GCP.
+
+
+      **Skills:** ASP.NET · Angular · TypeScript · Amazon ECS · ASP.NET MVC · Kubernetes · Git · C# · Full-Stack Development · Web Development · JavaScript · Front-End Development · MySQL · Microsoft SQL Server · Cloud Development · NoSQL · HTML · .NET Core · Microservices · Technical Requirements · Agile Methodologies · User Interface Programming
+  - position: Senior Software Developer
+    employer: Datatrial
+    start: Apr. 2019
+    end: Feb. 2020
+    desc: >-
+      * Worked on developing new/improving existing functional modules for
+      Datatrial's Nucleus offering, which aims to provide a web platform for
+      facilitating clinical trials.
+
+
+      **Skills:** ASP.NET · TypeScript · ASP.NET MVC · Git · C# · Full-Stack Development · Web Development · JavaScript · Front-End Development · MySQL · Microsoft SQL Server · Aurelia · HTML · Agile Methodologies · User Interface Programming
+  - position: Software Engineer
+    employer: pipdig
+    start: Aug 2018
+    end: Apr 2019
+    desc: >-
+      * Developing a mix of commercial sites and bespoke blogs, I was
+      responsible for the entire product life-cycle. This included requirements
+      gathering, development, management of the project and ultimately
+      delivering and maintaining the product. Responsibilities also included
+      improving internal software development practices and working to increase
+      efficiency across a wide range of small, fast-paced projects.
+
+
+      **Skills:** TypeScript · Content Management Systems (CMS) · Git · Full-Stack Development · WordPress · Web Development · JavaScript · Front-End Development · MySQL · Microsoft SQL Server · Cloud Development · PHP · HTML · Agile Methodologies · User Interface Programming
+  - position: Senior Software Developer
+    employer: The Works
+    start: Apr. 2018
+    end: Aug. 2018
+    desc: >-
+      * I was the sole developer for an event management platform at Newcastle
+      University, enhancing it by developing key features.
+
+
+      **Skills:** ASP.NET · ASP.NET MVC · Content Management Systems (CMS) · Git · C# · Full-Stack Development · Web Development · JavaScript · Front-End Development · Microsoft SQL Server · HTML · Agile Methodologies · User Interface Programming · Umbraco
+  - position: Software Developer
+    employer: Orangebus
+    start: Jan. 2017
+    end: Apr. 2018
+    desc: >-
+      * My responsibilities involved developing and managing a variety of
+      different projects across different industries.
+
+
+      **Skills:** ASP.NET MVC · Git · C# · Full-Stack Development · JavaScript · Front-End Development · Microsoft SQL Server · HTML · Agile Methodologies · User Interface Programming
+  - position: Junior Software Developer
+    employer: True Potential LLP
+    start: Oct. 2015
+    end: Dec. 2016
+    desc: >-
+      * Primarily a web developer, my responsibilities included developing
+      interactivity on the front-end, back-end services and designing database
+      structures for large-scale web applications that are in-use by over 2
+      million clients as of November 2016.
+
+
+      **Skills:** ASP.NET MVC · Git · C# · Full-Stack Development · Web Development · JavaScript · Visual Basic .NET (VB.NET) · Front-End Development · Microsoft SQL Server · HTML · Agile Methodologies · User Interface Programming
+  - position: IT Support / Trainee Software Developer
+    employer: Innovation Property (UK)
+    start: Jan. 2013
+    end: Sep. 2015
+    desc: >-
+      * I worked as an IT Support Technician and Developer Trainee. My
+      responsibilities included dealing with IT issues via an IT helpdesk
+      system. I also worked on improvements to internally-developed software
+      that was used by our Arboricultural staff. I also provided updates to an
+      internal MVC application used by office staff to log data, arrange
+      appointments for external staff and contact clients.
+
+
+      **Skills:** ASP.NET MVC · Git · C# · Full-Stack Development · JavaScript · Front-End Development · Microsoft SQL Server · HTML · Agile Methodologies · User Interface Programming

content/recipes/hummus.post.md

@@ -1,4 +0,0 @@
----
-title: Hummus
-description: Some description...
----

content/recipes/manakish-pan.md

@@ -0,0 +1,16 @@
+---
+title: Manakish (pan)
+description: Yummy yummy!
+you-will-need: |-
+  * flower
+  * 1tbsp sugar
+  * 1 tsp yeast
+  * 1/4 cup vegetable oil
+  * 1/2 tsp baking powder
+  * cheese (mozarella, akkawi) or za'atar for filling
+---
+1. Mix the flower, sugar and yeast together in a bowl, and add a 1 cup of warm water. Keep mixing until it turns to a goo-like consistency
+2. Cover the bowl for 10 minutes
+3. Add the oil, baking powder and a further 1.5 cup of flower, and stir
+4. Once the dough comes together, knead it until it is combined fully, and separate it into small blobs of dough.
+5. Roll each blob out and fry it for 2 minutes on either side in the pan, adding your preferred filling on top while it's cooking (cheese or za'atar, or both)

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
+    "server": "npx decap-server",
     "build": "next build",
     "start": "next start",
     "link": "npx standard",
@@ -17,9 +18,14 @@
     "react-dom": "^18"
   },
   "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/preset-react": "^7.23.3",
     "eslint": "^8",
     "eslint-config-next": "14.1.1",
+    "frontmatter-markdown-loader": "^3.7.0",
     "husky": "^9.0.11",
+    "js-yaml": "^4.1.0",
+    "showdown": "^2.1.0",
     "standard": "^17.1.0"
   }
 }

public/admin/config.yml

@@ -0,0 +1,59 @@
+local_backend: true
+backend:
+  name: git-gateway
+  branch: main # Branch to update (optional; defaults to master)
+media_folder: public/img
+public_folder: img
+collections:
+  - name: "recipes"
+    label: "Recipes"
+    folder: "content/recipes"
+    create: true
+    fields:
+      - {label: "Title", name: "title", widget: "string"}
+      - {label: "Description", name: "description", widget: "string"}
+      - {label: Image, name: image, widget: image, required: false}
+      - {label: "You Will Need", name: "you-will-need", widget: "markdown" }
+      - {label: "Recipe", name: "body", widget: "markdown" }
+  - name: "pages"
+    label: "Pages"
+    files:
+      - label: "CV"
+        name: "cv"
+        file: "content/pages/cv.yml"
+        fields:
+          - label: Core competencies
+            widget: list
+            name: competencies
+            allow_add: true
+          - label: Education history
+            widget: list
+            name: education
+            allow_add: true
+          - label: Certifications
+            widget: list
+            name: certifications
+            allow_add: true
+          - label: Languages
+            widget: list
+            name: languages
+            allow_add: true
+            fields:
+              - {label: "Name", name: name, widget: string }
+              - {label: "Proficiency", name: proficiency, widget: string }
+          - label: Technical skills
+            widget: list
+            name: tech-skills
+          - label: Professional experience
+            name: experience
+            widget: list
+            fields:
+              - { label: Position, name: position, widget: string }
+              - { label: Employer, name: employer, widget: string }
+              - { label: Start date, name: start, widget: string }
+              - { label: End date, name: end, widget: string }
+              - { label: Description, name: desc, widget: markdown }
+
+           
+
+

public/admin/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content Manager</title>
+  <!-- <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script> -->
+</head>
+<body>
+  <!-- Include the script that builds the page and powers Decap CMS -->
+  <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
+</body>
+</html>

src/components/CV/CV.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+
+import style from './CV.module.css'
+
+function CV ({ competencies, education, certifications, languages, experience }) {
+  return (
+    <div className={style.cv}>
+      <div>
+        <h2>Core competencies</h2>
+        <ul>
+          {competencies.sort().map(c => <li key={c}>{c}</li>)}
+        </ul>
+
+        <h2>Certifications</h2>
+        <ul>
+          {certifications.sort().map(c => <li key={c}>{c}</li>)}
+        </ul>
+
+        <h2>Languages</h2>
+        <ul>
+          {languages.sort().map(c => <li key={c}>{c.name} - {c.proficiency}</li>)}
+        </ul>
+
+        <h2>Education history</h2>
+        <p>{education}</p>
+      </div>
+      <div>
+        <h2>Professional experience</h2>
+
+        {experience.map((exp, i) => (
+          <CVWorkExperience key={i} employer={exp.employer} position={exp.position} start={exp.start} end={exp.end}>{exp.desc}</CVWorkExperience>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default CV
+
+function CVWorkExperience ({ position, employer, start, end, children }) {
+  return (
+    <div className={style['work-experience']}>
+      <div>
+        <h3>
+          {position}
+          <br />
+          <small>{employer}</small>
+        </h3>
+        <div>
+          <time>{start}</time>-<time>{end}</time>
+        </div>
+      </div>
+      <div dangerouslySetInnerHTML={{ __html: children }} />
+    </div>
+  )
+}

src/components/CV/CV.module.css

@@ -0,0 +1,29 @@
+.cv {
+  display: flex;
+  flex-direction: row;
+  gap: 25px;
+}
+
+.cv > div:first-child {
+  flex: 1;
+}
+
+.cv > div:last-child {
+  flex: 2;
+}
+
+.cv .work-experience >div:first-child {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cv ul {
+  margin-left: 0;
+  list-style: inside;
+  list-style-type: circle;
+}
+
+.cv ul li:not(:last-child) {
+  margin-bottom: 10px;
+}

src/components/Footer/Footer.jsx

@@ -1,15 +1,17 @@
 import React from 'react'
 
+import style from './Footer.module.css'
+
 function Footer () {
   return (
-    <footer>
+    <footer className={style.footer}>
       <nav>
         <ul>
           <li>
-            <a href='#'>back to top</a>
+            <a href='#'>Back to top</a>
           </li>
           <li>
-            <a href='mailto:me@aaronjy.me'>send me an email</a>
+            <a href='mailto:me@aaronjy.me'>Send me an email</a>
           </li>
         </ul>
       </nav>

src/components/Footer/Footer.module.css

@@ -0,0 +1,3 @@
+.footer nav:first-child a {
+  text-transform: lowercase;
+}

src/components/Grid/Grid.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import style from './Grid.module.css'
+
+function Grid ({ children }) {
+  return (
+    <div className={style.grid}>{children}</div>
+  )
+}
+
+export default Grid

src/components/Grid/Grid.module.css

@@ -0,0 +1,5 @@
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 32px;
+}

src/components/Header.jsx

@@ -1,24 +0,0 @@
-import Link from 'next/link'
-import React from 'react'
-
-function Header () {
-  return (
-    <header>
-      <nav>
-        <ul>
-          <li>
-            <Link href='/'>home</Link>
-          </li>
-          <li>
-            <Link href='/writing'>writing</Link>
-          </li>
-          <li>
-            <Link href='/recipes'>recipes</Link>
-          </li>
-        </ul>
-      </nav>
-    </header>
-  )
-}
-
-export default Header

src/components/Header/Header.jsx

@@ -7,9 +7,9 @@ function Header () {
   return (
     <header className={styles.header}>
       <nav>
-        <Link href='/'>home</Link>
+        <Link href='/'>Home</Link>
-        <Link href='/writing'>writing</Link>
+        <Link href='/writing'>Writing</Link>
-        <Link href='/cv'>cv</Link>
+        <Link href='/cv'>CV</Link>
       </nav>
     </header>
   )

src/components/Header/Header.module.css

@@ -3,3 +3,7 @@
     justify-content: center;
     gap: 20px;
 }
+
+.header a {
+    text-transform: lowercase;
+}

src/layouts/DefaultLayout/DefaultLayout.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import style from './DefaultLayout.module.css'
 import Header from '@/components/Header/Header'
-import Footer from '@/components/Footer'
+import Footer from '@/components/Footer/Footer'
 
 import { Barlow } from 'next/font/google'
 

src/pages/cv/index.js

@@ -0,0 +1,53 @@
+import CV from '@/components/CV/CV'
+import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout'
+import React from 'react'
+import yaml from 'js-yaml'
+import fs from 'fs'
+import showdown from 'showdown'
+
+function CVPage ({
+  competencies,
+  education,
+  certifications,
+  languages,
+  experience
+}) {
+  return (
+    <DefaultLayout>
+      <section>
+        <h1>CV</h1>
+      </section>
+      <section>
+      {/* eslint-disable-next-line react/jsx-pascal-case*/} 
+        <CV
+          competencies={competencies}
+          education={education}
+          certifications={certifications}
+          languages={languages}
+          experience={experience}
+        />
+      </section>
+    </DefaultLayout>
+  )
+}
+
+export function getStaticProps () {
+  const content = fs.readFileSync('./content/pages/cv.yml', {
+    encoding: 'utf-8'
+  })
+
+  const data = yaml.load(content)
+
+  const MDConverter = new showdown.Converter()
+
+  data.experience = data.experience.map((exp) => ({
+    ...exp,
+    desc: MDConverter.makeHtml(exp.desc)
+  }))
+
+  return {
+    props: { ...data }
+  }
+}
+
+export default CVPage

src/pages/recipes/index.js

@@ -1,27 +1,26 @@
-import Grid from '@/components/Grid/Grid'
+// import Grid from '@/components/Grid/Grid'
-import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout'
+// import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout'
-import React from 'react'
+// import React from 'react'
-
-// import fs from 'fs'
 // import path from 'path'
+// import fs from 'fs'
 
-function Recipes ({ recipes }) {
+// function Recipes ({ recipes }) {
-  return (
+//   return (
-    <DefaultLayout>
+//     <DefaultLayout>
-      <section>
+//       <section>
-        <h1>Recipes</h1>
+//         <h1>Recipes</h1>
-        <Grid>
+//         <Grid>
-          {recipes.length &&
+//           {recipes.length &&
-            recipes.map((recipe) => (
+//             recipes.map((recipe) => (
-              <div key={recipe.name}>{recipe.name ?? 'unknown'}</div>
+//               <div key={recipe.name}>{recipe.name ?? 'unknown'}</div>
-            ))}
+//             ))}
-        </Grid>
+//         </Grid>
-      </section>
+//       </section>
-    </DefaultLayout>
+//     </DefaultLayout>
-  )
+//   )
-}
+// }
 
-export default Recipes
+// export default Recipes
 
 // export async function getStaticProps () {
 //   const recipeDirents = await fs.promises
@@ -33,8 +32,12 @@ export default Recipes
 //   const recipes = [{
 //     name: 'lol'
 //   }]
+
 //   for (const recipe of recipeDirents) {
-//     const p = path.join('./', recipe.path, recipe.name)
+//     // const recipePath = path.join('./', recipe.path, recipe.name)
+//     // const recipeContent = fs.readFileSync(recipePath, { encoding: 'utf-8' })
+
+//     console.log(recipeFm)
 //   }
 
 //   return {

src/pages/writing/index.js

@@ -1,17 +1,14 @@
-import Footer from '@/components/Footer'
+import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout'
-import Header from '@/components/Header/Header'
 
 export default function Writing () {
   return (
-    <>
+    <DefaultLayout>
-      <Header />
       <section>
         <h1>Writing</h1>
       </section>
       <section>
         <i>Nothing to see here yet!</i>
       </section>
-      <Footer />
+    </DefaultLayout>
-    </>
   )
 }

src/styles/globals.css

@@ -1,6 +1,6 @@
 html, body {
   margin: 0;
-  padding: 0;
+  padding: 0 15px;
 }
 
 h1, h2, h3 {