Transform Your Resume into an Interactive UI/UX PortfolioTransform Your Resume into an Interactive UI/UX Portfolio
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
Kh Rakib's avatar
Kh Rakib Ul Islam
• Jun 19
Problem: In today’s remote hiring environment, recruiters and hiring managers often review many UI/UX portfolios quickly. Most portfolios either focus too much on visuals or feel like generic client-hunting websites. They often miss the trust-building details recruiters need, such as experience, role clarity, real project involvement, testimonials, certifications, and professional background.
For UI/UX designers, this creates a gap. A portfolio should not only show design work; it should also help people understand who the designer is, what they have worked on, how they collaborate, and why they are reliable to hire.
Goal: The goal of this website is to turn my resume into a live, interactive portfolio experience. Instead of keeping my professional journey limited to a PDF, the site presents my experience, projects, certifications, testimonials, and contact information in a clean and easy-to-scan format.
The main goal is to build trust quickly and help recruiters, hiring managers, and potential clients understand my value as a Product Designer.
Target Users:
The primary users of this website are recruiters, hiring managers, product teams, startup founders, agencies, and potential clients looking for a UI/UX or Product Designer.
Solution:
I designed the portfolio as a resume-inspired website that combines professional credibility with a modern visual experience.
How It Was Built
This portfolio website was built entirely using Figma Design and Figma Make. Live Site: https://rakib.figma.site/
I started by exploring portfolio design inspirations to define the visual direction and structure. To save AI token/credit, I did not build everything directly inside Figma Make from the beginning. Instead, I first designed the final look and layout of the portfolio in Figma Design.
Once the design was complete, I used a single prompt in Figma Make to generate the full website from the design direction. After that, I refined the site by working on micro-interactions, animations, layout adjustments, and debugging where needed.
Finally, I focused on responsiveness to make sure the portfolio works smoothly across different screen sizes and devices.
Psychological funnel: The psychological funnel of this portfolio site is basically:
Attention → Trust → Proof → Confidence → Action
This site not only shows work. It is slowly guiding a recruiter/client to feel: “Okay, this person looks professional, experienced, trusted, and easy to contact.” 1. First Impression / Attention Section: Hero area with your photos, short intro, and “View Resume” button. Psychological goal: Make visitors instantly understand who you are. Emotion created: curiosity + personal connection.
2. Credibility Trigger Section: Client/company logos under the hero. Psychological goal: Show that you have worked with real companies. Emotion created: initial trust. 3. Professional Identity Section: About Me + experience timeline. Psychological goal: Explain your background clearly. Emotion created: confidence in your professional background. 4. Capability Proof
Section: Latest Projects. Psychological goal: Show visual proof of your design ability. Emotion created: interest + evaluation. 5. Authority & Skill Validation
Section: Certified by. Psychological goal: Show that your skills are supported by learning and certification. Emotion created: reassurance. 6. Social Proof
Section: Testimonials / “They Say.” Psychological goal: Let other people validate your work. Emotion created: trust + safety. 7. Final Conversion Section: Dark footer with your name, “Get in touch,” and “Resume.” Psychological goal: Push the visitor to take action after building enough trust. Emotion created: readiness to act.
All Links:
Video: https://www.loom.com/share/86cb2fdefc2540719ab0d9eb37cc2560
Figma Design: https://www.figma.com/design/Nw9wYfrVjaRZC3dw2CejMZ/Kh-Rakib-Portfolio-Site-Design?node-id=4005-9&t=5PEhMF9nbHm6LRHp-1
Figma Make: https://rakib.figma.site Socials: X: https://x.com/ukhrakib/status/2067817995284685196?s=20 Instagram: https://www.instagram.com/reel/DZwMlVmMzKp/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==
configmakeathonFigma
Back to feed
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