- Astro
- Tailwind CSS
- Biome
- Markuplint
- modern-normalize
See package.json for more details.
Semantic markup implementation to realize information design of human-readable (Human can understand) and machine-readable (Be understood by the machine).
It also implements content completion using WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications).
Details
<section id="basic" aria-labelledby="basic-heading">
<h2 id="basic-heading">{t("heading.basic")}</h2>
</section>Assist users as they move from article to article by tying aria-labelledby to article elements.
You need to format the API you get for display, but managing it as a single component simplifies source code, allows multiple uses, and simplifies information design.
Details
For example, the slide list uses the following components to render:
<ul>
{
list.map(listItem => (
<li>
{listItem.datetime && (
<span class="time">{dateStirngReplace(listItem.datetime)} - </span>
)}
{listItem.url ? (
<GlobalLinkComponent link={listItem} />
) : (
listItem.title
)}
</li>
))
}
</ul>The portfolio site is designed to be displayed in Japanese and English, with one file automatically translated for each of the supported languages.
Details
Each language to be translated is managed by directory.
src/i18n
├── en
│ └── dictionary.ts // English
└──ja
└── dictionary.ts // Japanese
If a match is found with the supported key using useTranslations, the translated wording will be displayed.
---
import { useTranslations } from "../../../i18n/util";
const t = useTranslations(Astro);
---
<h2 id="contact-heading">{t("heading.contact")}</h2>
<!-- English: <h2 id="contact-heading">Contact</h2> -->The rendering process is also possible, for example, when displaying only in a specific language.
The following is a conditional expression that is displayed when it is not in Japanese.
---
const lang = getLanguageFromURL(Astro.url.pathname);
---
{lang === "en" && <em>Sorry, Japanese text only</em>}Inclusive design designed for easy viewing by all users.
Too much decoration can prevent you from getting the information you want. It is designed with the default style of the browser, that is, the standard image in mind.
It's also the semantic markup of the design makes it possible to arrive at the information without feeling out of place, even with the default style in browser.
The basic setting is 16 px, and the size ratio can be maintained even if the page is enlarged by rem.
All colors are set to have a contrast ratio of at least 4.5:1 with the background, but they are not pure black and white, but instead are balanced with fewer shades of gray.
Details
It is specified using the following custom properties (CSS Variables) for common use:
| design_token | value |
|---|---|
var(--y-black-base) |
rgb(21, 32, 43) |
var(--y-white-base) |
rgb(255, 255, 255) |
var(--y-white-low) |
rgb(210, 210, 210) |
var(--y-white-medium) |
rgba(163, 163, 163) |
var(--y-blue-low) |
rgb(90, 190, 255) |
var(--y-blue-medium) |
rgb(18, 122, 200) |
var(--y-purple-medium) |
rgb(220, 100, 220) |
It also supports dark mode (Gentle dark tones of the eyes), depending on the OS settings.
The maximum width of the main content is set to 80ch. ch is called a chain and is a variable unit depending on the size of the character.
The advantage of this setting is that it can support users with dyslexia who cannot read long sentences, and it is less likely that some text will become unreadable as the character size increases.
We use vertical rhythm that emphasizes consistency throughout the page. The margins and margins are set relative to the line spacing of 24px.
Cognitively impaired users can read text more easily if the words are evenly spaced.