VividArt - Project Details

Project Overview

This portfolio is a personal archive of expressive line work, observational sketches, and character studies — capturing form, gesture, and emotion through the simplicity of pencil and pen. Focused solely on drawing and sketching, it highlights a commitment to raw technique, storytelling through contour, and the subtleties of visual rhythm.
Each piece reflects a blend of instinct and discipline, offering viewers an intimate look into my evolving perspective as a sketch artist.

Category: Art Portfolio

Completed: March 2023

Challenges & Solutions

⚡

Creating a Personal Yet Professional Feel

Balancing expressive design with usability.

Solution

Chose a neutral color palette, custom fonts via Google Fonts, and subtle animations using CSS transitions to enhance mood without distraction.

⚡

Creating an Intuitive, Gallery-Like Layout

Needed a clean, expressive way to showcase hand-drawn pieces.

Solution

Built a custom grid layout with CSS Flexbox and media queries. Added hover effects and modal popups using vanilla JS for full-size previews.

⚡

Displaying High-Resolution Art Without Slowing the Pag

Large image files risked slow load times and layout shifts.

Solution

Manually optimized image sizes and formats (e.g., using .webp where possible). Used CSS media queries and object-fit to ensure smooth scaling across devices.

⚡

Expressing Artistic Intent Without Overcomplicating the UI

Each piece needed context without clutter.

Solution

Included caption overlays, simple tooltips, and a dedicated “About the Art” section with short blurbs written in HTML.

⚡

Maintaining Visual Consistency Across Devices

Ensuring the site looked polished on mobile and desktop.

Solution

Applied responsive design using percentage-based widths, rem/em units, and breakpoints. Tested manually across screen sizes.

⚡

Organizing a Growing Collection Without a Database

Needed a scalable way to add new pieces.

Solution

Structured the site using modular HTML sections and JavaScript arrays to dynamically render image cards. Used consistent naming conventions for easy updates.

⚡