<!DOCTYPE html><html lang="ja"> <head><script>
const applyTheme = () => {
const theme = (() => {
const localStorageTheme = localStorage?.getItem("theme") ?? "";
if (["dark", "light"].includes(localStorageTheme)) {
return localStorageTheme;
}
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
return "dark";
}
return "light";
})();
if (theme === "light") {
document.documentElement.classList.remove("dark");
} else {
document.documentElement.classList.add("dark");
}
window.localStorage.setItem("theme", theme);
};
document.addEventListener("astro:after-swap", applyTheme);
applyTheme();
</script><!-- Init --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="niri.la"><link rel="icon" type="image/svg+xml" href="/favicon.png"><title>にりらだょ</title><!-- Fonts --><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap" rel="stylesheet"><!-- OGP Zone --><meta property="og:title" content="にりらだょ"><meta property="og:description" content="niri.la"><meta property="og:type" content="website"><meta property="og:url" content="https://me.niri.la/"><meta property="og:image" content="https://me.niri.la/ogp.jpg"><meta property="og:site_name" content="niri.la"><meta name="twitter:card" content="summary_large_image"><!-- Animation --><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.DlbB_We1.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css"><link rel="stylesheet" href="/_astro/_id_.Bw5ON5ri.css">
<style>.particle-effect{position:relative;overflow:visible}.particle{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;animation:particle-float 15s ease-in-out;z-index:0}@keyframes particle-float{0%{opacity:0;transform:translate(0) scale(.5)}20%{opacity:1;transform:translate(var(--dx1),var(--dy1)) scale(1)}50%{opacity:.8;transform:translate(var(--dx2),var(--dy2)) scale(.8)}80%{opacity:.4;transform:translate(var(--dx3),var(--dy3)) scale(.6)}to{opacity:0;transform:translate(var(--dx4),var(--dy4)) scale(0)}}
</style><style>[data-astro-transition-scope="astro-pteoypcf-1"] { view-transition-name: astro-pteoypcf-1; }@layer astro { ::view-transition-old(astro-pteoypcf-1) {
animation-duration: 90ms, 220ms;
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1), cubic-bezier(0.76, 0, 0.24, 1);
animation-fill-mode: both, both;
animation-name: astroFadeOut, astroSlideToLeft; }::view-transition-new(astro-pteoypcf-1) {
animation-duration: 210ms, 220ms;
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1), cubic-bezier(0.76, 0, 0.24, 1);
animation-delay: 30ms;
animation-fill-mode: both, both;
animation-name: astroFadeIn, astroSlideFromRight; }[data-astro-transition=back]::view-transition-old(astro-pteoypcf-1) {
animation-name: astroFadeOut, astroSlideToRight; }[data-astro-transition=back]::view-transition-new(astro-pteoypcf-1) {
animation-name: astroFadeIn, astroSlideFromLeft; } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-pteoypcf-1"],
[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-pteoypcf-1"] {
animation-duration: 90ms, 220ms;
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1), cubic-bezier(0.76, 0, 0.24, 1);
animation-fill-mode: both, both;
animation-name: astroFadeOut, astroSlideToLeft; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-pteoypcf-1"],
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-pteoypcf-1"] {
animation-duration: 210ms, 220ms;
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1), cubic-bezier(0.76, 0, 0.24, 1);
animation-delay: 30ms;
animation-fill-mode: both, both;
animation-name: astroFadeIn, astroSlideFromRight; }[data-astro-transition=back][data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-pteoypcf-1"],
[data-astro-transition=back][data-astro-transition-fallback="old"][data-astro-transition-scope="astro-pteoypcf-1"] {
animation-name: astroFadeOut, astroSlideToRight; }[data-astro-transition=back][data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-pteoypcf-1"],
[data-astro-transition=back][data-astro-transition-fallback="new"][data-astro-transition-scope="astro-pteoypcf-1"] {
animation-name: astroFadeIn, astroSlideFromLeft; }</style></head> <body class="bg-base-100 text-base-content min-h-screen flex flex-col"> <div class="flex-1"> <main class="max-w-4xl mx-auto px-4 py-12"> <div class="lg:flex lg:gap-12"> <aside class="w-full lg:w-80 shrink-0"> <div class="sticky top-8 space-y-6"> <p class="font font-bold text-5xl bg-linear-to-r from-rose-400 to-pink-500 bg-clip-text text-transparent"> niri.la </p> <div class="space-y-4"> <div class="font-mono text-sm space-y-1"> <p> <span class="text-pink-400">var</span> focus = <span class="text-green-700">"social and vr"</span>;
</p> <p> <span class="text-pink-400">var</span> status = <span class="text-green-700">"creating"</span>;
</p> </div> </div> <div class="mt-4"> <button type="button" class="theme-toggle text-secondary-content hover:text-accent cursor-pointer" aria-label="ダークモード切り替え"> <svg width="24" height="24" data-icon="mdi:theme-light-dark"> <symbol id="ai:mdi:theme-light-dark" viewBox="0 0 24 24"><path fill="currentColor" d="M7.5 2c-1.79 1.15-3 3.18-3 5.5s1.21 4.35 3.03 5.5C4.46 13 2 10.54 2 7.5A5.5 5.5 0 0 1 7.5 2m11.57 1.5l1.43 1.43L4.93 20.5L3.5 19.07zm-6.18 2.43L11.41 5L9.97 6l.42-1.7L9 3.24l1.75-.12l.58-1.65L12 3.1l1.73.03l-1.35 1.13zm-3.3 3.61l-1.16-.73l-1.12.78l.34-1.32l-1.09-.83l1.36-.09l.45-1.29l.51 1.27l1.36.03l-1.05.87zM19 13.5a5.5 5.5 0 0 1-5.5 5.5c-1.22 0-2.35-.4-3.26-1.07l7.69-7.69c.67.91 1.07 2.04 1.07 3.26m-4.4 6.58l2.77-1.15l-.24 3.35zm4.33-2.7l1.15-2.77l2.2 2.54zm1.15-4.96l-1.14-2.78l3.34.24zM9.63 18.93l2.77 1.15l-2.53 2.19z"/></symbol><use href="#ai:mdi:theme-light-dark"></use> </svg> </button> <script type="module">function n(){document.querySelectorAll(".theme-toggle").forEach(e=>{const t=e.cloneNode(!0);e.parentNode?.replaceChild(t,e),t.addEventListener("click",()=>{const o=document.documentElement;o.classList.toggle("dark");const s=o.classList.contains("dark");localStorage.setItem("theme",s?"dark":"light")})})}n();document.addEventListener("astro:page-load",n);</script> </div> </div> </aside> <div class="flex-1 space-y-16"> <!-- プロフィールセクション --> <section class="my-20 flex items-center justify-center particle-container relative"> <div class="particle-effect" data-colors="["#fb7185","#f472b6","#c084fc","#a78bfa"]" data-interval="2000"> <div class="flex flex-col items-center gap-4 relative z-1"> <!-- アイコン画像 --> <img src="/images/icon.png" alt="アイコン" class="w-50 h-50 rounded-full"> <!-- 名前と自己紹介 --> <h1 class="text-4xl font-bold">nirila</h1> <p>にりら</p> <div> <p class="text-base-content/70">engineer, creator</p> </div> <ul class="flex gap-4"> <li> <a href="https://github.com/niwaniwa" class="text-primary hover:text-primary/80"> <svg width="1em" height="1em" class="w-6 h-6" data-icon="mdi:github"> <symbol id="ai:mdi:github" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></symbol><use href="#ai:mdi:github"></use> </svg> </a> </li><li> <a href="https://x.com/ni_rilana" class="text-primary hover:text-primary/80"> <svg width="1em" height="1em" class="w-6 h-6" data-icon="mdi:twitter"> <symbol id="ai:mdi:twitter" viewBox="0 0 24 24"><path fill="currentColor" d="M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.2 4.2 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.52 8.52 0 0 1-5.33 1.84q-.51 0-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23"/></symbol><use href="#ai:mdi:twitter"></use> </svg> </a> </li><li> <a href="https://misskey.niri.la/@ni_rilana" class="text-primary hover:text-primary/80"> Misskey </a> </li> </ul> </div> </div> <script type="module">function a(){document.querySelectorAll(".particle-effect").forEach(r=>{const o=JSON.parse(r.getAttribute("data-colors")||"[]"),l=Number(r.getAttribute("data-interval")||2e3);function d(){const t=document.createElement("span");t.classList.add("particle");const s=r.getBoundingClientRect(),n=Math.random()*s.width*1.2,p=Math.random()*s.height*1.4;t.style.left=`${n}px`,t.style.top=`${p}px`,t.style.backgroundColor=o[Math.floor(Math.random()*o.length)];const e=()=>(Math.random()-.5)*60;t.style.setProperty("--dx1",`${e()}px`),t.style.setProperty("--dy1",`${e()}px`),t.style.setProperty("--dx2",`${e()}px`),t.style.setProperty("--dy2",`${e()}px`),t.style.setProperty("--dx3",`${e()}px`),t.style.setProperty("--dy3",`${e()}px`),t.style.setProperty("--dx4",`${e()}px`),t.style.setProperty("--dy4",`${e()}px`),r.appendChild(t),t.addEventListener("animationend",()=>{t.remove()})}setInterval(d,l)})}a();document.addEventListener("astro:page-load",a);</script> </section> <section> <div class="flex justify-between items-center mb-6"> <h2 class="text-2xl font-bold">Works</h2> <a href="/works" class="text-primary text-sm hover:underline">すべて見る →</a> </div> <div class="space-y-8"> </div> </section> <!-- blogs --> <section> <div class="flex justify-between items-center mb-6"> <h2 class="text-2xl font-bold">Blog</h2> <a href="/blog" class="text-primary text-sm hover:underline">
すべて見る →
</a> </div> <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"> <a href="/blog/2025-01-03-meilisearch" class="block group"> <div class="aspect-square rounded-lg overflow-hidden bg-base-200"> <div class="w-full h-full flex items-center justify-center text-5xl group-hover:scale-110 transition-transform duration-300"> 🔍 </div> </div> <div class="mt-2 space-y-1"> <h3 class="font-medium text-sm line-clamp-2 group-hover:text-primary transition-colors"> misskeyに後からmeilisearchを使って検索を入れる </h3> <p class="text-xs text-base-content/50 truncate"> #meilisearch #misskey </p> <time class="text-xs text-base-content/40 block"> 2026/1/3 </time> </div> </a><a href="/blog/2025-01-02-astro" class="block group"> <div class="aspect-square rounded-lg overflow-hidden bg-base-200"> <div class="w-full h-full flex items-center justify-center text-5xl group-hover:scale-110 transition-transform duration-300"> 🚀 </div> </div> <div class="mt-2 space-y-1"> <h3 class="font-medium text-sm line-clamp-2 group-hover:text-primary transition-colors"> 初めてのAstro </h3> <p class="text-xs text-base-content/50 truncate"> #astro #blog #portfolio #web </p> <time class="text-xs text-base-content/40 block"> 2026/1/2 </time> </div> </a><a href="/blog/tailwind" class="block group"> <div class="aspect-square rounded-lg overflow-hidden bg-base-200"> <div class="w-full h-full flex items-center justify-center text-5xl group-hover:scale-110 transition-transform duration-300"> 🎨 </div> </div> <div class="mt-2 space-y-1"> <h3 class="font-medium text-sm line-clamp-2 group-hover:text-primary transition-colors"> Tailwind CSS チートシート </h3> <p class="text-xs text-base-content/50 truncate"> #Tailwind #CSS </p> <time class="text-xs text-base-content/40 block"> 2025/1/1 </time> </div> </a> </div> </section> </div> </div> </main> </div> <footer class="border-t border-gray-200 mt-auto"> <div class="max-w-4xl mx-auto px-4 py-6 text-center text-gray-500 text-sm"> <p>© 2026 niri.la</p> </div> </footer> </body></html>