mirror of
https://github.com/10h30/jpadventure.git
synced 2026-05-12 15:21:19 +09:00
Thuan Bui
97 lines
2.2 KiB
Plaintext
97 lines
2.2 KiB
Plaintext
---
|
|
import "../styles/global.css";
|
|
|
|
const pageTitle = "About Me";
|
|
const identity = {
|
|
firstName: "Thuan",
|
|
lastName: "Bui",
|
|
country: "Japan",
|
|
occupation: "Web Developer",
|
|
hobbies: ["coding", "running", "traveling"],
|
|
};
|
|
const skills = [
|
|
"HTML",
|
|
"CSS",
|
|
"Laravel",
|
|
"WordPress",
|
|
"JavaScript",
|
|
"Astro",
|
|
"React",
|
|
];
|
|
const happy = true;
|
|
const finished = false;
|
|
const goal = 3;
|
|
const skillColor = "crimson";
|
|
const fontWeight = "bold";
|
|
const textCase = "uppercase";
|
|
---
|
|
|
|
<html lang='en'>
|
|
<head>
|
|
<meta charset='utf-8' />
|
|
<link rel='icon' type='image/svg+xml' href='/favicon.svg' />
|
|
<meta name='viewport' content='width=device-width' />
|
|
<meta name='generator' content={Astro.generator} />
|
|
<title>{pageTitle}</title>
|
|
<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>
|
|
</head>
|
|
<body>
|
|
<a href='/'>Home</a>
|
|
<a href='/about/'>About</a>
|
|
<a href='/blog/'>Blog</a>
|
|
<h1>{pageTitle}</h1>
|
|
<h2>... and my new Astro site!</h2>
|
|
|
|
<p>
|
|
I am working through Astro's introductory tutorial. This is the second
|
|
page on my website, and it's the first one I built myself!
|
|
</p>
|
|
|
|
<p>
|
|
This site will update as I complete more of the tutorial, so keep checking
|
|
back and see how my journey is going!
|
|
</p>
|
|
<p>Here are a few facts about me:</p>
|
|
<ul>
|
|
<li>My name is {identity.firstName} {identity.lastName}.</li>
|
|
<li>
|
|
I live in {identity.country} and I work as a {identity.occupation}.
|
|
</li>
|
|
{
|
|
identity.hobbies.length >= 2 && (
|
|
<li>
|
|
Two of my hobbies are: {identity.hobbies[0]} and{" "}
|
|
{identity.hobbies[1]}
|
|
</li>
|
|
)
|
|
}
|
|
</ul>
|
|
<p>My skills are:</p>
|
|
<ul>
|
|
{skills.map((skill) => <li class='skill'>{skill}</li>)}
|
|
</ul>
|
|
|
|
{happy && <p>I am happy to be learning Astro!</p>}
|
|
|
|
{finished && <p>I finished this tutorial!</p>}
|
|
|
|
{
|
|
goal === 3 ? (
|
|
<p>My goal is to finish in 3 days.</p>
|
|
) : (
|
|
<p>My goal is not 3 days.</p>
|
|
)
|
|
}
|
|
</body>
|
|
</html>
|