Starting Over. Designing my Portfolio After 10 Years
Thanks to Framer for sponsoring this video. Build your own website with Framer and use code MATTHEW to get 30% off an annual subscription: https://framer.link/Matthew1
See my new website: https://matthewencina.com
▬▬▬▬ Video Overview ▬▬▬▬
I redesigned my website in Framer after 10 years, rebuilding my professional website to better reflect who I am today. In this video, I walk through the full website design process, from defining the purpose of my personal site and creating a sitemap, to gathering inspiration, building mood boards and stylescapes, designing the homepage, setting up a CMS portfolio, writing the copy, refining the design system, and adding personal details that make the site feel like mine.
This video is about more than a website redesign. It’s about building a personal portfolio that tells your story, shows the range of your work with focus, and creates a flexible system that can grow with you. I also share how I used Framer, Framer CMS, responsive design, interactions, and Framer Agents to design, build, and refine the final site.
If you’re a designer, creative professional, freelancer, or content creator building a personal website, portfolio website, or professional website, I hope this gives you ideas for how to make your site feel clearer, more personal, and more like you.
▬▬▬▬ Links & Resources ▬▬▬▬
Using some of the links below, I may receive a small commission at no extra cost to you. This is the easiest way to support me and helps me continue making content like this for you. Thank you 🙏
🏠 Learn about all the details of my home office here: https://www.modmusings.com/blog/home-office-2024
📝 The Notion Template I use for my videos: https://www.modmusings.com/video-production-template
🎧 Do you like the music in this video? It's all from the Epidemic Sound library. Use my link to get your first 30 days for free: https://share.epidemicsound.com/matthewencina
If you're reading this, drop a coffee ☕️ emoji in the comments.
▬▬▬▬ Video Chapters ▬▬▬▬
00:00 – Introduction: The site I outgrew
00:41 – Why my old site stopped feeling right
02:11 – Define the goal & jobs of the new site
03:37 – Mood boards, stylescapes, and giving the idea form
04:47 – Translating the stylescape into a first draft
05:29 – Designing the Portfolio CMS (Content Management System)
06:23 – Designing the About, Speaking, and resources pages
07:15 – Writing as part of the design process
07:49 – Making the website unique with handmade elements
08:19 – Using Framer Agents to refine the details
09:20 – Feeling doubt and critiquing my work
10:28 – New website reveal
12:28 – Outro
▬▬▬▬ Follow for more ▬▬▬▬
Personal Website: https://matthewencina.com
Personal Instagram: https://instagram.com/matthewencina/
My design studio and blog: https://modmusings.com
Instagram: https://instagram.com/modmusings/
▬▬▬▬▬ Credits ▬▬▬▬▬
Created by Matthew Encina
© 2026 Mod Musings, Inc.
#websitedesign #designprocess #Design #website #framertutorial #framerpartner #Branding #modmusings #matthewencina
▬▬▬▬
DISCLAIMERS:
We are a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
See my new website: https://matthewencina.com
▬▬▬▬ Video Overview ▬▬▬▬
I redesigned my website in Framer after 10 years, rebuilding my professional website to better reflect who I am today. In this video, I walk through the full website design process, from defining the purpose of my personal site and creating a sitemap, to gathering inspiration, building mood boards and stylescapes, designing the homepage, setting up a CMS portfolio, writing the copy, refining the design system, and adding personal details that make the site feel like mine.
This video is about more than a website redesign. It’s about building a personal portfolio that tells your story, shows the range of your work with focus, and creates a flexible system that can grow with you. I also share how I used Framer, Framer CMS, responsive design, interactions, and Framer Agents to design, build, and refine the final site.
If you’re a designer, creative professional, freelancer, or content creator building a personal website, portfolio website, or professional website, I hope this gives you ideas for how to make your site feel clearer, more personal, and more like you.
▬▬▬▬ Links & Resources ▬▬▬▬
Using some of the links below, I may receive a small commission at no extra cost to you. This is the easiest way to support me and helps me continue making content like this for you. Thank you 🙏
🏠 Learn about all the details of my home office here: https://www.modmusings.com/blog/home-office-2024
📝 The Notion Template I use for my videos: https://www.modmusings.com/video-production-template
🎧 Do you like the music in this video? It's all from the Epidemic Sound library. Use my link to get your first 30 days for free: https://share.epidemicsound.com/matthewencina
If you're reading this, drop a coffee ☕️ emoji in the comments.
▬▬▬▬ Video Chapters ▬▬▬▬
00:00 – Introduction: The site I outgrew
00:41 – Why my old site stopped feeling right
02:11 – Define the goal & jobs of the new site
03:37 – Mood boards, stylescapes, and giving the idea form
04:47 – Translating the stylescape into a first draft
05:29 – Designing the Portfolio CMS (Content Management System)
06:23 – Designing the About, Speaking, and resources pages
07:15 – Writing as part of the design process
07:49 – Making the website unique with handmade elements
08:19 – Using Framer Agents to refine the details
09:20 – Feeling doubt and critiquing my work
10:28 – New website reveal
12:28 – Outro
▬▬▬▬ Follow for more ▬▬▬▬
Personal Website: https://matthewencina.com
Personal Instagram: https://instagram.com/matthewencina/
My design studio and blog: https://modmusings.com
Instagram: https://instagram.com/modmusings/
▬▬▬▬▬ Credits ▬▬▬▬▬
Created by Matthew Encina
© 2026 Mod Musings, Inc.
#websitedesign #designprocess #Design #website #framertutorial #framerpartner #Branding #modmusings #matthewencina
▬▬▬▬
DISCLAIMERS:
We are a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.