Improve the existing v0-portfolio-website layout alignment to resolve the current spacing/clashing issues where some elements are pushed too far left and conflict with nearby text. Adjust alignment and spacing across the affected sections so everything lines up cleanly (consistent left/right padding, matching grid/column alignment, and consistent margins), while preserving the current content, structure, and styling choices as much as possible.
Looking at the screenshots:
- Skills section: The "TECHNICAL STACK" heading is crammed into the left column and visually clashes with the skill cards grid on the right — the heading appears cut off and the spacing between heading and cards is inconsistent.
- Blog & Contact sections: The "View All Writing" button and "LET'S CONNECT" heading are pushed far left while content starts from a different grid column, creating an unbalanced, disjointed layout with too much whitespace in between.
Let me fix the grid alignment across these sections:
The issue is the inconsistent grid column ratios. Skills uses a 4-column grid with 1:3 split, while Blog and Contact use a 3-column grid with 1:2 split. The 4-column grid makes the heading column too narrow. I'll standardize all sections to use consistent stacked layouts (heading above content) which works better with the wide max-w-5xl container.
I've fixed the layout alignment issues across the Skills, Blog, and Contact sections. The changes switch from side-by-side grid layouts (which caused the heading to get cramped and clash with content) to a cleaner stacked layout where headings sit above content. The Skills section now uses a clean 3-column grid for the skill cards, the Blog section places the heading and "View All Writing" button on the same row with flexbox, and the Contact section stacks vertically for better flow. All sections now align consistently within the max-w-5xl container.
I pulled the latest changes from v0/oentorofadam-4757-73753bfc in v0-portfolio-website.