PORTFOLIO > AI IN WEB DEVELOPMENT

Using ChatGPT to Streamline My Graphic Design Portfolio Redesign

This page outlines how I used ChatGPT as part of my front-end workflow to improve the structure, responsiveness, and presentation of my graphic design portfolio page. Rather than using AI to replace development work, I used it to accelerate ideation, critique, debugging, and CSS/HTML refinement.

Project Goal

My goal was to improve an existing portfolio page that already functioned, but needed a more polished layout, stronger section hierarchy, better image organization, and cleaner responsiveness on smaller screens. I wanted the final result to look more intentional and professional while still fitting the style of my website.

How I Used AI

1. Shared the existing HTML and CSS

I provided the original code so the AI could review the structure, identify weak points, and work within the design system I already had.

2. Used AI for layout critique and redesign ideas

ChatGPT helped identify issues such as the page feeling like one long stream of images, weak visual separation between sections, and limited hierarchy.

3. Applied AI suggestions selectively

I used the suggestions that fit my vision, including reorganizing content into cleaner sections, using image grids, improving spacing, and refining the page structure.

4. Used AI to help debug the main menu

I also used ChatGPT to diagnose responsiveness issues in my main navigation, including hover-driven layout shifting and awkward hamburger behavior on smaller screens.

What AI Helped Me Improve

Layout and Presentation

AI helped me explore better ways to structure the portfolio page, including grouping projects into clearer sections and using grid-based presentation for images.

Responsiveness

AI helped identify CSS behaviors that were hurting the mobile experience, especially in the menu, and suggested cleaner responsive patterns.

UI Refinement

I used ChatGPT to speed up the process of improving spacing, hierarchy, hover behavior, and overall visual polish without having to rethink the whole page from scratch.

Workflow Efficiency

Instead of spending as much time manually testing broad redesign directions, I used AI to generate targeted improvement ideas that I could evaluate and implement faster.

What This Demonstrates

This project demonstrates my ability to use AI as a practical development tool within a real front-end workflow. I know how to provide code context, interpret AI suggestions critically, and apply them in a way that supports my design goals rather than replacing them.

HTML
CSS
Responsive Design
Frontend Debugging
AI-Assisted Development
UI Refinement

Takeaway

Using ChatGPT in this project helped me streamline ideation, debugging, and design refinement while keeping control over the final direction. The result was a stronger portfolio page and a concrete example of how I can integrate AI into web development workflows to work faster and more effectively.