Inspiration
The inspiration for Arqen came from my fascination with minimalism in architecture—how the simplest forms can create the most impactful spaces. I wanted to translate this philosophy into a digital experience, showing that elegance and functionality can coexist even in web design without relying on JavaScript. The idea was: “If architecture can impress with simplicity, why not a website?”
What it does
Arqen is a fully responsive, single-page architecture portfolio built purely with HTML and CSS. It showcases residential, commercial, and public projects through a dynamic bento-grid layout. Each project card includes hover animations and info overlays, creating an interactive feel without JavaScript. The site also highlights the studio’s philosophy, services, and contact information in a clean, minimalist design.
How we built it
HTML & CSS only – no JavaScript at all.
Bento-grid layout to display projects asymmetrically and creatively.
Hover effects using transform, scale, and translate for interactivity.
Responsive design with CSS Grid and media queries to ensure it looks great on all devices.
Thoughtful typography, spacing, and color palette to match minimalist principles.
Challenges we ran into
Creating interactive project cards without JavaScript was tricky and required creative use of CSS transitions and 3D transforms.
Ensuring the bento-grid layout remained visually balanced on smaller screens required multiple responsive adjustments.
Maintaining consistent typography, spacing, and readability across all sections while keeping the design minimalist.
Accomplishments that we're proud of
Built a polished, interactive site using only HTML & CSS.
Successfully implemented hover animations, overlays, and a responsive bento-grid layout.
Created a modern, minimalist portfolio that stands out visually while remaining functional and readable.
What we learned
Advanced CSS Grid and layout techniques for dynamic designs.
How to create interactivity and visual effects using only CSS.
The importance of spacing, typography, and colour harmony in communicating a design philosophy.
How to translate architectural minimalism into web design effectively.
What's next for Arqen—Minimalist Design Studio
Add more CSS animations and micro-interactions for an even more engaging experience.
Experiment with CSS-only theme switching for dark/light modes.
Expand the portfolio with more project types and interactive sections, still without relying on JavaScript.
Potentially explore CSS + SVG animations to showcase architectural concepts dynamically.
Log in or sign up for Devpost to join the conversation.