1<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="icon" type="image/svg+xml" href="/favicon.ico"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="baidu-site-verification" content="codeva-0KnEyy4BGz"><link rel="stylesheet" href="https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work%20Sans"><title>æ¼ç¤º | RYANUO</title>
1<script>!function(){const e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches,t=localStorage.getItem("vueuse-color-scheme")||"auto";("dark"===t||e&&"light"!==t)&&document.documentElement.classList.toggle("dark",!0)}()</script>
1<script type="module" crossorigin="" src="/assets/app-BrzwnDap.js"></script>
1<link rel="stylesheet" crossorigin="" href="/assets/app-DXpkQMLj.css"><link rel="modulepreload" crossorigin="" href="/assets/index-Bv4aNrk_.js"><link rel="modulepreload" crossorigin="" href="/assets/index.vue_vue_type_script_setup_true_lang-BzEzB2Oe.js"><link rel="stylesheet" href="/assets/index-D3iccLH0.css"><meta property="og:title" content="æ¼ç¤º | RYANUO"><meta name="twitter:title" content="æ¼ç¤º | RYANUO"><meta name="description" content="æ¼ç¤º | RYANUO"><meta property="og:description" content="æ¼ç¤º | RYANUO"><meta name="twitter:description" content="æ¼ç¤º | RYANUO"></head><body class="font-sans text-gray-700 dark:text-gray-200"><div id="app" data-server-rendered="true"><!--[--><header class="header z-40" data-v-a34c5769=""><a href="/" class="absolute m-7 mb-0 h-8 w-8 flex select-none flex-items-center outline-none xl:fixed" focusable="false" data-v-a34c5769=""><div data-v-a34c5769=""><img src="/logo.png" class="opacity-75" alt="" srcset=""></div></a><button title="Scroll to top" class="fixed bottom-3 right-3 z-100 h-10 w-10 rounded-full op30 transition duration-300 hover:bg-hex-8883 hover:op100 print:hidden outline-none! op0! pointer-events-none" data-v-a34c5769=""><!--[--><i i-ri-arrow-up-line="" data-v-a34c5769=""></i><!--]--></button><nav class="nav" data-v-a34c5769=""><div class="spacer" data-v-a34c5769=""></div><div class="right" print:op0="" data-v-a34c5769=""><a href="/navs" class="" title="导èª" data-v-a34c5769=""><span class="lt-md:hidden" data-v-a34c5769="">导èª</span><div i-material-symbols-bottom-navigation-outline="" class="md:hidden" data-v-a34c5769=""></div></a><a href="/posts" class="" title="å客" data-v-a34c5769=""><span class="lt-md:hidden" data-v-a34c5769="">å客</span><div i-ri-article-line="" class="md:hidden" data-v-a34c5769=""></div></a><a aria-current="page" href="/demos" class="router-link-active router-link-exact-active" title="æ¼ç¤º" data-v-a34c5769=""><span class="lt-md:hidden" data-v-a34c5769="">æ¼ç¤º</span><div i-ri-screenshot-line="" class="md:hidden" data-v-a34c5769=""></div></a><a href="javascript:void(0)" class="relative" data-v-a34c5769=""><div class="i-mynaui-search-square h-1.3em w-1.3em" data-v-a34c5769=""></div><div id="docsearch" class="absolute left-0 top-0 h-full w-full op0!" data-v-a34c5769=""></div></a><a href="https://github.com/ryanuo" target="_blank" title="GitHub" class="lt-md:hidden" data-v-a34c5769=""><div i-uil-github-alt="" cursor-pointer="" data-v-a34c5769=""></div></a><a href="https://status.ryanuo.cc" target="_blank" title="status" class="lt-m" data-v-a34c5769=""><div class="i-heroicons-solid-status-online cursor-pointer" data-v-a34c5769=""></div></a><a class="flex items-center" href="javascript:void(0)" data-v-a34c5769=""><div class="i-noto-v1-flag-for-flag-china" data-v-a34c5769=""></div></a><a class="select-none" title="Toggle Color Scheme" data-v-a34c5769=""><div i-ri-sun-line="" dark:i-ri-moon-line=""></div></a></div></nav></header><main class=""><!--[--><!----><!----><!----><article><!----><!----><!--[--><div><!--[--><button title="Change theme" class="fixed bottom-3 right-3 z-100 h-10 w-10 rounded-full op30 transition duration-300 hover:bg-hex-8883 hover:op100 print:hidden outline-none!"><!--[--><i i-ant-design-skin-outlined=""></i><!--]--></button><!----><!----><!----><!--[--><div class="mx-auto p-2 container sm:p-4 dark:text-gray-800"><h2 class="mb-4 text-2xl font-semibold leading-tight"><span>Hello! ðð¾This is my portfolio pageï¼</span><div class="checkbox-wrapper-30 inline-block"><span class="checkbox"><input type="checkbox" checked="" indeterminate="false"><svg><use xlink:href="#checkbox-30" class="checkbox"></use></svg></span><svg xmlns="http://www.w3.org/2000/svg" style="display:none"><symbol id="checkbox-30" viewBox="0 0 22 22"><path fill="none" stroke="currentColor" d="M5.5,11.3L9,14.8L20.2,3.3l0,0c-0.5-1-1.5-1.8-2.7-1.8h-13c-1.7,0-3,1.3-3,3v13c0,1.7,1.3,3,3,3h13 c1.7,0,3-1.3,3-3v-13c0-0.4-0.1-0.8-0.3-1.2"></path></symbol></svg></div></h2><div class="mb-4 text-xs"><div class="flex items-center justify-between"><div class="flex flex-wrap gap-2"><!--[--><button class="bg-black text-white cursor-pointer rounded p-1 focus:outline-none">2026</button><button class="bg-black text-white cursor-pointer rounded p-1 focus:outline-none">2025</button><button class="bg-black text-white cursor-pointer rounded p-1 focus:outline-none">2024</button><button class="bg-black text-white cursor-pointer rounded p-1 focus:outline-none">2023</button><button class="bg-black text-white cursor-pointer rounded p-1 focus:outline-none">2022</button><button class="bg-black text-white cursor-pointer rounded p-1 focus:outline-none">2021</button><!--]--></div><button class="cursor-pointer rounded border px-3 py-1 transition hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black">Show More</button></div></div><div class="overflow-x-auto"><table class="min-w-full text-xs"><colgroup><col><col><col><col><col></colgroup><thead class="dark:bg-gray-300"><tr class="text-left"><th class="p-3">Year</th><th class="p-3">Name</th><th class="p-3">Description</th><th class="p-3">Tags</th><th class="p-3">
1Details</th></tr></thead><tbody><!--[--><tr class="border-b border-opacity-20 dark:border-gray-300 dark:bg-gray-50"><td class="p-3"><p>2026</p></td><td class="p-3"><div class="relative inline-block text-blue-500 underline underline-offset-2 underline-dashed" data-v-fb7536d3=""><a href="https://github.com/ryanuo/skills" class="text-black dark:text-white" data-v-fb7536d3=""><!--[-->skills<!--]--></a><!----></div></td><td class="p-3"><p>æ²æ·çæè½ï¼æç»å®åä¸</p></td><td class="p-3"><ul><!--[--><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">md</li><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">python</li><!--]--></ul></td><td class="p-3"><i class="i-ri-fullscreen-exit-fill cursor-pointer transition-all duration-[0.6s] ease-[cubic-bezier(0.175,0.885,0.32,1.275)] hover:scale-[1.2]"></i></td></tr><tr class="border-b border-opacity-20 dark:border-gray-300 dark:bg-gray-50"><td class="p-3"><p>2026</p></td><td class="p-3"><div class="relative inline-block text-blue-500 underline underline-offset-2 underline-dashed" data-v-fb7536d3=""><a href="https://draw.ryanuo.cc" class="text-black dark:text-white" data-v-fb7536d3=""><!--[-->ai-draw-io<!--]--></a><!----></div></td><td class="p-3"><p>åºäºai-draw-ioçå¨çº¿æ¼ç¤º</p></td><td class="p-3"><ul><!--[--><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">next</li><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">react</li><!--]--></ul></td><td class="p-3"><i class="i-ri-fullscreen-exit-fill cursor-pointer transition-all duration-[0.6s] ease-[cubic-bezier(0.175,0.885,0.32,1.275)] hover:scale-[1.2]"></i></td></tr><tr class="border-b border-opacity-20 dark:border-gray-300 dark:bg-gray-50"><td class="p-3"><p>2025</p></td><td class="p-3"><div class="relative inline-block text-blue-500 underline underline-offset-2 underline-dashed" data-v-fb7536d3=""><a href="https://eat.ryanuo.cc" class="text-black dark:text-white" data-v-fb7536d3=""><!--[-->ä»å¤©åç¹ä»ä¹<!--]--></a><!----></div></td><td class="p-3"><p>ä»å¤©åç¹ä»ä¹ï¼çå³çå·¥å
·ï¼å¸®å©ä½ å¿«ééæ©åéçèè°±ã</p></td><td class="p-3"><ul><!--[--><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">nuxt</li><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">vue3</li><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">unocss</li><!--]--></ul></td><td class="p-3"><i class="i-ri-fullscreen-exit-fill cursor-pointer transition-all duration-[0.6s] ease-[cubic-bezier(0.175,0.885,0.32,1.275)] hover:scale-[1.2]"></i></td></tr><tr class="border-b border-opacity-20 dark:border-gray-300 dark:bg-gray-50"><td class="p-3"><p>2025</p></td><td class="p-3"><div class="relative inline-block text-blue-500 underline underline-offset-2 underline-dashed" data-v-fb7536d3=""><a href="https://github.com/ryanuo/screenshot" class="text-black dark:text-white" data-v-fb7536d3=""><!--[-->æªå¾ API<!--]--></a><!----></div></td><td class="p-3"><p>æªå¾apiï¼æ¯æé¨ç½²vercelãnetlify</p></td><td class="p-3"><ul><!--[--><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">puppeteer</li><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">Playwright</li>
1<!--]--></ul></td><td class="p-3"><i class="i-ri-fullscreen-exit-fill cursor-pointer transition-all duration-[0.6s] ease-[cubic-bezier(0.175,0.885,0.32,1.275)] hover:scale-[1.2]"></i></td></tr><tr class="border-b border-opacity-20 dark:border-gray-300 dark:bg-gray-50"><td class="p-3"><p>2025</p></td><td class="p-3"><div class="relative inline-block text-blue-500 underline underline-offset-2 underline-dashed" data-v-fb7536d3=""><a href="https://github.com/NxResume/nuxt-resume-editor" class="text-black dark:text-white" data-v-fb7536d3=""><!--[-->Markdown ç®åç¼è¾å¨<!--]--></a><!----></div></td><td class="p-3"><p>ä¸ä¸ªåºäº Nuxt 3 ç Markdown ç®åç¼è¾å¨ï¼æ¯æå®æ¶é¢è§åä¸é®å¯¼åº PDFã</p></td><td class="p-3"><ul><!--[--><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">nuxt3</li><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">markdown</li><!--]--></ul></td><td class="p-3"><i class="i-ri-fullscreen-exit-fill cursor-pointer transition-all duration-[0.6s] ease-[cubic-bezier(0.175,0.885,0.32,1.275)] hover:scale-[1.2]"></i></td></tr><tr class="border-b border-opacity-20 dark:border-gray-300 dark:bg-gray-50"><td class="p-3"><p>2025</p></td><td class="p-3"><div class="relative inline-block text-blue-500 underline underline-offset-2 underline-dashed" data-v-fb7536d3=""><a href="https://github.com/ryanuo/N-Tab" class="text-black dark:text-white" data-v-fb7536d3=""><!--[-->Tabï¼æ ç¾é¡µæ©å±ï¼<!--]--></a><!----></div></td><td class="p-3"><p>ä¸ä¸ªéç¨äº Chrome æµè§å¨çæ ç¾é¡µæ©å±ã</p></td><td class="p-3"><ul><!--[--><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">Chrome</li><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">Extensionï¼æ©å±ï¼</li><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">Vue3</li>
1<!--]--></ul></td><td class="p-3"><i class="i-ri-fullscreen-exit-fill cursor-pointer transition-all duration-[0.6s] ease-[cubic-bezier(0.175,0.885,0.32,1.275)] hover:scale-[1.2]"></i></td></tr><tr class="border-b border-opacity-20 dark:border-gray-300 dark:bg-gray-50"><td class="p-3"><p>2024</p></td><td class="p-3"><div class="relative inline-block text-blue-500 underline underline-offset-2 underline-dashed" data-v-fb7536d3=""><a href="https://github.com/ryanuo/markdown-it-diagram" class="text-black dark:text-white" data-v-fb7536d3=""><!--[-->Markdown-It-Diagram<!--]--></a><!----></div></td><td class="p-3"><p>markdown-it-diagram æ¯ä¸ä¸ª markdown-it å¾è¡¨æ件ãå®æ¯æç¾äººé±¼ãplantumlãå®æ¯æ缩æ¾ã移å¨çæ§å¶ã</p></td><td class="p-3"><ul><!--[--><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">markdown-it</li><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">mermaid</li><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">plantuml</li><!--]--></ul></td><td class="p-3"><i class="i-ri-fullscreen-exit-fill cursor-pointer transition-all duration-[0.6s] ease-[cubic-bezier(0.175,0.885,0.32,1.275)] hover:scale-[1.2]"></i></td></tr><tr class="border-b border-opacity-20 dark:border-gray-300 dark:bg-gray-50"><td class="p-3"><p>2024</p></td><td class="p-3"><div class="relative inline-block text-blue-500 underline underline-offset-2 underline-dashed" data-v-fb7536d3=""><a href="https://github.com/ryanuo/ryanuo.cc" class="text-black dark:text-white" data-v-fb7536d3=""><!--[-->个人主页<!--]--></a><!----></div></td><td class="p-3"><p>æç个人ç½ç«å
æ¬ä¸ªäººç®ä»ãåç§ç¬¬ä¸æ¹å¹³å°é¾æ¥ãå端éç¨ç¥è¯æ´çãå客æç« ã项ç®ä»ç»ä»¥åæ¼ç¤ºå±ç¤ºãç±Antfu 大佬设计</p></td><td class="p-3"><ul><!--[--><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">Vue3</li><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">Markdown</li><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">UnoCSS</li><!--]--></ul></td><td class="p-3"><i class="i-ri-fullscreen-exit-fill cursor-pointer transition-all duration-[0.6s] ease-[cubic-bezier(0.175,0.885,0.32,1.275)] hover:scale-[1.2]"></i></td></tr><tr class="border-b border-opacity-20 dark:border-gray-300 dark:bg-gray-50"><td class="p-3"><p>2024</p></td><td class="p-3"><div class="relative inline-block text-blue-500 underline underline-offset-2 underline-dashed" data-v-fb7536d3=""><a href="https://gitee.com/rbozo/navs" class="text-black dark:text-white" data-v-fb7536d3=""><!--[-->èªå¨æ£æ¥é¾æ¥<!--]--></a><!----></div></td><td class="p-3"><p>å端导èªå¤é¨é¾æ¥æ±æ»ï¼æ¯æèªå¨é¾æ¥ç¶ææ£æ¥</p></td><td class="p-3"><ul><!--[--><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">Python</li><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">Github Action</li><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">Yaml</li><!--]--></ul></td><td class="p-3"><i class="i-ri-fullscreen-exit-fill cursor-pointer transition-all duration-[0.6s] ease-[cubic-bezier(0.175,0.885,0.32,1.275)] hover:scale-[1.2]"></i></td></tr><tr class="border-b border-opacity-20 dark:border-gray-300 dark:bg-gray-50"><td class="p-3"><p>2023</p></td><td class="p-3"><div class="relative inline-block text-blue-500 underline underline-offset-2 underline-dashed" data-v-fb7536d3=""><a href="https://cpp.ryanuo.cc" class="text-black dark:text-white" data-v-fb7536d3=""><!--[-->C++ åèæå<!--]--></a><!----></div></td><td class="p-3"><p>纯å端çC++åèæåï¼åºäºgithub pages</p></td><td class="p-3"><ul><!--[--><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">vitepress</li><li class="mb-1 mr-1 inline-block rounded bg-gray-200 px-2 py-1 text-xs">cpp</li><!--]--></ul></td><td class="p-3"><i class="i-ri-fullscreen-exit-fill cursor-pointer transition-all duration-[0.6s] ease-[cubic-bezier(0.175,0.885,0.32,1.275)] hover:scale-[1.2]"></i></td></tr><!--]--></tbody></table></div></div><!--[--><!--teleport start--><!--teleport end--><!--[--><!--]--><!--]--><!--]--><!--]--></div><!--]--></article><!----><!----><!--]--><!----><!----></main><!----><!--]--></div>
1<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"f96d61325176422db2d57c1bd99bc508","r":1,"spa":2}' crossorigin="anonymous"></script>
1 2</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.