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
Final Part of My "Rebuilding My Web Dev Portfolio" Series 🚀
The last stage of rebuilding my portfolio came down to two things:
Adding animations and Deploying the new site
For the animations, I used Framer Motion. I wanted the experience to feel polished without overwhelming the user, so I focused on subtle interactions that enhance usability:
✨ Hover animations for navigation and sidebar buttons
✨ Smooth card-to-page transition, project cards expand from the home page into their full detail pages.
✨ Image carousel hover effects with highlight and scale interactions
✨ Smooth enter/exit transitions for selected carousel images
Once everything was finished, I deployed the static site generated (SSG) build to Netlify.
And that's it! 🎉
The portfolio is now complete and live:
This project was a great opportunity to improve not only the design and development of my portfolio, but also the overall user experience through thoughtful animations and interactions.
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
Introducing Mindora — a Life Coaching & Wellness Framer Template.
I designed Mindora for life coaches, wellness professionals, and personal growth brands looking for a calm, modern, and welcoming online presence.
Inspired by clarity, confidence, and meaningful growth, Mindora features a thoughtful layout, dedicated service sections, a blog for sharing valuable insights, and a clean visual style designed to help brands connect with their audience.
Built with Framer, it's a customizable starting point for creating a professional coaching or wellness website.
Explore Mindora and bring your next website idea to life.
Kindly check it out the template: https://www.framer.com/marketplace/templates/mindora-life-coach/
Great work
Coming-soon landing page design & development for Peak.
Most coming-soon pages just say "soon". I wanted this one to show the whole product. 🚀 🚀 🚀
gopeak.design is the coming-soon site for Peak, an all-in-one WordPress plugin: a visual builder, a motion engine, a CMS and a design system.
The stage
Instead of screenshots, the middle of the page plays the product: 9 features, 43 scenes, 325 frames. I designed every frame in Figma, then built a Figma-to-code pipeline and a React scene engine to play them. Elements morph from frame to frame while the pointer clicks, drags, types and scrolls. All of it is live HTML and CSS, not video, with its own player and speed control.
The details
• The page opens on the Peak mark filled with a liquid WebGL shader that stirs as you move your cursor.
• A waitlist that catches email typos, checks for bots with Cloudflare Turnstile, and sends branded emails.
• A live demo of the real builder, opened by a magic link: a WordPress sandbox where every change is rolled back.
• Desktop, tablet and phone, each designed in Figma first.
The look carries over from the Peak brand identity I shared a few days ago: Parchment and Carbon, Neue Montreal and its Mono, fine hairlines, and Ember used only as a signal.
Stack: Figma · Next.js · React · Claude Code · Tailwind CSS · WebGL · Supabase · Resend · Vercel · Cloudflare · WordPress
See it live → gopeak.design
No After Effects. No manual keyframes.
Just pure React, frame-level spring math, and code.
Built this SaaS product reel completely with Remotion at 60fps. Programmatic motion design makes it effortless to keep animations 100% true to real product UI while allowing programmatic variant generation.
💯 What you receive as a deliverable:
🎬 Production Video: 4K/60fps .mp4 or .webm ready for social, ads, and landing pages
🪟 Transparent Overlays: Alpha-channel .mov (ProRes 4444) to drop over your existing product footage
🔁 Looping Assets: Optimized .gif files for GitHub readmes and email campaigns
💻 Web Native: Interactive React @remotion/player components or automated server-side render scripts
Stack:
• React
• Remotion (useCurrentFrame, spring, interpolate)
• Headless Chromium render pipeline
Taking on 2 new projects this month for SaaS and dev-tool teams looking for high-end product animations.
DMs are open—let’s build.
