(Spanish version available here)
Nolia Office is a Notion-friendly web app (embeddable as a widget) created by Skalis07 as a relaxing, customizable study/work space. It is inspired by NookOffice and uses Animal Crossing-themed visuals to create a warm and cozy atmosphere. The code has been developed from scratch, incorporating aesthetic changes and functional improvements. Built with Astro, TypeScript, and Tailwind CSS.
This project was born with two main goals:
- To provide a digital place for my girlfriend to study and relax, allowing me to add or edit anything she needs, made by me.
- To carry out a practical web development exercise, since until now I had never worked on a complete project, allowing me to learn, practice, and showcase my skills.
- 🎵 Background music played from YouTube.
- 🌧️ Ambient sounds (rain).
- 🖼️ Themed images and GIFs from Animal Crossing.
- 🎨 Adapted design for a relaxing and study-focused environment.
- 🌓 Visual modes (day/night) with an interactive switch.
- 📱 Responsive design, suitable for mobile and desktop.
- 🖥️ Embedded mode in Notion with automatic detection, no additional URL parameters required, to integrate the page into Notion workspaces.
Nolia Office is a static web application built with Astro.
On the client side, TypeScript (compiled to JavaScript) handles:
- Determining the current GIF and allowing it to be changed.
- Playing background music via the YouTube API.
- Controlling volume, pausing/resuming, and toggling ambient sounds.
- Switching between day and night modes.
- Adjusting the GIF frame to maintain the original aspect ratio or crop correctly.
- Adjusting styles so it works embedded in Notion without losing functionality.
npm run dev→ runs at root (normal local mode).npm run dev:pages→ simulates GitHub Pages (subpath/Nolia-Office/).npm run typecheck→ validates TypeScript types (no emit).
- Workflow:
docs/workflow.md - Render flow:
docs/architecture/flow.md - Architecture overview:
docs/architecture/overview.md - QA (Golden Paths):
docs/qa/golden-paths.md - Vercel Previews:
docs/vercel-previews-deployments.md - Docker:
docs/docker.md - Notion embed test (local):
docs/qa/testing/test-embed.html
- More music.
- Custom playlists system.
- Pomodoro timer for study/work sessions.
- More sound effects (waves, wind, coffee shop).
- Add more GIFs and backgrounds for automatic rotation.
- Inspiration and original concept: NookOffice
- Visual inspiration: Animal Crossing (Nintendo)
- Developer: Skalis07
- Music: From Animal Crossing, played via YouTube.
- Ambient sounds: Free-use rain effect by DRAGON-STUDIO on Pixabay.
- Browser icon: Based on free Figma resources inspired by Animal Crossing, created by Ashley Gaunt-Seo.
This is a personal project inspired by the NookOffice concept and is not affiliated with, endorsed, or sponsored by Nintendo or the Animal Crossing franchise.
Trademarks, logos, images, and music belong to their respective owners.
Use is strictly non-commercial.
📌 Note: To integrate Nolia Office into Notion, simply paste the link:
https://skalis07.github.io/Nolia-Office/