How to wireframe a portfolio site before writing code
wireframing basics, section layout, above the fold, navigation structure, mobile-first planning, content hierarchy, tools for wireframing
Wireframe First, Code Second
Jumping straight into code without a wireframe is how you end up rebuilding your layout three times. A wireframe takes 20 minutes and saves you 3 hours.
The Five Sections Every Portfolio Needs
Hero: Your name, one-line role description, and a primary call-to-action button. Above the fold. No scrolling required.
About: Two to three sentences about your background and what kind of work you want. Not a life story.
Projects: Cards with project name, screenshot or demo GIF, one-line description, and links to live demo and GitHub.
Skills: A flat list or grouped tags. No progress bars — they are meaningless.
Contact: Email link, GitHub, LinkedIn. Optionally a short contact form.
Mobile-First Wireframing
Design for 375px width first. Most recruiters browse portfolios on their phones during commutes. If it looks broken on mobile, you lose them immediately.
Sketch on paper or use Excalidraw for a quick digital wireframe. You do not need Figma for this. The goal is to decide content order and section structure before touching HTML. Lock in your layout decisions here so your CSS work has a clear target.