[{"data":1,"prerenderedAt":1371},["ShallowReactive",2],{"blog-posts":3},[4,520,668,764],{"id":5,"title":6,"aside":7,"authors":8,"badges":13,"banner":13,"body":14,"breadcrumb":7,"category":487,"collapse":7,"description":488,"editLink":7,"extension":489,"footer":13,"fullpage":7,"head":13,"icon":13,"main":13,"meta":490,"navBadges":13,"navTruncate":7,"navigation":7,"next":13,"ogImage":491,"path":494,"prev":13,"prevNext":7,"publishedAt":495,"readingTime":496,"robots":13,"schemaOrg":13,"seo":497,"sidebar":13,"sitemap":507,"stem":514,"tags":515,"toc":13,"__hash__":519},"content\u002Fblogs\u002Fdesigning-umi-lab-landing-page.md","Designing the Digital Flagship for UMI Lab: Where Wave Physics Meets Modern Web Design",false,[9],{"name":10,"to":11,"target":12},"No Name Studio","https:\u002F\u002Fnnsvn.me","_blank",null,{"type":15,"value":16,"toc":468},"minimark",[17,21,36,39,49,52,57,67,70,97,104,109,121,125,132,153,155,159,162,169,175,179,182,208,212,223,225,229,232,264,270,273,293,296,298,302,305,308,314,317,349,352,354,358,361,364,370,384,386,390,393,403,407,437,439,443,446,449,455],[18,19,20],"p",{},"Academic laboratory websites have a reputation problem. Too often, world-class research in mechanics, acoustics, and artificial intelligence is hidden behind walls of unformatted text, decade-old tables, and broken PDF links. The brilliance of the science simply doesn't translate onto the screen.",[18,22,23,24,28,29,31,32,35],{},"When ",[25,26,27],"strong",{},"UMI Lab"," (Ultrasonics & Mechanics Inspection Lab) at VNU University of Engineering and Technology partnered with ",[25,30,10],{},", our brief was clear: ",[25,33,34],{},"design and build a digital home worthy of their research",".",[18,37,38],{},"Led by Assoc. Prof. Dr. Phan Hải Đăng, UMI Lab works at the intersection of wave propagation, guided-wave structural health monitoring (SHM), non-destructive evaluation (NDE), bone quantitative ultrasound, and physics-informed deep learning. They collaborate with premier research institutions across the US, Canada, South Korea, Japan, and Australia.",[18,40,41,42,35],{},"Here is the story of how we crafted, animated, and engineered the landing page for ",[43,44,48],"a",{"href":45,"rel":46},"https:\u002F\u002Flab.nnsvn.me",[47],"nofollow","UMI Lab (lab.nnsvn.me)",[50,51],"hr",{},[53,54,56],"h2",{"id":55},"_1-the-design-vision-precision-meets-atmosphere","1. The Design Vision: Precision Meets Atmosphere",[18,58,59,60,63,64,35],{},"A research group studying wave mechanics needs an aesthetic that balances ",[25,61,62],{},"rigorous academic credibility"," with ",[25,65,66],{},"forward-looking innovation",[18,68,69],{},"We established a design language built around three core principles:",[71,72,73,85,91],"ol",{},[74,75,76,79,80,84],"li",{},[25,77,78],{},"Atmospheric Depth:"," Deep obsidian backgrounds (",[81,82,83],"code",{},"#0a0a0c",") contrasted with electric violet accents and bioluminescent gradients reminiscent of acoustic wave pulses.",[74,86,87,90],{},[25,88,89],{},"High-Density Legibility:"," Presenting extensive academic credentials—over 50 ISI\u002FScopus papers, 10 funded research grants, h-index citations, and international appointments—without overwhelming visitors.",[74,92,93,96],{},[25,94,95],{},"Tactile Interaction:"," Making abstract mathematical mechanics tangible through deliberate motion, interactive cards, and cursor-reactive feedback.",[18,98,99],{},[100,101],"img",{"alt":102,"src":103},"UMI Lab Hero and Bento Grid Overview","\u002Fimages\u002Fblogs\u002Fumi-lab\u002Fumi-lab-hero-overview.gif",[105,106,108],"h3",{"id":107},"the-hero-experience","The Hero Experience",[18,110,111,112,116,117,120],{},"Rather than a generic university banner, the hero immediately grounds visitors in the human and scientific dimension of the lab. A crisp, bottom-left anchored typography layout (",[113,114,115],"em",{},"\"Understanding Structures Through Waves\"",") pairs with the lab's collaborative team imagery. Smooth entry animations powered by ",[81,118,119],{},"motion-v"," ensure the page reveals itself with fluidity, while direct CTA buttons allow immediate navigation to core research domains or international partnerships.",[105,122,124],{"id":123},"the-bento-grid-architecture","The Bento Grid Architecture",[18,126,127,128,131],{},"To organize the lab's multifaceted achievements, we implemented a modular ",[25,129,130],{},"Bento Grid"," layout. In a single cohesive viewport, visitors can grasp:",[133,134,135,141,147],"ul",{},[74,136,137,140],{},[25,138,139],{},"Key Scientific Metrics:"," 15+ years of research, 50+ ISI\u002FScopus publications, 580+ citations, and 2 foundational textbooks.",[74,142,143,146],{},[25,144,145],{},"The Four Pillars:"," Wave Propagation, NDE & SHM, Bone Quantitative Ultrasound (QUS), and Physics-Informed AI.",[74,148,149,152],{},[25,150,151],{},"Visual Rhythm:"," Balanced card proportions with subtle slate borders, high-contrast typography, and purposeful iconography.",[50,154],{},[53,156,158],{"id":157},"_2-interactive-research-themes-the-apple-style-card-carousel","2. Interactive Research Themes: The Apple-Style Card Carousel",[18,160,161],{},"One of the central design challenges was how to present complex scientific topics. Traditional academic portals either reduce research directions to a bullet list or bury them inside separate pages.",[18,163,164,165,168],{},"We took inspiration from modern editorial showcases and created an ",[25,166,167],{},"Apple Card Carousel"," component:",[18,170,171],{},[100,172],{"alt":173,"src":174},"Interactive Research Themes Showcase and Modal","\u002Fimages\u002Fblogs\u002Fumi-lab\u002Fumi-lab-research-carousel.gif",[105,176,178],{"id":177},"dynamic-visual-schematics","Dynamic Visual Schematics",[18,180,181],{},"Each card features custom-crafted vector graphics representing the physical reality of the research:",[133,183,184,190,196,202],{},[74,185,186,189],{},[25,187,188],{},"Wave Mechanics:"," Elastodynamic reciprocity and wave scattering around structural cavities.",[74,191,192,195],{},[25,193,194],{},"Structural Acoustics:"," Sinusoidal dispersion curves and guided waves propagating through multilayered composite plates.",[74,197,198,201],{},[25,199,200],{},"Biomedical Ultrasonics:"," Cross-sectional acoustic wave guides in cortical bone.",[74,203,204,207],{},[25,205,206],{},"Data-Driven Mechanics:"," Neural networks and physics-informed inverse problem formulations.",[105,209,211],{"id":210},"frictionless-deep-dives","Frictionless Deep Dives",[18,213,214,215,218,219,222],{},"Visitors can swipe smoothly across themes. When a card is clicked, it expands via an elegant fluid modal dialog (",[81,216,217],{},"AppleCard"," + ",[81,220,221],{},"ProjectDetails","). Users can read the technical background, theoretical formulations, and experimental parameters without leaving the flow of the landing page, then dismiss it with a single keystroke or click.",[50,224],{},[53,226,228],{"id":227},"_3-micro-interactions-spotlight-methodology-cards","3. Micro-Interactions: Spotlight Methodology Cards",[18,230,231],{},"Research is not just about final publications; it's about the scientific methodology that produces them.",[18,233,234,235,238,239,242,243,238,246,242,249,238,252,255,256,259,260,263],{},"To articulate UMI Lab's workflow—",[25,236,237],{},"Formulate"," ",[113,240,241],{},"(open problem identification)"," $\\rightarrow$ ",[25,244,245],{},"Model",[113,247,248],{},"(analytical, FEM, BEM, and machine learning)",[25,250,251],{},"Validate",[113,253,254],{},"(experimental testing and peer-reviewed verification)","—we built interactive ",[25,257,258],{},"Spotlight Cards"," (",[81,261,262],{},"CardSpotlight",").",[18,265,266],{},[100,267],{"alt":268,"src":269},"Interactive Methodology Cards with Mouse Spotlight","\u002Fimages\u002Fblogs\u002Fumi-lab\u002Fumi-lab-process-spotlight.gif",[18,271,272],{},"As the cursor traverses the cards, a dynamic radial gradient tracks the pointer in real-time:",[133,274,275,281,287],{},[74,276,277,280],{},[25,278,279],{},"Warm Amber Glow"," for problem formulation and hypothesis generation.",[74,282,283,286],{},[25,284,285],{},"Electric Blue Glow"," for computational modeling and algorithmic simulation.",[74,288,289,292],{},[25,290,291],{},"Emerald Green Glow"," for experimental validation and practical deployment.",[18,294,295],{},"These micro-interactions reward user exploration while keeping the UI clean and unobtrusive.",[50,297],{},[53,299,301],{"id":300},"_4-academic-reach-the-international-collaboration-network","4. Academic Reach: The International Collaboration Network",[18,303,304],{},"Science advances through global collaboration. UMI Lab actively partners with world-leading universities across Asia, North America, and Australia.",[18,306,307],{},"Communicating this global presence was critical for attracting prospective graduate students, postdocs, and international research grants.",[18,309,310],{},[100,311],{"alt":312,"src":313},"Global Collaborations Network Carousel","\u002Fimages\u002Fblogs\u002Fumi-lab\u002Fumi-lab-global-network.gif",[18,315,316],{},"We framed this section against an atmospheric twilight sky backdrop with layered backdrop-filter blurs. An interactive carousel showcases key partner institutions, including:",[133,318,319,325,331,337,343],{},[74,320,321,324],{},[25,322,323],{},"Northwestern University"," (Evanston, USA) — Wave scattering research and PhD mentorship.",[74,326,327,330],{},[25,328,329],{},"University of Alberta"," (Edmonton, Canada) — Bone quantitative ultrasound and signal processing.",[74,332,333,336],{},[25,334,335],{},"Pusan National University"," (Busan, South Korea) — Foundational reciprocity research.",[74,338,339,342],{},[25,340,341],{},"RMIT University"," (Melbourne, Australia) — Applied mechanics collaboration.",[74,344,345,348],{},[25,346,347],{},"Institute of Science Tokyo"," (Tokyo, Japan) — Computational mechanics and wave modeling.",[18,350,351],{},"Each partner card highlights location badges, institutional crests, and direct external links, paired with a personal reflection from the lab director on the role of cross-border partnerships.",[50,353],{},[53,355,357],{"id":356},"_5-dual-theme-design-dark-mode-light-mode","5. Dual-Theme Design: Dark Mode & Light Mode",[18,359,360],{},"Academic researchers work in varied environments—from darkened laser and ultrasound testing facilities to brightly lit lecture halls and conference rooms. A first-class reading experience requires an adaptive design system.",[18,362,363],{},"We engineered a dual-mode system with seamless color transitions:",[18,365,366],{},[100,367],{"alt":368,"src":369},"Adaptive Dark and Light Theme Switcher","\u002Fimages\u002Fblogs\u002Fumi-lab\u002Fumi-lab-theme-toggle.gif",[133,371,372,378],{},[74,373,374,377],{},[25,375,376],{},"Dark Mode:"," Deep obsidian surfaces, subtle glass borders, luminous purple focal points, and low eye-strain for extended reading.",[74,379,380,383],{},[25,381,382],{},"Light Mode:"," Clean alabaster surfaces, crisp charcoal typography, soft shadows, and high contrast for presentation displays and bright ambient environments.",[50,385],{},[53,387,389],{"id":388},"_6-under-the-hood-the-engineering-stack","6. Under the Hood: The Engineering Stack",[18,391,392],{},"A beautiful design is only as good as the technology powering it. For UMI Lab, performance, accessibility, and maintenance were paramount.",[394,395,400],"pre",{"className":396,"code":398,"language":399},[397],"language-text","Frontend:       Nuxt 4 + Vue 3\nStyling:        Tailwind CSS v4 + Radix UI Primitives (Reka UI)\nMotion:         Motion-V (Framer Motion for Vue)\nContent Engine: @nuxt\u002Fcontent (Git-backed Markdown & YAML)\nInternational:  @nuxtjs\u002Fi18n (Bilingual English & Vietnamese)\nDeployment:     Cloudflare Pages \u002F Workers Edge Network\n","text",[81,401,398],{"__ignoreMap":402},"",[105,404,406],{"id":405},"key-engineering-highlights","Key Engineering Highlights",[71,408,409,415,425,431],{},[74,410,411,414],{},[25,412,413],{},"Sub-second Edge Performance:"," By pairing Nuxt's static site generation (SSG) with Cloudflare's global edge network, pages load almost instantaneously worldwide, even on constrained university networks.",[74,416,417,420,421,424],{},[25,418,419],{},"Git-Backed Content Management:"," Publications, ongoing grants, team members, and research themes are defined in clean YAML files (",[81,422,423],{},"content\u002Flanding.yml","). The lab can update citations and new papers via pull requests without touching frontend code.",[74,426,427,430],{},[25,428,429],{},"Bilingual by Architecture:"," Full support for both Vietnamese and English locales, allowing local students and international collaborators to access information in their preferred language.",[74,432,433,436],{},[25,434,435],{},"100\u002F100 Lighthouse Standards:"," Semantic HTML, optimized image formats (WebP\u002FAVIF with automated responsive sizing), and accessible ARIA attributes across all interactive dialogs and carousels.",[50,438],{},[53,440,442],{"id":441},"conclusion-a-digital-flagship-for-modern-science","Conclusion: A Digital Flagship for Modern Science",[18,444,445],{},"The new UMI Lab landing page demonstrates that academic websites do not have to settle for boring, static templates. By combining thoughtful typography, interactive data visualizations, and modern web engineering, we built a digital presence that honors the lab's scientific rigor while inspiring the next generation of researchers.",[18,447,448],{},"Explore the live site and experience the interactions firsthand:",[450,451],"ct-card",{"description":452,"icon":453,"target":12,"title":454,"to":45},"Explore the live landing page, team directory, and research publications at lab.nnsvn.me","lucide:globe","Visit UMI Lab Official Website",[18,456,457],{},[113,458,459,460,463,464,35],{},"Designed and engineered with pride by ",[43,461,10],{"href":11,"rel":462},[47],". Need a digital flagship for your lab, startup, or product? ",[43,465,467],{"href":466},"mailto:contact@nnsvn.me","Get in touch",{"title":402,"searchDepth":469,"depth":469,"links":470},2,[471,476,480,481,482,483,486],{"id":55,"depth":469,"text":56,"children":472},[473,475],{"id":107,"depth":474,"text":108},3,{"id":123,"depth":474,"text":124},{"id":157,"depth":469,"text":158,"children":477},[478,479],{"id":177,"depth":474,"text":178},{"id":210,"depth":474,"text":211},{"id":227,"depth":469,"text":228},{"id":300,"depth":469,"text":301},{"id":356,"depth":469,"text":357},{"id":388,"depth":469,"text":389,"children":484},[485],{"id":405,"depth":474,"text":406},{"id":441,"depth":469,"text":442},"Case Study","How No Name Studio designed and built a high-performance, interactive landing page for UMI Lab — translating cutting-edge ultrasonic wave mechanics, biomedical acoustics, and physics-informed AI into an immersive digital presence.","md",{"draft":7},{"url":492,"props":493},"\u002Fimages\u002Fblogs\u002Fumi-lab\u002Fumi-lab-cover.png",{},"\u002Fblogs\u002Fdesigning-umi-lab-landing-page","2026-10-17",8,{"title":498,"description":499,"ogImage":492,"keywords":500},"Designing the Digital Flagship for UMI Lab | No Name Studio","A comprehensive case study on how No Name Studio designed and engineered the landing page for UMI Lab at VNU-UET, blending interactive bento grids, fluid carousels, and scientific precision.",[27,501,502,487,503,504,10,505,506],"Academic Web Design","Nuxt 4","UI\u002FUX Design","Scientific Lab Website","Motion Design","Tailwind CSS",{"loc":494,"images":508},[509,510,511,512,513],{"loc":103},{"loc":174},{"loc":269},{"loc":313},{"loc":369},"blogs\u002Fdesigning-umi-lab-landing-page",[516,487,517,518],"Design","Nuxt","Engineering","Z7sXJk4cs7vogoFe913sDfdhQP33H9lKgy3Jime7exc",{"id":521,"title":522,"aside":7,"authors":523,"badges":13,"banner":13,"body":525,"breadcrumb":7,"category":645,"collapse":7,"description":646,"editLink":7,"extension":489,"footer":13,"fullpage":7,"head":13,"icon":13,"main":13,"meta":647,"navBadges":13,"navTruncate":7,"navigation":7,"next":13,"ogImage":648,"path":650,"prev":13,"prevNext":7,"publishedAt":651,"readingTime":652,"robots":13,"schemaOrg":13,"seo":653,"sidebar":13,"sitemap":662,"stem":663,"tags":664,"toc":13,"__hash__":667},"content\u002Fblogs\u002Fdeskmate-introduction.md","Introducing DeskMate: A Local-First AI Companion for Your Workday",[524],{"name":10,"to":11,"target":12},{"type":15,"value":526,"toc":638},[527,530,537,542,546,549,552,556,559,585,588,592,595,598,601,605,608,611,615,618,624,629],[18,528,529],{},"Your calendar tracks meetings. Your task manager tracks deadlines. Neither tells you that you've worked for two hours without a break.",[18,531,532,533,536],{},"We're building ",[25,534,535],{},"DeskMate",", a local-first desktop AI companion that helps you understand how you work and take better care of yourself while doing it. It turns workday signals into small, useful actions: a timely break, a posture reset, or a clearer picture of the habits worth changing.",[18,538,539],{},[25,540,541],{},"DeskMate is in development. This is a preview of what we're building, not a public launch.",[53,543,545],{"id":544},"built-for-people-who-work-at-a-computer","Built for People Who Work at a Computer",[18,547,548],{},"We're starting with developers, designers, freelancers, and remote workers who spend long stretches at a desk. The problem isn't a lack of wellness advice. It's remembering to act on it when you're deep in work.",[18,550,551],{},"We're designing DeskMate to fit into that workday as a friendly desktop companion, bringing relevant context and gentle reminders to you instead of another dashboard to check.",[53,553,555],{"id":554},"from-workday-signals-to-useful-actions","From Workday Signals to Useful Actions",[18,557,558],{},"Our current prototype brings together work-rhythm tracking, optional posture feedback, mood check-ins, reports, and companion chat. The goal is practical:",[133,560,561,567,573,579],{},[74,562,563,566],{},[25,564,565],{},"Notice long sessions."," Understand continuous work, breaks, context switching, and late-night habits.",[74,568,569,572],{},[25,570,571],{},"Make small adjustments."," Use optional posture feedback and reminders to prompt a reset.",[74,574,575,578],{},[25,576,577],{},"Add your own context."," Check in about how you feel rather than have AI guess your mood.",[74,580,581,584],{},[25,582,583],{},"Learn from the day."," Turn activity summaries into readable insights and a concrete next step.",[18,586,587],{},"The AI layer helps explain those signals in plain language. Core scoring is rule-based, and reports have a non-AI fallback. We want AI to make the information more useful, not turn uncertain data into confident conclusions.",[53,589,591],{"id":590},"local-first-with-you-in-control","Local-First, With You in Control",[18,593,594],{},"DeskMate's architecture starts with local processing and local storage. The activity tracker is off by default; when enabled, it stores daily activity summaries on your device. Window titles and browser URLs are also off by default.",[18,596,597],{},"Optional posture processing runs locally without storing raw camera frames. AI features use processed events and summaries rather than camera images. Local-first doesn't mean every AI feature runs offline: any cloud-backed capabilities need clear data boundaries and user choice.",[18,599,600],{},"We're building a personal companion, not an employee-monitoring product. DeskMate is about work habits and everyday well-being, not medical diagnosis.",[53,602,604],{"id":603},"starting-focused-built-to-grow","Starting Focused, Built to Grow",[18,606,607],{},"Our first focus is work rhythm, posture, check-ins, and useful daily feedback. The modular architecture lets us add new sources of context without requiring everyone to enable everything.",[18,609,610],{},"Calendar and wearable integrations, recovery insights, and richer tool-assisted workflows are future directions—not features we're announcing as available today. We haven't announced a public release date or pricing.",[53,612,614],{"id":613},"help-shape-deskmate","Help Shape DeskMate",[18,616,617],{},"If you regularly forget to take breaks or want a more private way to understand your work habits, we'd like to hear from you.",[18,619,620,623],{},[25,621,622],{},"Email us to express interest in early access."," Tell us what you do, what makes your workday difficult, and the one thing you'd want DeskMate to help with first.",[450,625],{"icon":626,"title":627,"to":628},"lucide:mail","Help shape DeskMate — ask about early access","mailto:contact@nnsvn.me?subject=DeskMate%20Early%20Access",[18,630,631],{},[113,632,633,634,637],{},"Built by ",[43,635,10],{"href":11,"rel":636},[47],". Better workdays, one small action at a time.",{"title":402,"searchDepth":469,"depth":469,"links":639},[640,641,642,643,644],{"id":544,"depth":469,"text":545},{"id":554,"depth":469,"text":555},{"id":590,"depth":469,"text":591},{"id":603,"depth":469,"text":604},{"id":613,"depth":469,"text":614},"Product","Meet DeskMate, our upcoming local-first desktop AI companion for healthier work habits. Designed to turn workday signals into useful actions, with privacy at its core.",{"draft":7},{"props":649},{},"\u002Fblogs\u002Fdeskmate-introduction","2026-10-07",4,{"title":654,"description":655,"keywords":656},"DeskMate — A Local-First AI Work Companion | No Name Studio","Introducing DeskMate, an upcoming privacy-first desktop companion for healthier work habits, context-aware reminders, and AI-powered workday insights.",[535,657,658,659,660,661,10],"AI work companion","local-first","privacy-first","work wellness","desktop companion",{"loc":650},"blogs\u002Fdeskmate-introduction",[535,665,666,645],"AI","Privacy","yKXYw3C_WnZaQLyv-Zg4VtVc2kmpSrbuqEk688IGe9A",{"id":669,"title":670,"aside":7,"authors":671,"badges":13,"banner":13,"body":673,"breadcrumb":7,"category":740,"collapse":7,"description":741,"editLink":7,"extension":489,"footer":13,"fullpage":7,"head":13,"icon":13,"main":13,"meta":742,"navBadges":13,"navTruncate":7,"navigation":7,"next":13,"ogImage":743,"path":746,"prev":13,"prevNext":7,"publishedAt":747,"readingTime":474,"robots":13,"schemaOrg":13,"seo":748,"sidebar":13,"sitemap":757,"stem":759,"tags":760,"toc":13,"__hash__":763},"content\u002Fblogs\u002Fcodex-community-hackathon-hanoi.md","No Name Studio Is Joining Codex Community Hackathon — Hanoi",[672],{"name":10,"to":11,"target":12},{"type":15,"value":674,"toc":736},[675,682,685,688,692,695,698,715,719,722,728,733],[18,676,677,678,681],{},"We’re proud to share that ",[25,679,680],{},"No Name Studio will be joining Codex Community Hackathon — Hanoi"," on June 27, 2026.",[18,683,684],{},"This event brings together builders, engineers, designers, founders, and product-minded teams for a full day of building with Codex. The goal is simple and ambitious: turn ideas into working AI product prototypes, learn from the community, and show what focused teams can ship in a day.",[18,686,687],{},"For us, this is more than attending a hackathon. It is an opportunity to be in the room with people who care about making useful products, moving quickly, and learning by building.",[53,689,691],{"id":690},"why-were-excited","Why We’re Excited",[18,693,694],{},"At No Name Studio, we work with founders and teams to design, build, and ship production-grade software. Events like Codex Community Hackathon — Hanoi are a reminder of why we enjoy this work: the best ideas often start with a sharp problem, a small team, and a willingness to prototype fast.",[18,696,697],{},"We’re especially excited to connect with people exploring:",[133,699,700,703,706,709,712],{},[74,701,702],{},"AI-native product workflows",[74,704,705],{},"Practical automation for real business problems",[74,707,708],{},"Developer tools and internal platforms",[74,710,711],{},"Product design that makes advanced technology easier to use",[74,713,714],{},"Engineering partnerships that turn prototypes into production systems",[53,716,718],{"id":717},"open-to-build-and-connect","Open to Build and Connect",[18,720,721],{},"If you’ll be at the hackathon, we’d be happy to meet. Whether you’re building a product, looking for technical collaborators, exploring AI ideas, or just want to exchange notes with another team that loves shipping software, come say hello.",[18,723,724,725,35],{},"We’re always open to meaningful opportunities to ",[25,726,727],{},"build, connect, and collaborate",[450,729],{"icon":730,"target":12,"title":731,"to":732},"lucide:calendar-days","View the event on Luma","https:\u002F\u002Fluma.com\u002Fh16o7bq4?tk=HDGOWN",[18,734,735],{},"See you in Hanoi.",{"title":402,"searchDepth":469,"depth":469,"links":737},[738,739],{"id":690,"depth":469,"text":691},{"id":717,"depth":469,"text":718},"Community","We’re proud to join Codex Community Hackathon — Hanoi, a one-day gathering for builders shipping real AI products with Codex.",{"draft":7},{"url":744,"props":745},"\u002Fimages\u002Fblogs\u002Fcodex-community-hackathon-hanoi.jpg",{},"\u002Fblogs\u002Fcodex-community-hackathon-hanoi","2026-06-16",{"title":749,"description":750,"ogImage":744,"keywords":751},"No Name Studio joins Codex Community Hackathon Hanoi | No Name Studio","No Name Studio is proud to participate in Codex Community Hackathon — Hanoi and welcomes new opportunities to build, connect, and collaborate around AI products.",[10,752,753,754,755,756],"Codex Community Hackathon","Hanoi hackathon","AI products","builders Vietnam","product engineering",{"loc":746,"lastmod":758},"2026-08-20T14:58:13.000Z","blogs\u002Fcodex-community-hackathon-hanoi",[761,762,665,740],"Codex","Hackathon","fIWyniHe4HbsDXmCI7MPJiKhmMj6YxTs-R7ExGqZZCE",{"id":765,"title":766,"aside":7,"authors":767,"badges":13,"banner":13,"body":769,"breadcrumb":7,"category":1347,"collapse":7,"description":1348,"editLink":1119,"extension":489,"footer":13,"fullpage":7,"head":13,"icon":13,"main":13,"meta":1349,"navBadges":13,"navTruncate":7,"navigation":7,"next":13,"ogImage":1350,"path":1352,"prev":13,"prevNext":7,"publishedAt":1353,"readingTime":1129,"robots":13,"schemaOrg":13,"seo":1354,"sidebar":13,"sitemap":1366,"stem":1367,"tags":1368,"toc":13,"__hash__":1370},"content\u002Fblogs\u002Fnuxt-starter-kit-announcement.md","Introducing Nuxt Starter Kit: A Production-Ready SaaS Foundation for Busy Nuxters",[768],{"name":10,"to":11,"target":12},{"type":15,"value":770,"toc":1331},[771,778,785,789,796,799,803,810,814,821,841,845,856,874,878,881,898,902,905,932,936,939,954,958,961,1070,1074,1077,1201,1208,1212,1219,1228,1232,1239,1242,1247,1251,1254,1286,1290,1293,1316,1318,1327],[18,772,773,774,777],{},"We've all been there — starting a new project, spending ",[113,775,776],{},"days"," setting up authentication, database schemas, deployment pipelines, and UI systems before writing a single line of business logic. That cycle ends today.",[18,779,780,781,784],{},"We're thrilled to announce ",[25,782,783],{},"Nuxt Starter Kit"," — a fully equipped, production-ready SaaS starter pack for busy Nuxters. It's open source, it's opinionated where it matters, and it's designed to get you from zero to production in minutes, not weeks.",[53,786,788],{"id":787},"why-we-built-this","Why We Built This",[18,790,791,792,795],{},"At No Name Studio, we've shipped multiple products on the Nuxt ecosystem. Every time, we found ourselves solving the same foundational problems: wiring up OAuth, configuring Drizzle migrations, setting up SEO meta tags, integrating PWA support. These aren't interesting problems — they're ",[113,793,794],{},"solved"," problems. Yet they consume a disproportionate amount of project setup time.",[18,797,798],{},"Nuxt Starter Kit is the distillation of everything we've learned. It's the template we wished existed when we started.",[53,800,802],{"id":801},"whats-inside","What's Inside",[18,804,805,806,809],{},"This isn't a minimal boilerplate with a \"Hello World\" page. It's a ",[25,807,808],{},"fully loaded foundation"," that covers the entire stack:",[105,811,813],{"id":812},"authentication-that-just-works","🔐 Authentication That Just Works",[18,815,816,817,820],{},"No more wrestling with session management. Nuxt Starter Kit ships with ",[25,818,819],{},"nuxt-auth-utils"," pre-configured, including:",[133,822,823,829,835,838],{},[74,824,825,828],{},[25,826,827],{},"Google OAuth"," out of the box",[74,830,831,834],{},[25,832,833],{},"WebAuthn\u002FPasskeys"," for passwordless login",[74,836,837],{},"Session persistence backed by your database",[74,839,840],{},"User profile management ready to extend",[105,842,844],{"id":843},"a-design-system-not-just-styles","🎨 A Design System, Not Just Styles",[18,846,847,848,851,852,855],{},"We've set up a complete UI layer powered by ",[25,849,850],{},"Tailwind CSS v4"," and ",[25,853,854],{},"shadcn-vue"," components:",[133,857,858,865,868,871],{},[74,859,860,861,864],{},"Accessible, customizable component library via ",[25,862,863],{},"Reka UI"," primitives",[74,866,867],{},"Dark\u002Flight theme with smooth transitions",[74,869,870],{},"Mobile-first responsive layouts",[74,872,873],{},"Loading skeletons and optimistic UI patterns built in",[105,875,877],{"id":876},"️-type-safe-data-layer","🗄️ Type-Safe Data Layer",[18,879,880],{},"Database access shouldn't feel like guesswork. The kit includes:",[133,882,883,889,895],{},[74,884,885,888],{},[25,886,887],{},"Drizzle ORM"," for type-safe queries with zero runtime overhead",[74,890,891,894],{},[25,892,893],{},"Cloudflare R2"," integration for file storage with zero egress fees",[74,896,897],{},"Migration tooling via Drizzle Kit — schema changes are a single command",[105,899,901],{"id":900},"seo-pwa-from-day-one","🎯 SEO & PWA from Day One",[18,903,904],{},"No need to bolt these on later:",[133,906,907,913,919,926],{},[74,908,909,912],{},[81,910,911],{},"@nuxtjs\u002Fseo"," pre-configured with dynamic meta tags and Open Graph support",[74,914,915,916],{},"Automatic sitemap generation and ",[81,917,918],{},"robots.txt",[74,920,921,922,925],{},"Full ",[25,923,924],{},"PWA support"," — offline caching, app manifest, install prompts, and auto-updating service workers",[74,927,928,929],{},"Asset generation via ",[81,930,931],{},"@vite-pwa\u002Fassets-generator",[105,933,935],{"id":934},"content-system","📝 Content System",[18,937,938],{},"Need a blog, documentation, or changelog? It's already wired up:",[133,940,941,948,951],{},[74,942,943,944,947],{},"Powered by ",[81,945,946],{},"@nuxt\u002Fcontent"," with Markdown support and custom components",[74,949,950],{},"SEO-friendly content structure",[74,952,953],{},"Multi-language support with locale-based content routing",[53,955,957],{"id":956},"the-tech-stack","The Tech Stack",[18,959,960],{},"We chose every tool deliberately. Here's the full lineup:",[962,963,964,977],"table",{},[965,966,967],"thead",{},[968,969,970,974],"tr",{},[971,972,973],"th",{},"Layer",[971,975,976],{},"Technology",[978,979,980,991,1001,1011,1021,1031,1041,1050,1060],"tbody",{},[968,981,982,988],{},[983,984,985],"td",{},[25,986,987],{},"Framework",[983,989,990],{},"Nuxt 4 + Vue 3",[968,992,993,998],{},[983,994,995],{},[25,996,997],{},"Language",[983,999,1000],{},"TypeScript (strict mode)",[968,1002,1003,1008],{},[983,1004,1005],{},[25,1006,1007],{},"Styling",[983,1009,1010],{},"Tailwind CSS v4 + shadcn-vue",[968,1012,1013,1018],{},[983,1014,1015],{},[25,1016,1017],{},"Database",[983,1019,1020],{},"SQLite + Drizzle ORM",[968,1022,1023,1028],{},[983,1024,1025],{},[25,1026,1027],{},"Auth",[983,1029,1030],{},"nuxt-auth-utils + SimpleWebAuthn",[968,1032,1033,1038],{},[983,1034,1035],{},[25,1036,1037],{},"Payments",[983,1039,1040],{},"Dodo Payments",[968,1042,1043,1048],{},[983,1044,1045],{},[25,1046,1047],{},"Storage",[983,1049,893],{},[968,1051,1052,1057],{},[983,1053,1054],{},[25,1055,1056],{},"Analytics",[983,1058,1059],{},"Sentry",[968,1061,1062,1067],{},[983,1063,1064],{},[25,1065,1066],{},"Deployment",[983,1068,1069],{},"NuxtHub → Cloudflare (recommended)",[53,1071,1073],{"id":1072},"getting-started-in-5-minutes","Getting Started in 5 Minutes",[18,1075,1076],{},"Getting up and running is straightforward:",[394,1078,1082],{"className":1079,"code":1080,"language":1081,"meta":402,"style":402},"language-bash shiki shiki-themes github-light github-dark","# Clone the repository\ngit clone https:\u002F\u002Fgithub.com\u002FNo-Name-Studio-VN\u002Fnuxt-template.git\ncd nuxt-template\n\n# Install dependencies\nnpm install\n\n# Set up your environment\ncp .env.example .env\n\n# Generate database migrations\nnpm run db:generate\n\n# Start developing\nnpm run dev\n","bash",[81,1083,1084,1093,1106,1115,1121,1127,1136,1141,1146,1158,1163,1169,1180,1185,1191],{"__ignoreMap":402},[1085,1086,1089],"span",{"class":1087,"line":1088},"line",1,[1085,1090,1092],{"class":1091},"sJ8bj","# Clone the repository\n",[1085,1094,1095,1099,1103],{"class":1087,"line":469},[1085,1096,1098],{"class":1097},"sScJk","git",[1085,1100,1102],{"class":1101},"sZZnC"," clone",[1085,1104,1105],{"class":1101}," https:\u002F\u002Fgithub.com\u002FNo-Name-Studio-VN\u002Fnuxt-template.git\n",[1085,1107,1108,1112],{"class":1087,"line":474},[1085,1109,1111],{"class":1110},"sj4cs","cd",[1085,1113,1114],{"class":1101}," nuxt-template\n",[1085,1116,1117],{"class":1087,"line":652},[1085,1118,1120],{"emptyLinePlaceholder":1119},true,"\n",[1085,1122,1124],{"class":1087,"line":1123},5,[1085,1125,1126],{"class":1091},"# Install dependencies\n",[1085,1128,1130,1133],{"class":1087,"line":1129},6,[1085,1131,1132],{"class":1097},"npm",[1085,1134,1135],{"class":1101}," install\n",[1085,1137,1139],{"class":1087,"line":1138},7,[1085,1140,1120],{"emptyLinePlaceholder":1119},[1085,1142,1143],{"class":1087,"line":496},[1085,1144,1145],{"class":1091},"# Set up your environment\n",[1085,1147,1149,1152,1155],{"class":1087,"line":1148},9,[1085,1150,1151],{"class":1097},"cp",[1085,1153,1154],{"class":1101}," .env.example",[1085,1156,1157],{"class":1101}," .env\n",[1085,1159,1161],{"class":1087,"line":1160},10,[1085,1162,1120],{"emptyLinePlaceholder":1119},[1085,1164,1166],{"class":1087,"line":1165},11,[1085,1167,1168],{"class":1091},"# Generate database migrations\n",[1085,1170,1172,1174,1177],{"class":1087,"line":1171},12,[1085,1173,1132],{"class":1097},[1085,1175,1176],{"class":1101}," run",[1085,1178,1179],{"class":1101}," db:generate\n",[1085,1181,1183],{"class":1087,"line":1182},13,[1085,1184,1120],{"emptyLinePlaceholder":1119},[1085,1186,1188],{"class":1087,"line":1187},14,[1085,1189,1190],{"class":1091},"# Start developing\n",[1085,1192,1194,1196,1198],{"class":1087,"line":1193},15,[1085,1195,1132],{"class":1097},[1085,1197,1176],{"class":1101},[1085,1199,1200],{"class":1101}," dev\n",[18,1202,1203,1204,1207],{},"That's it. Open ",[81,1205,1206],{},"http:\u002F\u002Flocalhost:3000"," and you have a fully functional SaaS foundation — authentication, database, UI components, SEO, PWA — everything is ready.",[53,1209,1211],{"id":1210},"deployment-one-command-away","Deployment: One Command Away",[18,1213,1214,1215,1218],{},"The kit is optimized for ",[25,1216,1217],{},"NuxtHub"," (v0.10x), which means you can deploy to Cloudflare with zero configuration. But we don't lock you in — Vercel and Netlify work just as well.",[18,1220,1221,1222,1227],{},"Follow the ",[43,1223,1226],{"href":1224,"rel":1225},"https:\u002F\u002Fhub.nuxt.com\u002Fdocs\u002Fgetting-started\u002Fdeploy",[47],"NuxtHub deployment guide"," to go live with a full-stack Nuxt app.",[53,1229,1231],{"id":1230},"open-source-mit-licensed","Open Source, MIT Licensed",[18,1233,1234,1235,1238],{},"Nuxt Starter Kit is completely open source under the ",[25,1236,1237],{},"MIT License",". Use it for personal projects, client work, or your next startup — no strings attached.",[18,1240,1241],{},"We believe the best tools are shared tools. If this kit saves you even a few hours of setup time, it's done its job.",[450,1243],{"icon":1244,"target":12,"title":1245,"to":1246},"lucide:github","View on GitHub","https:\u002F\u002Fgithub.com\u002FNo-Name-Studio-VN\u002FNuxt-Starter-Kit",[53,1248,1250],{"id":1249},"whats-next","What's Next",[18,1252,1253],{},"This is just the beginning. Here's what's on our roadmap:",[133,1255,1256,1262,1268,1274,1280],{},[74,1257,1258,1261],{},[25,1259,1260],{},"More OAuth providers"," — GitHub, Discord, and more",[74,1263,1264,1267],{},[25,1265,1266],{},"Admin dashboard templates"," — pre-built pages for common admin tasks",[74,1269,1270,1273],{},[25,1271,1272],{},"AI integration patterns"," — ready-to-use patterns for LLM-powered features",[74,1275,1276,1279],{},[25,1277,1278],{},"Stripe & LemonSqueezy"," — additional payment provider support",[74,1281,1282,1285],{},[25,1283,1284],{},"Email templates"," — transactional email integration with Resend",[53,1287,1289],{"id":1288},"get-involved","Get Involved",[18,1291,1292],{},"We welcome contributions from the community! Whether it's a bug fix, a new feature, or just improving the docs — every contribution matters.",[133,1294,1295,1302,1310],{},[74,1296,1297,1298],{},"⭐ ",[43,1299,1301],{"href":1246,"rel":1300},[47],"Star us on GitHub",[74,1303,1304,1305],{},"🐛 ",[43,1306,1309],{"href":1307,"rel":1308},"https:\u002F\u002Fgithub.com\u002FNo-Name-Studio-VN\u002FNuxt-Starter-Kit\u002Fissues",[47],"Report issues",[74,1311,1312,1313],{},"💬 Reach out at ",[43,1314,1315],{"href":466},"contact@nnsvn.me",[50,1317],{},[18,1319,1320],{},[113,1321,1322,1323,1326],{},"Built with ❤️ by ",[43,1324,10],{"href":11,"rel":1325},[47],"**. Stop setting up. Start shipping.",[1328,1329,1330],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":402,"searchDepth":469,"depth":469,"links":1332},[1333,1334,1341,1342,1343,1344,1345,1346],{"id":787,"depth":469,"text":788},{"id":801,"depth":469,"text":802,"children":1335},[1336,1337,1338,1339,1340],{"id":812,"depth":474,"text":813},{"id":843,"depth":474,"text":844},{"id":876,"depth":474,"text":877},{"id":900,"depth":474,"text":901},{"id":934,"depth":474,"text":935},{"id":956,"depth":469,"text":957},{"id":1072,"depth":469,"text":1073},{"id":1210,"depth":469,"text":1211},{"id":1230,"depth":469,"text":1231},{"id":1249,"depth":469,"text":1250},{"id":1288,"depth":469,"text":1289},"Release","We're excited to announce the open-source release of Nuxt Starter Kit — a comprehensive, production-ready SaaS starter kit built with Nuxt 4, featuring authentication, admin dashboard, AI integration, and modern UI components.",{"draft":7},{"props":1351},{},"\u002Fblogs\u002Fnuxt-starter-kit-announcement","2026-03-07",{"title":1355,"description":1356,"keywords":1357},"Introducing Nuxt Starter Kit — Production-Ready SaaS Starter | No Name Studio","Announcing the open-source release of Nuxt Starter Kit — a fully equipped technical starter pack built with Nuxt 4, Vue 3, Tailwind CSS v4, and more. Get your SaaS project off the ground in minutes.",[1358,1359,1360,1361,1362,1363,1364,1365],"nuxt starter kit","nuxt 4","saas template","vue 3","tailwind css","open source","drizzle orm","cloudflare",{"loc":1352,"lastmod":758},"blogs\u002Fnuxt-starter-kit-announcement",[517,1369,1347],"Open Source","FqlU4ZfTymK-uJbJMYhLLrwJwng-NMXVDh_Dbm_6oc8",1792253423498]