diff --git a/src/components/Footer.astro b/src/components/Footer.astro
new file mode 100644
index 0000000..8551294
--- /dev/null
+++ b/src/components/Footer.astro
@@ -0,0 +1,18 @@
+---
+const platform = "github";
+const username = "withastro";
+import Social from './Social.astro';
+---
+
+
+
\ No newline at end of file
diff --git a/src/components/Hamburger.astro b/src/components/Hamburger.astro
new file mode 100644
index 0000000..aa83679
--- /dev/null
+++ b/src/components/Hamburger.astro
@@ -0,0 +1,7 @@
+---
+---
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/Header.astro b/src/components/Header.astro
new file mode 100644
index 0000000..7935af7
--- /dev/null
+++ b/src/components/Header.astro
@@ -0,0 +1,10 @@
+---
+import Hamburger from './Hamburger.astro';
+import Navigation from './Navigation.astro';
+---
+
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
new file mode 100644
index 0000000..cf6026f
--- /dev/null
+++ b/src/components/Navigation.astro
@@ -0,0 +1,7 @@
+---
+---
+
\ No newline at end of file
diff --git a/src/components/Social.astro b/src/components/Social.astro
new file mode 100644
index 0000000..20979f4
--- /dev/null
+++ b/src/components/Social.astro
@@ -0,0 +1,13 @@
+---
+const { platform, username } = Astro.props;
+---
+{platform}
+
+
\ No newline at end of file
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
new file mode 100644
index 0000000..9938436
--- /dev/null
+++ b/src/layouts/BaseLayout.astro
@@ -0,0 +1,25 @@
+---
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+import '../styles/global.css';
+const { pageTitle } = Astro.props;
+---
+
+
+
+
+
+
+
+ {pageTitle}
+
+
+
+ {pageTitle}
+
+
+
+
+
\ No newline at end of file
diff --git a/src/layouts/MarkdownPostLayout.astro b/src/layouts/MarkdownPostLayout.astro
new file mode 100644
index 0000000..d8725e8
--- /dev/null
+++ b/src/layouts/MarkdownPostLayout.astro
@@ -0,0 +1,10 @@
+---
+import BaseLayout from './BaseLayout.astro';
+const { frontmatter } = Astro.props;
+---
+
+ Publishd on {frontmatter.pubDate.slice(0,10)} by {frontmatter.author}
+ {frontmatter.description}
+ 
+
+
\ No newline at end of file
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 4bc3482..29227ab 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,21 +1,35 @@
---
-const pageTitle = "About Andre Rossouw";
+import BaseLayout from '../layouts/BaseLayout.astro';
+const identity = {
+ firstName: "Andre",
+ country: "South Africa",
+ occupation: "Random dude",
+ hobbies: ["photography", "birdwatching", "baseball"],
+};
+
+const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
+
+const happy = true;
+const finished = false;
+const goal = 3;
+
+const skillColor = "navy";
+const pageTitle = 'About Me';
---
-
-
-
-
-
-
- {pageTitle}
-
-
- Home
- About
- Blog
- {pageTitle}
- This is my firwst paragraph on my about page. It sure does look good!
- And here is another parapgraph that I'm adding. I think it looks pretty darn cool.
-
-
+
+ Here are a few facts about me:
+
+ - My name is {identity.firstName}.
+ - I live in {identity.country} and I work as a {identity.occupation}.
+ {identity.hobbies.length >= 2 &&
+ - Two of my hobbies are: {identity.hobbies[0]} and {identity.hobbies[1]}
+ }
+
+ My skills are:
+
+ {skills.map((skill) => - {skill}
)}
+
+ {happy && I am happy to be learning Astro!
}
+ {finished && I finished this tutorial!
}
+ {goal === 3 ? My goal is to finish in 3 days.
: My goal is not 3 days.
}
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index 838484c..ea015ab 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -1,22 +1,13 @@
---
+import BaseLayout from '../layouts/BaseLayout.astro';
+const pageTitle = 'My astro Learning Blog';
+import '../styles/global.css';
---
-
-
-
-
- Astro
-
-
- Home
- About
- Blog
-
- My Astro Learning Blog
- This is where I will post about my journey learning Astro.
-
-
-
\ No newline at end of file
+
+ This is where I will post about my journey learning Astro.
+
+
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c457af5..7312aea 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,19 +1,8 @@
---
+import BaseLayout from '../layouts/BaseLayout.astro';
+const pageTitle = 'Home Page';
+---
----
-
-
-
-
-
-
-
- Astro
-
-
- Home
- About
- Blog
- My Astro Site
-
-
+
+ My awesome blog subtitle
+
\ No newline at end of file
diff --git a/src/pages/posts/post-1.md b/src/pages/posts/post-1.md
index 982e74a..73d2944 100644
--- a/src/pages/posts/post-1.md
+++ b/src/pages/posts/post-1.md
@@ -1,19 +1,14 @@
---
+layout: ../../layouts/MarkdownPostLayout.astro
title: 'My First Blog Post'
pubDate: 2022-07-01
-description: 'This is the first post of my new Astro blog.'
+description: "Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website."
author: 'Astro Learner'
image:
- url: 'https://docs.astro.build/assets/full-logo-light.png'
+ url: "https://docs.astro.build/assets/full-logo-light.png"
alt: 'The full Astro logo.'
tags: ["astro", "blogging", "learning in public"]
---
-# My First Blog Post
-
-Published on: 2022-07-01
-
-Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
-
## What I've accomplished
1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.
diff --git a/src/pages/posts/post-2.md b/src/pages/posts/post-2.md
index 06a4544..d3ca609 100644
--- a/src/pages/posts/post-2.md
+++ b/src/pages/posts/post-2.md
@@ -1,4 +1,5 @@
---
+layout: ../../layouts/MarkdownPostLayout.astro
title: My Second Blog Post
author: Astro Learner
description: "After learning some Astro, I couldn't stop!"
diff --git a/src/pages/posts/post-3.md b/src/pages/posts/post-3.md
index d8c9844..c79fe82 100644
--- a/src/pages/posts/post-3.md
+++ b/src/pages/posts/post-3.md
@@ -1,4 +1,5 @@
---
+layout: ../../layouts/MarkdownPostLayout.astro
title: My Third Blog Post
author: Astro Learner
description: "I had some challenges, but asking in the community really helped!"
diff --git a/src/scripts/menu.js b/src/scripts/menu.js
new file mode 100644
index 0000000..5e40f5f
--- /dev/null
+++ b/src/scripts/menu.js
@@ -0,0 +1,3 @@
+document.querySelector('.hamburger').addEventListener('click', () => {
+ document.querySelector('.nav-links').classList.toggle('expanded');
+});
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..e0ae1b1
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,84 @@
+html {
+ background-color: #f1f5f9;
+ font-family: sans-serif;
+}
+
+body {
+ margin: 0 auto;
+ width: 100%;
+ max-width: 80ch;
+ padding: 1rem;
+ line-height: 1.5;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+h1 {
+ margin: 1rem 0;
+ font-size: 2.5rem;
+}
+
+/* nav styles */
+
+.hamburger {
+ padding-right: 20px;
+ cursor: pointer;
+}
+
+.hamburger .line {
+ display: block;
+ width: 40px;
+ height: 5px;
+ margin-bottom: 10px;
+ background-color: #ff9776;
+}
+
+.nav-links {
+ width: 100%;
+ top: 5rem;
+ left: 48px;
+ background-color: #ff9776;
+ display: none;
+ margin: 0;
+ }
+
+.nav-links a {
+ display: block;
+ text-align: center;
+ padding: 10px 0;
+ text-decoration: none;
+ font-size: 1.2rem;
+ font-weight: bold;
+ text-transform: uppercase;
+}
+
+.nav-links a:hover,
+.nav-links a:focus {
+ background-color: #ff9776;
+}
+
+.expanded {
+ display: unset;
+}
+
+@media screen and (min-width: 636px) {
+ .nav-links {
+ margin-left: 5em;
+ display: block;
+ position: static;
+ width: auto;
+ background: none;
+ }
+
+ .nav-links a {
+ display: inline-block;
+ padding: 15px 20px;
+ }
+
+ .hamburger {
+ display: none;
+ }
+
+}
\ No newline at end of file