MAXIMOTO.DEV
Back to Home

Building My Interactive Portfolio

From Static Page to Dynamic Application

When I decided to build my personal portfolio, I knew I wanted to create more than just a static HTML page. I wanted to build a living application—a testament to my skills as a full-stack developer that could dynamically update, showcase my work in interesting ways, and integrate with the modern, decentralized web. This post is a deep dive into the architecture and technology choices behind the very site you're reading this on.

The Core Architecture: A Headless Approach

I chose a modern, decoupled architecture with a distinct frontend and backend. This is a standard pattern for scalable web applications and offers several key advantages:

  1. Flexibility: The frontend and backend can be developed, deployed, and scaled independently.
  2. Specialization: It allows for using the best tool for the job—Python/Django for its robust backend capabilities and React for its rich, interactive user interfaces.
  3. API-First Design: The entire application is powered by a RESTful API, a crucial skill in today's development landscape.

Here's a high-level overview:

  • Frontend: A static single-page application (SPA) built with React and Vite, hosted on Vercel for global CDN delivery.
  • Backend: A REST API built with Django and Django Rest Framework, hosted on Render.
  • Database: A managed PostgreSQL instance, also on Render, serving as the single source of truth for my projects, certifications, and these blog posts.

Key Features and the Tech Behind Them

1. The AI Skill Matcher

This is my favorite feature. Instead of just listing my projects, I wanted to create a tool for recruiters and clients. You can paste a job description or a list of keywords, and the backend uses a Sentence Transformer model (all-MiniLM-L6-v2) to perform a semantic search.

  • How it Works: The model converts both the user's query and my project descriptions into high-dimensional vectors (embeddings). It then uses Cosine Similarity to find the projects that are most semantically related, even if the exact keywords don't match. This demonstrates a practical application of modern NLP techniques.

2. Nostr & Bitcoin Integration

As a believer in decentralization, I wanted to connect my portfolio to the open web.

  • Nostr Profile & Notes: The backend includes a service that connects to public Nostr relays using the pynostr library. It fetches my latest profile data (a kind:0 event) and my most recent public note (a kind:1 event) and caches the results. This makes my portfolio a live reflection of my activity on the network.

  • Bitcoin Tipping: The "Tip Me" button is powered by a backend wallet created with bitcoinlib. The backend generates a persistent SegWit address, which is then displayed in a modal on the frontend with a QR code. This provides a universal way for anyone to send an on-chain Bitcoin tip.

3. Dynamic Content Management

All the content you see—projects, certifications, and this very blog post—is managed through the built-in Django Admin Panel. I can add, edit, and delete content from a secure interface without ever needing to redeploy the application. This is the power of a true CMS-backed architecture.

What I Learned

Building this project was an incredible learning experience, especially the deployment process. Navigating the resource constraints of free-tier hosting, debugging CORS and DisallowedHost errors, and ensuring a smooth CI/CD pipeline between GitHub, Render, and Vercel provided invaluable real-world DevOps experience.

This portfolio is a project in itself, and I'm excited to continue adding features to it. Thanks for reading!