This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI
The Dream Before the Code
Before I even knew what a framework was or understood how the web really worked, I had this vision: a unified digital space that would gather everything I wanted to share with the world. A place where people could actually know me through what I built.
I spent years browsing sites with incredible designs—some brilliant, others not so much. But what really caught my eye were the unique features: radio players streaming live music, browser-based games, AI-powered interactions, interactive databases. I wanted all of that. Not just to replicate it, but to make it mine.
Even back in high school, I ditched conventional "rules" just to build my logic and work toward this massive personal project. It started because of video games, but it evolved into something much bigger—more than a career, honestly, more like a marathon.
The Long Road: Jobs, Delays, and Divine Timing
Fast forward to four months before graduation. I landed my second professional job at Airtm, which forced me to pause my dream project and focus on theirs. My first corporate project taught me a harsh lesson: building for others takes longer than you think. So I made a decision—pause the Airtm project and finally start my portfolio. Something simpler, more personal, with massive professional benefits (including a Harvard-format CV, which was a nice touch).
Four days after my 24th birthday (August 11), I graduated. Clients started reaching out almost immediately. But I told them the same thing: "I need to help myself first. Then I'll help you."
Time pressure hit hard. I felt like I was drowning—starting, pausing, restarting over and over. But I committed everything to God, and on December 7, 2025, I finally began.
The Build: Chaos, Creativity, and a Google-Sponsored Miracle
I created the repository before this contest even existed. With my limited budget, I had to be smart about my tech choices. I prepared my AI assistants like personal tutors and evaluators, picked my stack carefully, and dove headfirst into development.
Then came December 20—I had to fly to the United States for Christmas with my family. I worried the momentum would die. But surprisingly, the trip became an opportunity to think bigger. I bought a US SIM card (Ultra Mobile) to get an American phone number (+1 area code, since my phone doesn't support eSIMs). I wanted Google Voice too, but it wasn't available in Colombia when I returned. A rookie mistake, but hey—when life gives you lemons, make lemonade.
Back home, I kept building. Adding backend features (my specialty—especially databases, since I've been writing SQL since 2015). Setting up my professional infrastructure: Google Workspace email, social media accounts, logos, brand identity. My personal brand was always there, but my business brand—Vixis Studio—needed proper structure.
I deployed to Deno Deploy first, squashed countless bugs, locked down security (thanks to my Kali Linux experience since 2015 and my CyberOps Associate + Ethical Hacker certifications from Cisco and my university in 2024).
Then Came the Turning Point
While implementing the blog functionality and setting up my newsletter, I discovered something that felt scripted by fate itself: the Google New Year, New You Portfolio Challenge.
A new year. A new me. A portfolio contest sponsored by Google, published on Dev.to. OF COURSE I'M PARTICIPATING.
I immediately migrated from Deno Deploy to Google Cloud. But here's the kicker—when I had no infrastructure for my radio streaming setup (Render, Railway, etc. all fell short), Google dropped over 1 MILLION Colombian pesos worth of cloud credits as a gift.
I literally shouted HALLELUJAH. Finally, I could practice my cloud skills properly. And what better way than with Google (even though I'd been using AWS for my CDN before)?
I started using Compute Engine, Cloud Run, Cloud Build, and other services to optimize everything. The best part? It adapted perfectly to my local development machine (thanks to Cursor, Antigravity, and WSL on my PC).
The Struggles: When Dreams Meet Reality
Let me be real: this wasn't easy.
I faced criticism as a kid and teenager. I was physically hurt, lied to, deceived. Lost opportunities because of my bad reputation. Not having God in my life back then was something I didn't even realize was missing. Failure seemed inevitable.
But I didn't quit.
Setting up the radio alone felt like an odyssey. At first, I had no infrastructure. Liquidsoap didn't work. Then FFmpeg failed. Back to Liquidsoap with different parameters and commands until finally—BOOM. I had my own radio streaming on my own site.
That moment hit different. Using Suno and my guitar skills, I even created my own custom jingle for the radio (a short audio ad between songs). I found myself listening to my own radio more than my Spotify playlists.
Live streaming was complicated too. Without money for a full broadcast setup, I downloaded a program called butt (yes, that's its name). I wanted to configure it in OBS Studio first, but couldn't find useful documentation. So I kept it simple: butt + Voicemeeter for audio management. Done.
I even tried integrating Google AdSense ads on the Radio and Home pages, but they rejected my application (still don't know why—first time doing this).
The Architecture: Phases of Creation
Before building, I planned every tool, every GUI, every CLI. I structured development into 8 clear phases:
- Phase 1: Initialize — Set up the foundation
- Phase 2: Tailwind CSS + Routing — Design system and navigation
- Phase 3: Frontend — Build the interface
- Phase 4: Backend + Database + Pricing + CDN + Radio — Core functionality
- Phase 5: Cybersecurity — Lock it down
- Phase 6: Deployment + CI/CD — Ship it
- Phase 7: Automation + AI — Smart workflows
- Phase 8: Monitoring + Logs + Maintenance — Keep it alive
This took a huge weight off my shoulders. My logic and focus leveled up—like Mario grabbing a red mushroom (because there are bad mushrooms too 😅).
What Makes This Portfolio Different
🎯 Core Features
Interactive Snake Timeline — An animated journey through my career with smooth scrolling and visual storytelling. Check out the homepage to see it in action.
Live Radio Streaming — Custom-built radio with Icecast/Liquidsoap, complete with playlist management, live streaming capabilities, and my own jingles.
Multi-Language Support — Full Spanish/English internationalization. The site dynamically switches languages without reloading.
Custom Admin Panel — I can manage all content (projects, blog posts, work experience, skills, education) without touching code.
Dynamic Pricing System — Integrated with Airtm (because paying $500/year for Stripe Atlas isn't realistic for me right now).
404 Error Page Mario Bros — Mario Bros theme when a route is invalid.
Dark/Light Theme: Based on user preferences.
My Own Store — Showcasing services I offer (with external tools when needed).
🛠️ Tech Stack
- Frontend: React 18, TypeScript, Vite
- Runtime: Deno (modern, secure, fast)
- Styling: Tailwind CSS
- Animations: Framer Motion, GSAP
- Backend: Supabase (PostgreSQL, Auth, Storage, Real-time)
- Deployment: Google Cloud Run, Docker, Cloud Build
- CDN: Custom CDN setup (cdn.vixis.dev)
- Radio Streaming: Icecast, Liquidsoap, FFmpeg
- CI/CD: Automated with Cloud Build
- Security: CyberOps-certified configuration with CSP headers, secure environment variables
⚡ Why Google Cloud Run?
Serverless. No server management headaches.
Auto-scaling. Handles traffic spikes automatically.
Cost-effective. Pay only for what you use (plus those generous free credits until April 2026).
Global. Deploy close to users worldwide.
Container-based. Full control over the runtime environment.
🤖 A Note on AI Integration
You might notice I didn't include an AI chatbot or agent in this portfolio. This was a conscious design decision, not a technical limitation.
I know how to implement AI features—I specialize in backend and AI development. But for this project, I didn't see it as necessary. The portfolio isn't so immense that it requires an AI assistant to navigate. Sometimes the best technical decision is knowing when not to add complexity.
That said, if you find any bugs, have suggestions, or want to report issues, head over to the GitHub repository and open an issue. I'm always open to feedback and improvements.
🏗️ Deployment Configuration
The service is configured with the required contest label:
--labels dev-tutorial=devnewyear2026
Deployed to us-central1 with:
- 512Mi memory
- 1 vCPU
- Auto-scaling (0 minimum, 10 maximum instances)
- Port 8080
- Public access
Portfolio
Visit vixis.dev (or https://portfolio-66959276136.us-central1.run.app) to experience:
- The interactive timeline
- Live radio streaming
- Multi-language support
- All my projects and work
You can also leave testimonials at vixis.dev/status or request songs for the radio playlist! 😎
How I Built It
The Development Journey
Total development time: 1.5 months. Much faster than my previous Airtm project that took several months.
I'm sure I've forgotten some details, but this project is so artistic to me that I'm certain nothing will ever be more special—even years from now. Even if people say it's "small" or "ugly" or "I could do better"—I don't care.
This is my catapult that elevates my potential like never before.
Technical Challenges Solved
Challenge 1: Deno + Node.js Compatibility
- Configured
nodeModulesDir: "auto"in deno.json - Used
npm:specifiers for Node packages - Built custom Vite plugin for module resolution
Challenge 2: Radio Streaming Infrastructure
- Started with Liquidsoap (failed)
- Tried FFmpeg (failed)
- Back to Liquidsoap with proper configuration (SUCCESS)
- Added butt + Voicemeeter for live streaming
Challenge 3: Multi-language Content Management
- Centralized i18n configuration
- Database schema with JSONB
*_translationscolumns - Runtime language switching with React context
Challenge 4: Image Optimization
- CDN integration (cdn.vixis.dev)
- WebP format with automatic conversion
- Lazy loading with Intersection Observer
- Responsive images with srcset
Security Implementation
As a CyberOps Associate and Ethical Hacker, security was non-negotiable:
- Content Security Policy (CSP) headers
- X-Frame-Options, X-Content-Type-Options
- HTTPS only
- Supabase-managed authentication
- Environment variables for all sensitive data
What I'm Most Proud Of
The Personal Victory
In total, this took 1.5 months. I knew it would be faster than the Airtm project. I may have forgotten some details, but this project is so deeply artistic and personal that no other project will ever be this special to me—not even years from now.
No matter what anyone says—whether they think it's "small," "ugly," or claim "I could do better"—I don't care.
This portfolio is my catapult. It launches my potential to heights I've never reached before. Any opinions you have can be left on this blog or especially in my Testimonials form at vixis.dev/status (you can also request songs for the radio playlist or my live streams 😎).
The Domino Effect
I congratulate myself on this victory I've gathered for my career. This is a domino effect for the entire world, starting with the people who accompany me.
But above all, my victory is dedicated to the Lord and living God, our connection in Jesus Christ. To Him be my victories forever, in spite of everything. ✝️
Why This Portfolio Deserves to Win
Innovation: Unique features like interactive timeline, integrated radio streaming, and custom admin panel.
Technical Excellence: Modern stack, clean architecture, optimal performance, certified security practices.
User Experience: Smooth interactions, responsive design, accessibility-first approach.
Scalability: Built to grow with additional features and content.
Professional Quality: Production-ready with proper security, monitoring, and CI/CD.
Lessons Learned
Building this portfolio taught me invaluable lessons:
- Start with Planning — Clear architectural decisions prevent technical debt
- Prioritize UX — Technical excellence means nothing if users struggle
- Embrace Modern Tools — New technologies can significantly improve developer experience
- Iterate and Improve — Launch MVP first, then enhance based on feedback
- Document Everything — Good documentation saves time long-term
- Security First — Build security from the start, not as an afterthought
- Performance Matters — Every millisecond counts for user experience
- Prioritize Low Cloud Costs — Don't run configurations that lead to surprise high costs
- Building a Radio Station — Maybe not like established ones, but I finally learned how to create a fully online, personalized radio
- Automation + AI — Automating repetitive processes (like social media outreach) led me to tools like n8n, Make, Manychat, Chatwoot, and many others
The Road Ahead
I've faced criticism, been hurt, lost opportunities due to a bad reputation. Not having God in my life made failure seem inevitable.
But I didn't give up.
Even when mounting the radio felt like an odyssey—no infrastructure, Liquidsoap failing, FFmpeg not working—I kept pushing until I finally had something I deeply appreciate: my own radio on my own site.
Creating my custom jingle with Suno and my guitar skills filled me with so much emotion that I now listen to my radio more than my own Spotify playlists.
Final Thoughts
This portfolio represents more than a technical achievement—it's a testament to continuous learning, creative problem-solving, and dedication to the craft.
The Dev New Year 2026 Challenge pushed me to think critically about every aspect:
- How do I stand out in a competitive field?
- What makes a portfolio memorable?
- How can I demonstrate both creativity and technical skill?
The answer: Build something authentic that shows not just what I've done, but who I am as a developer.
Thank you for reading about my journey. Here's to new beginnings, continuous learning, and building amazing things in 2026!
🚀 Deployed on Google Cloud Run with label: dev-tutorial=devnewyear2026
🔗 Live Site: vixis.dev or https://portfolio-66959276136.us-central1.run.app
💼 Vixis Studio: My B2B organization for enterprise clients
🎸 Fun Fact: I'm also a certified Digital Marketer (HubSpot) and Guitarist (Yousician), B1 English certified, and I created my radio jingle thanks to Suno.
This portfolio is a testament to what happens when passion meets purpose, and technology meets creativity. ✨
Top comments (0)