Hovnan J. Alexanian
Hovnan Jonah Alexanian: Innovating Visual Content
Full-Stack Software Development Director & IT Executive
Click to experience the application live or explore its documentation!
My Active Portfolio: Interactive Image Layer Editor
Welcome to my Interactive Image Layer Editor, a full-stack application designed to revolutionize how visual content is created and scaled. Born from a real-world need to empower developers and content creators, this platform offers a unique synergy between intuitive graphical design and powerful programmatic automation. It’s a testament to rapid, AI-assisted development and robust architectural decisions, ensuring pixel-perfect consistency from concept to mass production.
The Vision & Driving Force: Solving the Visual Content Dilemma
My journey to building this image layer editor began with a fundamental challenge encountered while developing an AI-based autonomous social media posting platform. While the AI excelled at generating compelling text content, it consistently fell short in producing visually consistent, contextually relevant, and aesthetically pleasing images for posts. This exposed a critical gap: programmers, myself included, often lack graphic design expertise, making the visual aspect of content creation a significant bottleneck.
The “aha!” moment came from the realization that we needed a tool that could abstract the complexities of graphic design, allowing for programmatic control over visual composition. My initial concept revolved around defining reusable visual templates: imagine a base background image (like an autumn scene or an ocean view) where specific “hotspots” could be precisely designated – areas to “hollow out” or replace with other images, text overlays, or graphical elements.
Core Goals:
- For Designers & Visual Creators: An intuitive WYSIWYG graphical interface (the Svelte application) where they can freely drag, drop, resize, rotate, and layer elements with immediate visual feedback. This is where a designer meticulously crafts a “master template,” ensuring every pixel is in its place.
- For Programmers & Automators: Once a visual template is perfected in the GUI, its underlying parameters can be extracted. The FastAPI backend then empowers developers to programmatically reuse this template, generating countless variations by simply changing data – swapping product images, updating text, or adjusting properties – without ever needing to touch the GUI again.
This dual approach ensures that creative vision can be seamlessly scaled and automated, guaranteeing consistent brand messaging and layout across vast quantities of visual content.
Core Technologies Powering This Project:
Python (FastAPI)
MySQL (Direct SQL & Connection Pooling)
JavaScript (Svelte)
HTML & CSS (Tailwind CSS)
Ubuntu
Nginx
Cloudflare (Tunnel, CDN, DDoS Protection)
WordPress (Authentication)
AI-Assisted Development, SDLC, Reverse Engineering
Engineering for Precision & Scale: Architectural Decisions
Backend – FastAPI (Python) & MySQL
The FastAPI backend is the cornerstone for all image composition. It’s crucial that complex operations like layering, resizing, rotation, text rendering, and handling diverse formats (including challenging SVGs, which are rigorously sanitized on upload to prevent potential script injection vulnerabilities) occur on the server. This guarantees pixel-perfect consistency regardless of the client’s browser or device, and offloads heavy computation from the user’s machine.
My deep expertise in SQL led me to bypass ORMs. I chose to implement direct SQL queries combined with efficient connection pooling within the Python environment. This provides granular control over database operations, ensuring high-performance, scalable data access for managing project configurations, user data, and layer properties.
Python’s rich ecosystem for image processing libraries (e.g., Pillow, CairoSVG) made it the ideal choice, and FastAPI offered the speed and asynchronous capabilities required for a responsive API.
Frontend – Svelte (JavaScript)
Svelte serves as the interactive, WYSIWYG graphical user interface. It provides the drag-and-drop functionality, real-time visual feedback, and precise manual controls that allow users to design complex visual layouts and templates. Its reactive nature ensures that every adjustment is immediately reflected on the canvas.
Chosen for its performance and developer experience, Svelte simplifies the creation of highly interactive UI elements, making the complex image design process feel fluid and intuitive.
Synergy & Workflow
The Svelte frontend and FastAPI backend form a powerful symbiotic relationship. Svelte provides the essential visual design environment for crafting master templates, while FastAPI acts as the robust, headless engine for automated, scalable rendering of these designs based on parameters. This empowers both creative design and industrial-scale content generation.
Infrastructure – Ubuntu, Nginx, Cloudflare Tunnel
The application is hosted on a secure Ubuntu server at home. Nginx efficiently manages incoming requests, routing them to the appropriate backend services and serving static files.
To expose the application securely to the internet without direct port forwarding, Cloudflare Tunnel is employed. This creates a secure, outbound-only connection, significantly enhancing the security posture of the home server. Cloudflare’s CDN further boosts global performance, while its DDoS protection ensures resilience against attacks.
Authentication – WordPress Integration
WordPress is pragmatically integrated to manage user accounts and generate JWT (JSON Web Token) API keys. This provides a robust, pre-built authentication layer for both the Svelte UI and direct API calls to the FastAPI backend.
Innovating Under Pressure: Challenges & Solutions
Challenge: AI’s Early Visual Content Generation Gaps
My initial foray into AI-based social media posting highlighted that while AI was excellent for text, it consistently struggled to generate consistent and stylistically accurate visual content at the time.
Solution: Building a Generative Tool (Not Just Relying on Generative AI)
Instead of waiting for generative AI to mature sufficiently for visual consistency, I shifted focus to building a programmatic composition tool. This platform empowers users to design precise visual templates, which can then be automated, ensuring exact control over the final output – a crucial capability that AI alone couldn’t provide.
Challenge: Complex Server-Side Image Compositing
Rendering diverse layers (raster images like JPG, vector graphics like SVG, and dynamic text) with precise transformations (rotation, scaling, opacity, masking) on a backend required robust image processing libraries and careful handling of rendering pipelines.
Solution: Custom FastAPI Image Processing
Implemented custom logic within FastAPI, leveraging Python’s rich image manipulation libraries to ensure accurate and high-fidelity rendering for all layer types, specifically addressing nuances like SVG dimension interpretation.
Challenge: Bridging the Design-Code Divide
Creating a system that satisfies both visual designers (who need intuitive drag-and-drop) and developers (who need programmatic control and automation).
Solution: Synergistic Frontend-Backend Design
By providing the Svelte GUI for visual template creation and the FastAPI API for automated rendering, the platform effectively bridges this gap, enabling seamless collaboration and scalability for visual content workflows.
Innovation: AI as a Development Co-Pilot
While the application addresses a limitation of AI in graphic design, AI was a crucial partner in the development process itself.
Result: Accelerated Development & Deployment
By leveraging AI as a co-pilot for coding, debugging, and architectural guidance, I was able to accelerate the full application development and deployment cycle to an impressive 3 months, demonstrating extreme efficiency and adaptability in modern development practices.
Lessons Learned & Vision for the Future
This project has reinforced my understanding of full-stack development, the critical importance of server-side rendering for consistency, and the power of building specialized tools to fill specific needs. It underscores my philosophy of continuous improvement and the immediate application of new technologies.
Vision for the Next Evolution: Intelligent Object-Based Image Manipulation
- AI-Powered Image Breakdown: The system will intelligently analyze uploaded images, automatically breaking them down into discrete, identifiable “objects” (e.g., windows, doors, garage doors, specific plants, furniture, etc.).
-
Modular Object Storage & Replacement: Each detected object will be stored and managed independently, while seamlessly reassembling to form the complete image. Users will then gain the revolutionary capability to hide any detected object and replace it with alternatives from a curated library.
- Use Cases: A window seller could take a picture of a house, have the AI identify the windows, and then easily swap in different window styles they sell to show how they would look. Similarly, a gardener could select a section of a garden and instantly preview different fountains, trees, or flower arrangements.
- Enhanced Customization & Precision: For elements not automatically identified by AI, users will retain the flexibility to manually select and define specific areas as new objects. Furthermore, a magnification feature will be introduced, allowing for pixel-perfect placement and alignment of replacement objects, ensuring highly realistic composite images.
This evolution will position the platform as an invaluable visualization tool for industries like home improvement, landscaping, interior design, and e-commerce, offering a truly innovative way to showcase product variations within real-world contexts.
About Me & My Professional Background
I am Hovnan Jonah Alexanian, an accomplished IT executive and Full-Stack Software Development Director. My career is defined by a passion for innovation, a commitment to solving complex technical challenges, and a drive for continuous learning. I thrive under pressure, excel at delivering projects on time and budget using robust SDLC methodologies, and enjoy collaborating to achieve shared objectives. My latest project showcases my ability to rapidly build and deploy sophisticated solutions, even leveraging AI as a development co-pilot.
Professional Experience Highlights:
- Led and managed full-stack software development teams, consistently delivering projects on time and within budget.
- Designed and implemented scalable architectural solutions for complex applications.
- Expert in database management, including direct SQL and connection pooling for high-performance data access.
- Proficient in modern frontend frameworks (Svelte, React, Vue) and backend technologies (FastAPI, Node.js, Django).
- Experienced in cloud infrastructure (Cloudflare, AWS, GCP) and containerization (Docker, Kubernetes).
- Strong advocate for AI-assisted development, leveraging cutting-edge tools to accelerate project cycles.
- Proven ability to bridge the gap between technical teams and business stakeholders, translating complex requirements into actionable development plans.
- Skilled in reverse engineering and optimizing existing systems for improved performance and reliability.
Key Skills:
FastAPI
Svelte
JavaScript
MySQL
SQL
Nginx
WordPress
Cloudflare
Ubuntu
HTML5
CSS3
Tailwind CSS
AI-Assisted Development
SDLC
Reverse Engineering
Project Management
Team Leadership
System Architecture
Education & Continuous Innovation:
Driven by an insatiable curiosity and commitment to continuous improvement, I rapidly acquire and master complex computer science subjects and emerging technologies through intensive, self-directed study, typically consuming entire booksets within months. My passion lies in learning and immediately applying new technologies to develop robust and innovative solutions.
- California State University, Fullerton: Field of Study: Computer Science
- Montebello High School: Field of Study: Computer Science | GPA: 3.65
Let’s Connect!
I am always interested in discussing new opportunities and challenges.