Echo Studio is a client-facing website and my first fully professional build — no memes, no chaos. Just clean code, purposeful layout and straight-to-the-point structure. It’s built to reflect how I work, what I value and offers a simple way to get in touch.
What is Echo Studio?
Echo Studio is my digital playground — a personal ecosystem that holds the many projects I create under the name “echo.”
It’s not an agency. It’s not a company. It’s a house I built to keep everything in one place.
The idea started simple: I needed a roof for all the work I do.
Someday, maybe, I’ll scale it. Maybe it becomes a team. But for now, it’s just me — designing, building, writing, fixing bugs at 3am.
Still, I believe in starting from structure. So I built the house, even if I’m not ready to fill all the rooms yet.
Project Duration > ~Roughly 3 months though in reality, it could’ve been
wrapped in one. This was my first project that included light backend setup: honeypot spam protection, custom API endpoint for form submission, and some basic logic wiring. But in between, I fell into a 2-month Minecraft hyperfixation arc. So. Let’s call it a flexible timeline, not a delay.
Tech & Tools - Vue 3 (component-based structure) - JavaScript (dynamic interactivity,
no state libraries—just logic and vibes) - HTML + CSS (custom layout and styling from scratch) - Adobe Illustrator (logo & brand elements) - Figma (full UI/UX design system: wireframes to hi-fi) - Phosphor Icons (clean, consistent iconography across the site) - Envato Elements (product mockups & visual assets) - Pexels (realistic stock photography & textures) - Google Fonts + curated colour palette - Vercel (live deployment + serverless API endpoint for the contact form)
Passed contrast and readability checks (WCAG). Fonts, colours and layout were all tested intentionally this was built with real user experience in mind.
My Role
- Concept & structure planning
- Branding & copywriting
- UI/UX design (wireframes, layout flow, hi-fi polish)
- Logo & visual system (icons, colour palette, typography)
- Frontend development (Vue 3 components, styling, responsive layout)
- Backend logic (serverless API for form, honeypot protection)
- Manual DNS + deployment via Vercel
- Testing, debugging, tweaking, and rebuilding tiny things at 3am for no reason
- Pretending to be multiple team members when I was, in fact, just one
Brand Guideline
Dermageddon includes a full internal brand guideline, covering:
- Echo Brand Spectrum — a full guideline covering the entire range of visuals, tone, and identity under the Echo umbrella
- Logo usage & variants (stacked, horizontal, favicon)
- Font pairings and sizing system
- Core colour palette with hex codes + usage rules
- Voice & tone principles
- Component rules for frontend (buttons, spacing, cards, etc)
Project Planning
Inspiration came from everywhere — sites like godly.website, curated pages on Behance and the portfolios of indie developers I stumbled across on Instagram. Once the vision started to take shape, I mapped the structure out in FigJam, then moved into full design in Figma. The core Echo identity was already in place — logo, brand spectrum, visual language — so I focused on translating that into a site that felt like Echo. Not just for me, but for anyone visiting.
Once the design felt right, I did what I always do: opened up the code editor and started building.
The Entry Lore
I’ve always wanted a space I could actually show to people — and yeah, maybe make some money too (HA!). The real purpose? Like I said: it’s client-facing. Not an agency, not a “studio” with interns I don’t have — just something that proves I’m actually capable of doing the work.
A lot of my past projects are prototypes or satire-coded platforms that don’t exactly scream “hire me.” They’re fun (and chaotic), but they didn’t leave a clear way for people to reach out, collaborate or even send a nice “hey I liked that thing you made.”
So… I made this. Echo Studio. A serious site, finally. Hopefully it brings some cool collabs, or at the very least, funds my bubble tea stash.
Process and Problem
The overall process was familiar — plan, design, build. But smoother this time around. I’ve done enough projects by now to know what I’m doing (mostly). No identity crisis, no starting from zero.
The only real curveball was the backend.
I was terrified of it. Setting up a honeypot, building a custom API endpoint, hooking it to my Discord so I’d know if someone actually contacted me — all of that took time, mostly because I didn’t trust myself not to break something.
And I did break something. I accidentally left my Discord webhook exposed in the frontend (yes… publicly). Thankfully, my man — also my unofficial mentor, aka my mighty full-stack knight — caught it. He saved me from getting spam-botted into oblivion. Lesson learned: I’m now hyperaware about site security.
I’m not a cybersecurity firm, and Echo Studio isn’t a Fortune 500 target. But I still treat it with care. I even considered stress-testing it with a DIY DDoS attack before remembering: this is literally just my site. Chill.
That said, I’ve done my best to make it safe. There’s no email farming, no creepy newsletter traps, no tracking disguised as “marketing insights.” I give out freebies — no strings attached. If you fill out the contact form, I only ask for your email so I can reply. That’s it. I don’t even have a database to store it (lol).
So yeah — no layered enterprise security system, but Echo Studio is clean, direct, and safe.
If you’re here at the bottom, I see you.
You’re not alone. Also, maybe go drink water..
Either way, thank you for reading!!
→ support the builder, fuel the bubble tea stash. let’s collab.