The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Website Design Case Study – Personal Portfolio / About Page
This project is a modern personal portfolio website section (About Me page) designed to present a designer’s skills, services, and credibility in a clean, conversion-focused layout.
1. Concept & Planning
The design was structured around a personal branding goal: clearly communicating expertise while maintaining visual appeal. I planned the layout to guide users through a logical flow:
Introduction (hero/about section)
Skills and competencies
Services offered
Client testimonials
Contact and footer details
The focus was on clarity, hierarchy, and trust-building elements.
2. UI/UX Design Approach
I used a dark-themed interface with orange accent colors to create strong visual contrast and a modern tech-oriented feel.
Key UX decisions included:
Clear navigation bar for quick access to sections
Strong hero section with personal introduction and profile image
Card-based layout for skills and services for easy scanning
Consistent spacing and alignment to improve readability
Reusable components (cards, buttons, badges) for design consistency
3. Visual Design & Components
The interface was built using a structured component system:
Hero section: Profile image + introduction + call-to-action buttons
Skills section: Icon-based skill cards with progress indicators
Services section: Image cards highlighting offerings like UI/UX, web design, and development
Testimonials section: Social proof cards with client feedback and ratings
Footer section: Contact details, navigation links, and newsletter input
The typography and spacing were optimized to maintain hierarchy and reduce visual clutter.
4. Design Tools & Workflow
The design was likely created using tools such as Figma or Adobe XD, following a typical workflow:
Wireframing layout structure
Designing high-fidelity UI components
Applying color system and typography scale
Creating reusable design elements
Final layout assembly and visual refinement
5. Outcome
The final result is a professional, conversion-focused portfolio page that effectively communicates:
Technical skills and expertise
Service offerings
Client trust through testimonials
Clear contact pathways for potential clients
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Some branding we did for a prediction market platform on Solana. Will share web + product designs soon!
Nice, Everything looks so aligned 🙌
A few days ago, I shared a preview of this project. Now it's finally live ✨
While working on this website concept for an interior design studio, I kept asking myself:
How do you make a website feel as cozy as a beautifully designed home?
The answer wasn't in flashy animations or complex layouts. Instead, I focused on atmosphere — elegant typography, rich imagery, thoughtful spacing, and a balance between warmth and luxury.
Curious to hear your thoughts: What’s the first feeling this design gives you? 👀
We're emotional beings. Our tools rarely are.
Emotions can't really be taught. They arrive through lived experience, already packaged with a thousand tiny feelings and nuances we carry without thinking. So what if an interface tapped into that?
Meet Clothesline 🧺, a to-do list with feelings.
Instead of "an urgent, high-priority, do-or-die task," you simply have a bedsheet-sized goal for the year and a sock-sized one for today. One glance and you know exactly how much you're holding.
Create, save, and track your goals right in your browser, the same way you'd hang, dry, and fold your laundry. Close the tab or restart your browser and your line stays exactly how you left it, so nothing ever slips away.
The rope sags under the weight you carry, a little bird drops by with daily inspiration, and finished goals get folded away. It even makes a lovely little second-monitor companion to glance at while you sip your coffee and work.
Built end to end in Figma: Design, Weave, MCP, Make, Sites, and Slides.
🧑🏼🎨 A small experiment in emotional interface design, software that doesn't just track your goals but feels alive alongside them.
It still amazes me how fast an idea can travel from your head to something real, alive, and in your browser.
Notes for reviewers: the overdue state (storm and rain) normally triggers when a goal passes its due date. To preview it without waiting for real time to pass, add a goal and press 'n' for +1 day, 'm' for +1 month, or 'r' to reset. You'll see the sky turn and the line react, so you can fold fast or change the due date.
Links:
--------------------------------------------------------------
Live site
--------------------------------------------------------------
Community file
--------------------------------------------------------------
Process/BTS slides deck (To Learn-Apply-Amplify)
* videos might take some time to load
--------------------------------------------------------------
Linkedin ✦ Instagram
Song playing: "What A Wonderful World" - Louis Armstrong
#emotionalinterfacedesign #goalsetting #todolist #goals #ConfigMakeathon
#Storytelling #Userexperiencedesign @Figma @Contra
Woahhh!!! ✨
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
MagicPath
The canvas is infinite, and exploration is becoming the workflow. How are you using MagicPath?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?
