First draft layout

_config.yml

@@ -1,16 +1,15 @@
 # User config
-author: "Pineapple"
-tagline: "Pineapple Certfied Jekyll Theme"
-description: "In 1493, explorer Christopher Columbus found pineapples on Guadeloupe Island in the Caribbean. Pineapple on pizza soon followed..."
+author: "Tom Kitson"
+description: "Hi - I'm Tom Kitson, a full-stack web developer from London. After 7 years working as a music supervisor in London, I enrolled on Le Wagon's full-stack Web Development bootcamp in September '22 to take my enthusiasm for coding to the next level. I'm a British/German dual citizen, looking for my first developer role in the UK/EU."
 keywords: "Pineapple, Pineapple Pizza, Pineapple House"
-email: "pineapple@example.com"
-linkedin: "https://www.linkedin.com/"
-twitter: "https://twitter.com/"
-github: "https://github.com/"
+email: "thomaspfkitson@gmail.com"
+linkedin: "https://www.linkedin.com/in/tom-kitson/"
+github: "https://github.com/tkitson"
 
 # Site config
-baseurl: "/pineapple"
+baseurl: ""
 highlighter: rouge
 sass:
   sass_dir: assets/scss
-  style: compressed
+  style: compressed
+watch: true

_includes/footer.html

@@ -8,9 +8,8 @@ <h2>Contact</h2>
 			<h2>Follow</h2>
 			<ul>
 				<li><a title="LinkedIn" href="{{ site.linkedin }}" target="_blank">LinkedIn</a></li>
-				<li><a title="Twitter" href="{{ site.twitter }}" target="_blank">Twitter</a></li>
 				<li><a title="Github" href="{{ site.github }}" target="_blank">Github</a></li>
 			</ul>
 		</section>
 	</div>
-</footer>
+</footer>

_layouts/project.html

@@ -13,19 +13,17 @@
 		<section class="project">
 			<div class="container">
 				<article>
-					<span class="h2">Project Title</span>
+					<span class="h2"></span>
 					<h1>
 						<a href="{{ page.project.url }}" target="_blank" title="{{ page.project.title }}" rel="nofollow">{{ page.project.title }}</a>
 					</h1>
-					<span class="h2">Role</span>
+					<span class="h2">Overview</span>
 					{{ page.content }}
 					<div class="project-meta">
 						<span class="h2">Technologies</span>
 						<p>{{ page.project.tech }}</p>
-						<span class="h2">Agency</span>
-						<p><a title="{{ page.agency.title }}" href="{{ page.agency.url }}" target="_blank" rel="nofollow">{{ page.agency.title }}</a></p>
 						<span class="h2">Year</span>
-						<p>{{ page.agency.year }}</p>
+						<p>{{ page.project.year }}</p>
 					</div>
 				</article>
 				<aside>
@@ -62,4 +60,4 @@ <h2>{{ page.next.project.title }}</h2>
 	<script src="{{ "/assets/scripts/vendor/sticky-kit.min.js" | prepend: site.baseurl }}"></script>
 	<script src="{{ "/assets/scripts/project.js" | prepend: site.baseurl }}"></script>
 </body>
-</html>
+</html>

_posts/projects/2022-12-19-indieshopper.md

@@ -0,0 +1,42 @@
+---
+layout: project
+permalink: /:title/
+category: projects
+
+meta:
+  keywords: "Jekyll, Pineapple"
+
+project:
+  title: "IndieShopper"
+  type: "Jekyll"
+  url: "https://www.indieshopper.co"
+  logo: "/assets/images/projects/indieshopper/homepage.png"
+  tech: "HTML, CSS, Boostrap, Ruby, JavaScript, PostgreSQL, Rails"
+  year: "December 2022"
+
+# agency:
+#   title: "Red Pineapple Co"
+#   url: "https://github.com/arnolds/pineapple"
+
+images:
+  - image:
+    url: "/assets/images/projects/indieshopper/homepage.png"
+    alt: "IndieShopper homepage"
+  - image:
+    url: "/assets/images/projects/indieshopper/chat.png"
+    alt: "Indieshopper chat"
+  - image:
+    url: "/assets/images/projects/indieshopper/index.png"
+    alt: "Indieshopper index"
+---
+<p>IndieShopper was my final project on Le Wagon's full-stack Web Development bootcamp, which I graduated from in December 2022 in Barcelona.</p>
+<br>
+<p>IndieShopper gives a platform to small, local businesses to promote their products and services, and makes it easier for people to shop locally as opposed to using giant e-commerce sites.</p>
+<br>
+<p>Built using a Ruby on Rails framework, my team and I designed, built and shipped to production this working MVC demo in a two-week sprint.</p>
+<br>
+<p>Features I enjoyed building include:</p>
+<br>
+<p> - A CSV upload tool for products which will be parsed and added to a shop products page</p>
+<p> - An auto-generated QR code which will updated an order status when scanned by a shop owner</p>
+<p> - A chat feature for users to communicate with shop owners</p>

_posts/projects/2023-01-09-newsguessr.md

@@ -0,0 +1,38 @@
+---
+layout: project
+permalink: /:title/
+category: projects
+
+meta:
+  keywords: "Jekyll, Pineapple"
+
+project:
+  title: "NewsGuessr"
+  type: "Jekyll"
+  url: "https://newsguessr.co"
+  logo: "/assets/images/projects/newsguessr/home.png"
+  tech: "HTML, CSS, Ruby, JavaScript, PostgreSQL, Rails, Stimulus, Docker, Fly.io"
+  year: "January 2023"
+
+# agency:
+#   title: "Red Pineapple Co"
+#   url: "https://github.com/arnolds/pineapple"
+
+images:
+  - image:
+    url: "/assets/images/projects/newsguessr/home.png"
+    alt: "Newsguessr"
+  - image:
+    url: "/assets/images/projects/newsguessr/zoom.png"
+    alt: "Newsguessr"
+  - image:
+    url: "/assets/images/projects/newsguessr/incorrect.png"
+    alt: "Newsguessr"
+  - image:
+    url: "/assets/images/projects/newsguessr/correct.png"
+    alt: "Newsguessr"
+---
+<p>NewsGuessr is a daily game, which gives the player 6 attempts to guess the year of the newspaper based on the headlines and events reported.</p>
+<br>
+<p>I built NewsGuessr as a way to reinforce what I learned after Le Wagon, and as a chance to learn some new technologies. I wanted to build a lightweight and responsive app, to make the gameplay work smoothly. The site uses more JavaScript than my previous projects to enable this. </p>
+<br>

assets/scss/_core.scss

@@ -22,7 +22,7 @@ h1,
 }
 
 h2,
-.h2 {	
+.h2 {
 	color: $color-silver-chalice;
 	display: block;
 	font-family: $font-lekton;
@@ -56,7 +56,7 @@ a {
 ul {
 	margin: 0;
 	padding: 0;
-	list-style-type: none;	
+	list-style-type: none;
 }
 
 img {
@@ -86,7 +86,7 @@ code {
 	border: 1px solid $color-silver-chalice;
 	border-radius: 3px;
 	font-family: $font-lekton;
-	font-size: 1.5rem;	
+	font-size: 1.5rem;
 	padding: .1rem .4rem;
 
 	var {
@@ -99,7 +99,7 @@ dl {
 
 	dt,
 	dd {
-		font-family: $font-lekton;		
+		font-family: $font-lekton;
 	}
 
 	dt {
@@ -113,9 +113,9 @@ dl {
 
 .responsive-table {
 	margin-bottom: 3rem;
-	
+
 	@media (max-width: $breakpoint-xsmall) {
-		display: block;	
+		display: block;
 		overflow-x: scroll;
 		max-width: $breakpoint-xsmall;
 
@@ -127,7 +127,7 @@ dl {
 }
 
 table {
-	border-collapse: collapse;	
+	border-collapse: collapse;
 	width: 100%;
 
 	thead {
@@ -137,7 +137,7 @@ table {
 		}
 	}
 
-	tbody > tr:nth-child(odd) > td, 
+	tbody > tr:nth-child(odd) > td,
 	tbody > tr:nth-child(odd) > th {
 		background: $color-white-sand;
 	}
@@ -167,4 +167,4 @@ blockquote {
 
 pre {
 	margin: 0 0 3rem;
-}
+}

assets/scss/_fonts.scss

@@ -37,4 +37,4 @@
 	font-weight: 600;
 	src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url(/assets/fonts/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2) format('woff2');
 	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
+}

assets/scss/_layout.scss

@@ -7,7 +7,7 @@
 }
 
 .header {
-	background: $color-white;
+	background: #edebeb;
 	padding: 3rem 0;
 }
 
@@ -345,7 +345,7 @@
 }
 
 .footer {
-	background: $color-alabaster;
+	background: #edebeb;
 	bottom: 0;
 	left: 0;
 	padding: 5rem 0;