10h30/jpadventure
1
0
Fork 0
mirror of https://github.com/10h30/jpadventure.git synced 2026-05-12 23:31:26 +09:00
Code Issues Packages Projects Releases Wiki Activity

Update about page with personal details and skills

Browse Source
This commit is contained in:
Thuan Bui
2025-12-21 17:01:42 +07:00
parent 099f60e9af
commit f3f974491d
1 changed files with 53 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/about.astro
+53 -3
View File
@@ -1,5 +1,24 @@
--- ---
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;
--- ---
<html lang='en'> <html lang='en'>
@@ -8,13 +27,13 @@
<link rel='icon' type='image/svg+xml' href='/favicon.svg' /> <link rel='icon' type='image/svg+xml' href='/favicon.svg' />
<meta name='viewport' content='width=device-width' /> <meta name='viewport' content='width=device-width' />
<meta name='generator' content={Astro.generator} /> <meta name='generator' content={Astro.generator} />
<title>About</title> <title>{pageTitle}</title>
</head> </head>
<body> <body>
<a href='/'>Home</a> <a href='/'>Home</a>
<a href='/about/'>About</a> <a href='/about/'>About</a>
<a href='/blog/'>Blog</a> <a href='/blog/'>Blog</a>
<h1>About Me</h1> <h1>{pageTitle}</h1>
<h2>... and my new Astro site!</h2> <h2>... and my new Astro site!</h2>
<p> <p>
@@ -26,5 +45,36 @@
This site will update as I complete more of the tutorial, so keep checking This site will update as I complete more of the tutorial, so keep checking
back and see how my journey is going! back and see how my journey is going!
</p> </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>{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> </body>
</html> </html>