Create A Stunning Portfolio Website Without Writing A Single Line Of Code
“Simplicity is the ultimate sophistication.”
~ Leonardo Da Vinci
I’ve been getting a bunch of DMs recently about how I created my portfolio website. I decided to make an in-depth video explaining how to make one and I also walk you through step by step how to create the website from scratch, without any code. I’ll link the Youtube video at the end of this article so you can get a much better visual understanding of how to do this.
For now, enjoy an extremely condensed version of how I went about designing a portfolio website for one of my Instagram followers.
Why A Personal Website?
Imagine social media as a rented space; your personal website is your digital home. It's a canvas for your unique style, far beyond the constraints of profile pictures or bios. And hey, what if Instagram suddenly becomes the next Myspace?
Don’t settle for social media's cookie-cutter profile pages when you can create your own!
Think of your website as your professional command center. Here, you're not just another face in the algorithmic crowd. You're crafting an email list, growing an audience on your terms, and boosting your professional game with a domain that's unmistakably you.
My Web Design Odyssey
At 12, I built my first website - a chaotic mix of text and images, but a gateway to the vast universe of web design. I can thank my aunt for teaching me the basics of HTML, CSS, and ultimately introducing me to the world of web creation. Over a decade later, I've played with every web builder out there - Wix, Webflow, Wordpress, Cargo, Spline - and even ventured into the realms of 3D web design with three.js and react.
Over the years, my personal website has been a shape-shifter, evolving across nine versions, each with different page layouts, color schemes, and content. The site you see today wasn’t created overnight, rather it was built on a bunch of failed iterations. I like where it’s at now, but I’ll undeniably be changing it in the future as my skills increase and my taste for design is refined further.
I used to be a coding purist, obsessing over every detail. Maybe it’s because I started off my first Youtube channel creating ROBLOX scripting and game development tutorials. Or maybe I just thought I was hot shit when I studied computer science in college (I ultimately switched majors halfway when I discovered my love for art and business, but that’s besides the point). Then it hit me - simplicity isn't just beautiful; it's powerful. Why reinvent the wheel, spending hours and hours of time creating a framework from scratch when you can use tools that have been created to save you time and make the process quicker and easier.
My Intentions For This Project
To help you create a stunning website in a way that is as easy to explain as possible, I’ve decided to use Squarespace, which is the platform this article is living on right now. Squarespace is a tool that's all about empowering your creative vision without the tech overwhelm. It's not a paid plug; it's just that good, especially for those embarking on their web design journey.
To make this journey authentic, I chose to involve my Instagram audience. After reviewing applications from over 30 creators, I decided to create this project for Mandie Zamora, a talented cinematographer in need of a digital spotlight. Together, we embarked on a mission to encapsulate her brand with a website that speaks her language.
Here’s the original IG story I posted:
Designing with Purpose
Our mission for Mandie's site was crystal clear:
A sleek, sophisticated, and bold aesthetic
Unified branding and color scheme
A clear narrative of her expertise
A magnet for her dream clientele
A site capable of being created by a complete beginner
Tailoring your site to your dream client is crucial.
For Mandie, it meant attracting the eyes of magazines, journalists, and narrative-driven directors.
Understand your target audience/customer before beginning the design process.
Design Tools and Assets
I created the mockup for the website first in Figma. It’s my web design tool of choice because of how easy it makes design iteration.
It’s also free if you want to use it too.
Feel free to pick your poison - Canva, Photoshop, or even old-school pen and paper. It's all about pre-visualizing your masterpiece.
Typeface & Color
I mixed Nimbus RomDGR and Nimbus Sans Novus T for Mandie's site. Pro tip: Snag font inspiration from the web with a screenshot and upload the screenshot to What The Font to find similar typefaces for your project.
We went minimalist with black and white, letting her work inject the color. This approach is timeless, just like words on a page.
Layout
Mandie's layout was all about breathing space, with key content living centrally for optimal mobile viewing.
Here is a sneak peek of the layout design process:
Website Page Structure
4 Main Pages:
Home Page/Landing Page: A single-scroll showcase, starring Mandie’s top projects.
About: The narrative of Mandie's journey and expertise.
Projects: A deeper dive into her portfolio, displaying the breadth of her work.
Contact: The bridge for potential collaborations, complete with social links.
I’ll link the full video below so you can follow along with a more visual explanation of my process.
Skip to 8:00 in if you just want the step by step explanation of how to build the website.
Thanks for reading!
As always, keep creating.
-P