---


import BaseLayout from '../layouts/BaseLayout.astro';
import "../styles/global.css";

const pageTitle = "About Me";

const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Technical Writer",
  hobbies: ["photography", "birdwatching", "baseball"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
const happy = true;
const finished = false;
const goal = 3;
const skillColor = "crimson";
const fontWeight = "bold";
const textCase = "uppercase";
---
<BaseLayout pageTitle={pageTitle}>
		<style define:vars={{skillColor,fontWeight, textCase}}>
      h1 {
        color: purple;
        font-size: 4rem;

      }
      .skill {
    	color: var(--skillColor);
    	font-weight: var(--fontWeight);
    	text-transform: var(--textCase);
  	}
    </style>

		
</BaseLayout>

