From Zero to AI-Powered Portfolio in 7 Days: My Storyblok Challenge Submission

Sunil Kommuri — Sun, 22 Jun 2025 00:50:50 +0000

When I first saw the Storyblok Headless CMS Challenge on DEV, I saw it as more than a contest; it was a personal challenge. With a goal of learning headless CMS architecture from scratch, I set out to build a professional portfolio that was not only visually appealing but also packed with modern features that a senior developer would be proud of.

This post documents my week-long journey of intense learning, debugging, building, and ultimately, creating something I'm incredibly proud to share.

The Final Project: A Feature-Rich Portfolio & Blog
My final project is a complete, multi-page portfolio and blog, built with a fully decoupled architecture using Next.js for the frontend and Storyblok for the headless CMS. Every piece of content, from the hero text to the footer, is fully editable through Storyblok's amazing Visual Editor.

Dynamic, Component-Based Homepage: Built with a suite of custom Storyblok components including a Hero, About Me, a grid of my technical Skills, a list of my Projects, and a Footer.
Full-Featured Blog: Includes a main listing page (/blog) and dynamically-routed individual post pages (/blog/[slug]) powered by Next.js's Incremental Static Regeneration (getStaticProps and getStaticPaths).
Professional UX & Polish: Features a clean, responsive design, a sticky navigation bar, and subtle animations on page elements using Framer Motion for a smooth user experience.
The Standout Feature: An "Amazing AI" Assistant: To compete for the AI prize, I built a genuinely useful tool to solve a problem I face myself: writing concise summaries for my articles.
The AI Assistant: How it Works
This was the most challenging and rewarding part of the project. I built a dedicated /assistant page that leverages the OpenAI API to automatically generate summaries for blog posts.
The process involves:

A simple frontend on the /assistant page where I can paste my full blog post text.
A secure backend API route in Next.js (/api/generate-summary) that receives the text.
This API route calls the OpenAI GPT-3.5 Turbo model with a specific prompt instructing it to act as an expert content editor.
The generated summary is sent back to the frontend, ready to be copied and pasted directly into the summary field in Storyblok, dramatically speeding up my content creation workflow.
My Tech Stack
Frontend: Next.js / React
Headless CMS: Storyblok
Deployment: Vercel
Styling: Global CSS
Animation: Framer Motion
Syntax Highlighting: PrismJS
AI: OpenAI API
My Biggest Challenges & "Aha!" Moments
This journey was filled with real-world development challenges.

The HTTPS Proxy: The biggest initial hurdle was connecting my local http server to the secure https Storyblok editor. Solving this required setting up a local SSL proxy, which was a fantastic lesson in web security and networking.
The Stubborn CSS Bug: I spent hours debugging a styling issue where my CSS file was loaded, but the styles weren't applying. After methodically testing every part of the chain—from the file structure, to the import path, to the browser cache, to finally inspecting the browser's loaded sources—we found the culprit: a single, invisible typo in an import path. This taught me the immense value of being systematic in debugging.
Why I Enjoyed Using Storyblok
The Visual Editor is a game-changer. Being able to build reusable components in my code and then use them like Lego bricks to visually construct pages is incredibly powerful. Seeing content changes reflect instantly on my local development server without a page refresh made the entire development process faster and more intuitive.

Conclusion
This week has been an incredible learning experience. I went from having a concept to a fully deployed, feature-rich, AI-powered web application. This project is now the centerpiece of my own portfolio, and the skills I learned are invaluable. Thank you to DEV and Storyblok for this amazing opportunity!

https://github.com/sunilkommiri/storyblok-portfolio

Building a Packed Memory Match Game with PyGame & Exploring AI-Powered Development with Amazon Q CLI

Sunil Kommuri — Wed, 21 May 2025 23:21:42 +0000

Introduction
Remember those classic memory match games? Flip two cards, find a pair, and clear the board! In this post, we'll dive into a modern take on this beloved game, built from scratch using Python and the versatile PyGame library. We'll explore its cool features, walk through some key code components, and then take a detour into the exciting world of AI-assisted development by looking at what Amazon Q CLI is and how you might set it up, imagining how it could supercharge such a project

Supercharging Development: What is Amazon Q CLI?
Now, imagine you're building this game, or any software project. Sometimes you hit a snag, need to understand a new library, or want to generate some boilerplate code. This is where AI-powered assistants like Amazon Q come in Amazon Q is a generative AI-powered assistant from AWS designed to help with a wide range of business and development tasks. It can understand your questions, provide information, generate content, and even take actions based on your existing enterprise data and systems.
The Amazon Q CLI (Command Line Interface) would be a way to interact with Amazon Q's capabilities directly from your terminal. While a universally named "Amazon Q CLI" for all Q features might evolve, developers often interact with Q capabilities through existing AWS CLIs or specific service CLIs (like those related to Amazon CodeWhisperer, which is now part of Amazon Q).

Configuring an AWS CLI for Q Capabilities
If you're a Windows user who loves the Linux environment, Windows Subsystem for Linux (WSL) with a distribution like Ubuntu is a popular setup. Here’s a general guide on how you might configure an AWS command-line tool (which could provide Amazon Q features) within WSL.
Install WSL (if not already installed)
Step-1:Open PowerShell (as Administrator) and run: wsl --install
Step-2:sudo apt update && sudo apt upgrade -y
Step-3 Install Amazon Q CLI in WSL Ubuntu
curl -O https://q-cli.amazon.com/download/latest/q-linux-x64.zip
sudo apt install unzip
unzip q-linux-x64.zip
sudo mv q /usr/local/bin

Step-4 Authenticate Q CLI (first time only)
q login
This will open a browser (on your Windows side) to authenticate your AWS account. Just sign in and authorize.

Prompt

Memory Match Game: More Than Just Flipping Cards!
This isn't just a basic memory game. We've packed in several features to make it engaging and visually appealing:

Multiple Difficulty Levels: Catering to different skill levels, you can choose from "Easy" (2x3 grid), "Medium" (3x4 grid), or "Hard" (4x5 grid).
Diverse Card Themes: Why stick to one look? This game allows you to play with:
Numbers: Classic and clean.
Fruits: Colorful and fun, with dynamically drawn fruit icons!
Flags: Test your vexillology knowledge with simplified country flags!
Modern User Interface: Say goodbye to basic rectangles! The game boasts:
Rounded corners for cards, buttons, and panels.
Shadow effects for a sense of depth.
Interactive buttons with hover effects.
Clear visual distinction for card backs, fronts, and matched pairs.
Smooth Gameplay:
A brief delay before mismatched cards flip back, giving you time to memorize.
Clear tracking of moves and matches.
An intuitive menu system for selecting difficulty and theme.
A satisfying "You Win!" screen upon completion.

The Card Class
The heart of our game. Each card is an object with properties like its position (rect), value (for matching), flipped state, matched state, and an optional image for themes.

class Card:
rect: pygame.Rect
value: int
flipped: bool = False
matched: bool = False
image: pygame.Surface = None

def draw(self, surface, font, theme):
    if self.flipped or self.matched:
        # Draw card front (white rounded rectangle with shadow)
        shadow_rect = pygame.Rect(self.rect.x + 3, self.rect.y + 3, self.rect.width, self.rect.height)
        draw_rounded_rect(surface, (0, 0, 0, 50), shadow_rect, 10) # Shadow
        draw_rounded_rect(surface, CARD_FRONT, self.rect, 10)    # Front

        if theme == "Numbers":
            text = font.render(str(self.value), True, TEXT_COLOR)
            text_rect = text.get_rect(center=self.rect.center)
            surface.blit(text, text_rect)
        elif self.image:
            img_rect = self.image.get_rect(center=self.rect.center)
            surface.blit(self.image, img_rect)

        if self.matched: # Green overlay for matched cards
            s = pygame.Surface((self.rect.width, self.rect.height), pygame.SRCALPHA)
            s.fill(MATCHED_COLOR)
            surface.blit(s, self.rect)
    else:
        # Draw card back (blue rounded rectangle with shadow)
        shadow_rect = pygame.Rect(self.rect.x + 3, self.rect.y + 3, self.rect.width, self.rect.height)
        draw_rounded_rect(surface, (0, 0, 0, 50), shadow_rect, 10) # Shadow
        draw_rounded_rect(surface, CARD_BACK, self.rect, 10)    # Back
        # ... (pattern on the back) ...

The Button Class
For our interactive menu and in-game "Back" button, we have a Button class. It supports text, icons, hover effects, and rounded corners for that modern feel.

**
class Button**:
def init(self, x, y, width, height, text, font, icon=None):
# ... (initialization) ...

def draw(self, surface):
    # ... (draws shadow, button body with hover color, icon, and text) ...

draw_rounded_rect Utility
A neat helper function to draw rectangles with rounded corners, used extensively for the UI.

def draw_rounded_rect(surface, color, rect, radius=0):
# ... (implementation using pygame.draw.rect with border_radius) ...
Dynamic Theme Generation
Instead of static image files for all themes (though that's also an option!), the "Fruits" and "Flags" themes dynamically generate their visuals as PyGame Surface objects. This is a cool way to keep the asset dependencies low.

create_fruit_images(): Draws simple representations of fruits with their names.
create_flag_images(): Draws simplified versions of country flags. This demonstrates a bit more complex drawing logic for varied patterns.
Game Logic in main()
The main() function is the conductor of our orchestra. It handles:

Game States: Switching between "menu", "playing", and "game_over".
Event Loop: Processing player input (mouse clicks for cards and buttons, quitting the game).
Card Mechanics:
Flipping cards when clicked.
Tracking the current_flips (up to two cards).
Comparing card values for a match.
Updating matched status.
Implementing the FLIP_DELAY_MS for mismatched pairs to flip back.
UI Drawing: Rendering all visual elements based on the current game state, including stats like moves and matches.

DEV Community: Sunil Kommuri

From Zero to AI-Powered Portfolio in 7 Days: My Storyblok Challenge Submission

Building a Packed Memory Match Game with PyGame & Exploring AI-Powered Development with Amazon Q CLI