Live Site: art.fahrnbach.one
Repo: github.com/fahrnbach/art-app
Art App is a visually-driven, desktop-first single-page application built with vanilla JavaScript, HTML, and CSS. Originally conceived as a full-stack social media platform for showcasing creative portfolios, it evolved into a month-long design journey focused entirely on precision, aesthetic harmony, and interaction design.
Every visual element—from the spacing of buttons to the layering of AI-generated imagery—has been intentionally crafted in Adobe Illustrator and refined in Photoshop. The imagery is sourced through creative glitching and generative techniques, handpicked and edited to match the tone and palette of the app.
This project is not only a demonstration of front-end web development, but also a portfolio of my design process: iteration, layout precision, and thematic cohesion.
- Unique Gear Panel (≡⚙): A standout interactive feature. Rather than leading to settings, the gear icon toggles an interactive sidebar for leaving notes or comments—offering a twist on user expectations.
- Responsive Design: Optimized for large-screen and desktop viewing, with future plans for mobile adaptation.
- Live Deployment: Hosted on Cloudflare Pages and automatically deployed on commit.
- Angular Rewrite: Planned migration for improved maintainability and scalability.
- Backend Integration: User authentication and data persistence will be added using Node.js and a database (TBD).
- Mobile App Extension: A complementary mobile experience is planned for extended interactivity.
- Frontend: HTML5, CSS3, JavaScript (Vanilla)
- Design Tools: Adobe Illustrator, Photoshop
- Hosting: Cloudflare Pages (CI/CD with GitHub)
This app stands as a visual case study in what can be achieved with deliberate design, foundational web skills, and a deep commitment to aesthetic detail.
Live App: art.fahrnbach.one
Repo: github.com/fahrnbach/art-app
Art App began as an idea for a full-stack portfolio-sharing social media platform to connect artists with employers and collaborators. However, as the idea matured, it became something more foundational: a personal exploration of interface design, visual storytelling, and what it means to build a digital space that feels alive.
The project pivoted from feature-completeness to design excellence—an exercise in detail, iteration, and aesthetic refinement.
- Showcase design ability with complete visual control over layout and interactions
- Create a memorable and unique user experience
- Build a functional and deployable web app using only HTML, CSS, and vanilla JS
- Push the boundaries of design polish within a web context
- Every visual element is custom: Buttons, icons, layout components, and even interaction metaphors were designed from scratch in Adobe Illustrator.
- Image curation and editing: All featured images were either generated by AI or glitching tools, then edited in Photoshop to match the site’s color scheme, theme, and atmosphere.
- Design language: The app uses symmetry, balance, and intentional whitespace to draw the user into the interface and emphasize the layout structure.
- "Gear Panel": The signature UI element—a gear icon that opens not a settings menu but a left-hand interactivity panel for user comments and notes. This unexpected function creates a sense of discovery and subverts typical UX assumptions.
- Hover & reveal: Many elements use subtle CSS transitions to create a fluid feel and suggest interactivity without overwhelming motion.
- Desktop-first: Optimized for larger screens where the full experience of detail and layout can be appreciated. A mobile version is planned for the future.
- Frontend: HTML5, CSS3, Vanilla JavaScript
- Design Tools: Adobe Illustrator, Photoshop
- Hosting & CI/CD: Cloudflare Pages (auto-deploy on push via GitHub)
- No Frameworks, No Dependencies — this project is pure web fundamentals.
This app is continuously deployed through Cloudflare Pages and tracks directly with the GitHub repo. This setup allows instant testing and iteration, fitting the rapid design-driven development workflow used during the project.
- Angular Rewrite: To scale and modularize the UI for future features like user accounts and backend integration.
- Node.js Backend: To support comments, portfolio uploads, and user profiles.
- Mobile App Companion: Envisioned as a streamlined reader or uploader for art content.
Art App became a showcase not just of design capability but of the discipline it takes to stop building features and start refining the core experience. It stands as a powerful example of what can be accomplished with:
- Thoughtful visual storytelling
- Solid frontend foundations
- A dedication to custom design from first sketch to final pixel
This is what happens when development and design are allowed to fully collaborate—inside a single mind.
- 🌐 Portfolio: fahrnbach.one
- 💼 LinkedIn: https://www.linkedin.com/in/fahrnbach
- 📧 Email: jacob@fahrnbach.one
“Code is craft. Design is empathy. My goal is to bridge the two.”