text: import Head from "next/head";
  import Image from "next/image";
  import pfp from "../public/images/pfp.png";
  import ParticleBackground from "../components/ParticleBackground";
  
  const title = "About Me";
  const description = "About me.";
  
  export default function About() {
  	const yearsProgramming = new Date().getFullYear() - new Date(2013, 1, 14).getFullYear();
  
  	return (
  		<>
  			<Head>
  				<title>{title}</title>
  				<meta name="og:title" content={title} />
  				<meta name="description" content={description} />
  				<meta name="og:description" content={description} />
  				<meta name="og:image" content="/images/favicon.png" />
  				<meta name="og:url" content={`${process.env.baseUrl}/about`} />
  			</Head>
  
  			<ParticleBackground className="background" />
  
  			<div style={{
  				width: "80%",
  				margin: "50px auto",
  				display: "grid",
  				gridTemplateColumns: "fit-content(30vw) 1fr",
  				gridTemplateRows: "50px 1fr 0.5fr",
  				gridTemplateAreas: `
  				"header header"
  				"pfp qualifications"
  				"flavor contact"`
  			}}>
  				<h1 style={{
  					gridArea: "header",
  					textAlign: "center"
  				}}>About Me</h1>
  
  				<div className="hide-if-small" style={{
  					gridArea: "pfp",
  					paddingRight: "10px"
  				}}>
  					<Image src={pfp} alt="Me" />
  				</div>
  
  				<div style={{
  					gridArea: "qualifications",
  					position: "relative"
  				}}>
  					<h2>Qualifications</h2>
  					<ul>
  						<li>Student at the <b>University of Illinois at Chicago</b>.</li>
  						<li>Eagle scout.</li>
  						<li>Software developer.
  							<ul>
  								<li>2 years at <b>Edikt Studios</b> working on multiply Unity applications.</li>
  								<li>4 months at <b>PDX, inc.</b> working on the Enterprise Pharmacy System.</li>
  								<li>Over <span>{yearsProgramming}</span> years of programming experience.</li>
  								<li>Proficient in multiple languages atop the TIOBE Index.
  									<ul>
  										<li>Python</li>
  										<li>C</li>
  										<li>Java</li>
  										<li>C++</li>
  										<li>C#</li>
  										<li>JavaScript</li>
  									</ul>
  								</li>
  							</ul>
  						</li>
  						<li>Former lifeguard; multiple current or past Red Cross certifications.
  							<ul>
  								<li>First Aid</li>
  								<li>CPR/AED</li>
  								<li>Lifeguarding</li>
  								<li>Wilderness and Remote First Aid (WaRFA)</li>
  							</ul>
  						</li>
  					</ul>
  				</div>
  
  				<div style={{
  					gridArea: "contact"
  				}}>
  					<h2>Contact Me</h2>
  					<p><b>Email:</b> tjmartin2003@gmail.com</p>
  					<p><b>Discord:</b> Lakuna#2244</p>
  					<p><b>LinkedIn:</b> <a href="https://www.linkedin.com/in/travis-j-martin">Travis Martin</a></p>
  					<p><b>GitHub:</b> <a href="https://github.com/Lakuna">Lakuna</a></p>
  				</div>
  			</div>
  		</>
  	);
  }