From Vision to Website:
My Sleepless Nights, Curious Detours, and Building Something That’s Actually Mine
As a designer, my world revolves around people, behavior, and experience. I obsess over flow, clarity, and the little psychological cues that make digital products feel human. But code? That lived in another galaxy. Until I decided to build my own website — and everything changed.
Here’s how that journey unfolded, from a basic Framer site to something completely my own:
Where I started: A basic Framer site to the current website
Why I Left the Easy Path Behind
I didn’t take the easy road. I could have stuck with Framer or chosen another no-code builder. Instead, I picked Astro, a developer-focused static site generator — purely because I wanted full control, no monthly costs, and a way to build exactly what I envisioned.
I started with an incredible theme called NeonMint by EFEELE. It was fast, elegant, and gave me a solid foundation. But like any good designer, I had opinions — a lot of them.
What started as simple tweaks turned into a complete obsession with rebuilding every single detail.
The Long Detour:
Why I Didn’t End Up on Webflow
At first, I thought I’d go with Webflow. I’d never used it before — only Framer — and it felt like a good way to learn. As I explored, I actually began understanding how a webpage is structured. Grids, sections, layout logic — it all made sense.
But then I started thinking ahead:
How will I write blogs? Add projects? Update things easily?
Turns out, the free plan didn’t let me connect a domain. And if I exported the code to host it elsewhere, I’d lose CMS features — no way to update content without manually editing files.
Framer was similar: great visuals, but expensive, with no way to export.
So I paused. I thought:
What if I just host it for free on GitHub Pages or Cloudflare Pages?
That’s when I discovered Hugo — a static site generator that required zero backend. I tried it… but it felt too rigid. Beautiful sites, yes. But no animations, no personality. Too static.
More Googling brought me to VitePress… and then, Astro.
Blogs in Markdown. Custom layouts. Tons of themes. Lightweight.
And best of all? Free hosting.
So I cloned a theme, cracked open VS Code — and dove headfirst into a world I didn’t understand.
The detour that led me to the right destination.
The First Reality Check:
Breaking the Footer (and Everything With It)
One of my first changes was to clean up the footer. I removed some social links I didn’t use. Seemed harmless enough.
Except… it wasn’t.
I didn’t realize the footer component was still expecting those links.
My terminal started shouting at me. Errors everywhere.
I had no clue what I’d done wrong. That’s when I started using AI tools to help me decode the error messages. Not to write code for me, but to explain what was actually happening. I was learning where to look, how to undo damage, and how Astro tied everything together.
It felt like deciphering riddles. But every fix taught me more about how things connected.
My First Real Challenge:
Building the Projects Page
The Projects page was where I really tested my patience.
At first, I wanted it to work just like the blog archive — sorted, searchable, dynamic. I thought, “How hard can it be to make it work the same way?”
Turns out: very hard.
I dug into the docs. I researched. I experimented. I don’t know how to code, but I do know how to problem-solve and break things down.
But the deeper I went, the messier it got. One change triggered another error. My layout broke. The logic was confusing. My head hurt.
And I almost quit. I took a break — convinced this wasn’t for me.
But something in me refused. I’d already put in 3–4 days of late nights. I wasn’t going to stop now.
So I changed my approach. I simplified.
I decided:
Just show the featured projects first.
Then list the rest by date.
No filters. No sorting. Just clean, clear, and mine.
I reverted to an earlier version and started again — this time, focused only on getting it to work. I used various tools to help me build the logic, but the decisions about what to build and how it should work? That was all me.
Simplicity won. And I don’t regret it.
The Game Changer:
Finding the Right Tool for the Job
After getting the basic site working, my brain started wandering: What if I redesigned just the homepage? Let me try.
But I was getting frustrated with my workflow. Copy-pasting code between different AI tools, losing context, dealing with errors — it was breaking my flow.
That’s when I remembered Cursor. I’d seen videos about it but never bothered to learn more. I assumed it was expensive, but figured I’d check it out.
When I saw they had 150 free requests, I downloaded it immediately.
This changed everything.
Not because it was magic, but because it understood my entire project. It could see how my components connected, what my styles affected, how my data flowed. It was like having a research assistant that never got tired of helping me understand my own codebase.
Down the Rabbit Hole:
When “Just a Gallery Page” Became Everything
Initially, I just wanted to add a gallery page — somewhere to share pictures and fun projects. With better tooling, I got it working in minutes.
But then I started seeing inconsistencies everywhere. If I could fix the gallery, why not make the project cards more cohesive? Why not improve the blog layout?
Each small improvement led to another. And another.
Then one day, I made a generic change and ended up with a completely different homepage hero section. It looked way better than what I had.
And that’s when my brain went: What if I redesigned the entire site?
There went my sleep schedule.
Two Weeks of Pure Obsession:
12-14 Hours a Day, Every Day
What followed was almost two weeks of 12-14 hour days. Not just coding — researching, planning, sketching rough ideas, testing, iterating.
I was obsessed with every detail:
- How the navigation felt
- Whether the hover states were smooth enough
- If the project cards told the right story
- Whether the layout actually made sense
Major improvements I made:
- Gallery experience: Instead of separate pages for each image, I created smooth popups
- Better filtering: The original theme sent you to different pages for filters. I made everything work on one screen
- Dynamic content: Work experience updates automatically from markdown files
- Smart status system: The site changes based on whether I’m available, freelancing, or working
Some of this required new functionality. Some was pure visual perfectionism. All of it was me being obsessive about the details.
The $20 Decision:
When Free Wasn’t Enough
After burning through free accounts (yes, I made multiple accounts), I hit a wall. The site was 80% there, but I had loose ends everywhere.
I spent a day thinking: spend $20 to finish this properly?
My original goal was a cheap solution. But I realized: if I’d used other platforms, I’d be paying monthly forever. This was a one-time cost to build exactly what I wanted.
So I paid for Cursor Pro.
Now I had to be strategic with my requests. I planned each change, wrote better prompts, gave clearer context.
4 AM Sessions:
Perfecting Every Micro-Detail
What followed were nights until 4 AM, obsessing over things most people would never notice:
- How buttons felt when you hovered over them
- Whether the spacing between elements was perfect
- If the animations enhanced the experience or distracted from it
- Whether the information hierarchy actually made sense
The hardest part wasn’t the coding — it was communicating visual problems. Sometimes I’d spend hours trying to explain that something looked “off” or “dull.”
My solution: Sketching. Drawing rough wireframes. Taking screenshots with annotations. Breaking down exactly what I wanted and why.
When the tools got stuck, I’d research solutions myself. I might not understand code, but I understand English. I’d find discussions, documentation, examples — then adapt them to my needs.
The Small Details That Matter:
Adding the Resume Button
During all this redesigning, I realized something was missing: an obvious way for people to see my experience.
So I added a clean Resume button to the navigation.
Just one click to download or view.
Seems simple, but the placement took thought. Visible but not intrusive. Accessible but not overwhelming. Connected to the right file and working everywhere.
It’s a tiny detail that makes a huge difference.
It says: “Yes, I’m ready. Here’s what I’ve done.”
Sometimes the smallest changes have the biggest impact.
Making It Mine:
Reshaping the Homepage Experience
Through all this work, the homepage became something that actually felt like me.
I completely rethought the original layout:
- Handpicked my strongest projects
- Rewrote descriptions to focus on impact, not just features
- Cleaned up the visual hierarchy
- Made sure every element had a purpose
Now it’s not just a list of projects — it’s a story. One that invites you to understand how I think and work.
This is my highlight reel.
The Technical Stuff:
Fixing the Grid Layout
One night, I was staring at the blog layout. I had a profile card at the top and below it, a box showing the tech I use.
But something looked wrong.
The “Techs” box was too narrow. It didn’t align with the card above it. Just sat awkwardly in the corner.
I wanted them to match. Simple, right?
It took forever to figure out.
The profile card was spanning multiple grid columns.
The tech box wasn’t.
I just had to match the spans.
One small change, but it made everything click into place.
The Final Push:
SEO and Performance
Near the end, I wanted to make sure the site could actually be found. Even though I don’t know much about SEO, I researched best practices and implemented them systematically.
I also tried adding scroll animations and page transitions. Some worked, some didn’t. But I’d already created something I was proud of.
What I Actually Learned
Let’s be honest: I still don’t know how to write code from scratch.
But I learned something more valuable:
- How to break down complex problems into manageable pieces
- When to research, when to experiment, when to step back
- How to communicate technical ideas even without technical language
- The importance of testing everything across different scenarios
- Massive respect for developers — the stuff I thought would be “easy” is often incredibly complex
Most importantly: I learned that you can build exactly what you envision if you’re willing to put in the work and learn as you go.
My new home office.
The Bigger Picture:
What This Means
This whole experience taught me that the barriers between “designer” and “developer” are more fluid than I thought.
I didn’t become a programmer. But I learned how to think about problems systematically, how to research solutions, and how to build something that works exactly the way I want it to.
The tools helped. But the vision, the persistence, the obsessive attention to detail — that was all me.
Why It Was Worth It
Today, I have a website that:
- Works exactly how I want it to
- Updates easily with just markdown files
- Costs nothing to maintain
- Grows with me as I learn and evolve
- Feels completely authentic
Every interaction, every layout decision, every piece of functionality — it’s intentional. It’s mine.
This isn’t just a portfolio. It’s proof that you can build exactly what you envision if you’re willing to figure it out as you go.
Built with Astro and determination.
Started with a theme and an idea.
Finished with sleepless nights, $20 well spent, and one designer who refused to settle for “good enough.”