私の4番目のブログ記事

記事のリストを作成するためにimport.meta.glob()がすべての記事データのリストを返しているので、この記事は他のブログ記事と一緒に表示されるはずです。

---
import BaseLayout from "../layouts/BaseLayout.astro";
const pageTitle = "About";
const skills = [
	"Unity",
	"C#",
	"Shader",
	"Houdini",
	"SubstanceDesigner",
	// "SubstancePainter",
	"Python",
	//"Blender",
];

const skillColor = "navy";
const skillFontWeight = "bold";
const textCase = "uppercase";
---

<BaseLayout pageTitle={pageTitle}>
	
	<h2>スキル</h2>
	<ul>
		{skills.map((skill) => <li class="skill">{skill}</li>)}
	</ul>

	<style is:global define:vars={{ skillColor, skillFontWeight, textCase }}>
		.skill {
			color: var(--skillColor);
			font-weight: var(--skillFontWeight);
			text-transform: var(--textCase);
			margin: 0 5px;
		}
	</style>
</BaseLayout>