Are you ready to embark on a thrilling journey towards crafting your very own stunning portfolio website?
We get it; the idea of diving into code, wrangling files for server uploads, and all the techy stuff can seem pretty intimidating.
But fear not, because today, we're about to unveil the secrets of creating a jaw-dropping portfolio website step by step, the easy way. We'll even throw in some expert tips on how to skyrocket its visibility and keep it in tip-top shape after launch.
So, are you ready to take the plunge and learn how to build a portfolio website? Let's begin.
How to Build a Portfolio Website in Just 10 Steps
As a learner, you might find it hard to design your portfolio website. There are chances you may make silly mistakes that will ruin your time and effort.
So, we have made it extremely easy for you. Just follow the steps below to create a website.
-
Pick a Convenient Website Builder (Dorik AI)
-
Register a Domain Name
-
Signup to the Website Builder to Start Building Your Website
-
Use Dorik AI
-
Customize Your Portfolio Website
-
Configure Site Settings And Integrations
-
Test Your Website Before Going Live
-
Publish Your Customized Portfolio Website
-
Promote Your Portfolio Site
-
Ongoing Maintenance and Upgrades
Step 1: Pick a Convenient Website Builder
Selecting a website-building platform is one of the most crucial steps in this journey. A wrong move may upside down the whole scenario.
So, before making your final decision, research the available website builders on the market. Ensure they offer features like design flexibility, customization options, mobile responsiveness, SEO optimization, customer support, etc.
Therefore, you can read our guide on the must-have features of a website builder to determine the best platform.
Some of the popular website builder platforms include Dorik, Webflow, Wix, WordPress, Squarespace, etc.
But which is the best for you?
No doubt, Dorik stands out in the crowd. It is the best alternative to Webflow, Wix, Weebly, and any other no-code website builders. It is the best portfolio website builder option right now.
Let's see what it has got.
-
AI website Builder
-
Text and Image generation
-
Drag & drop builder
-
80+ pre-built templates with 250+ stunning UI blocks and 20+ elements.
-
Unlimited Storage & Bandwidth
-
Free SSL/TLS Certificate
-
Built-in Image Optimizer
-
Completely Responsive & SEO Optimized
-
Built-in Blogging Platform
There are three ways you can create portfolio website with Dorik — with AI, with templates and from scratch. We will show you the AI process. It's the most convenient way.
Step 2: Register a Domain Name
Registering a domain name is an essential step in creating your portfolio site. It will be the address of your website. And it is also important to promote your personal brand.
So, while choosing a domain name, you should be smart. You can follow the below tips to select a good domain name.
Tips to help you pick a good domain name
-
Keep it short and memorable
-
Make it easy to spell
-
Consider your personal brand
-
Check availability
-
Choose the right extension
However, you can create and publish your portfolio website using Dorik without purchasing a domain name. Because Dorik offers a free subdomain (.dcms.site) with each website.
So, first, you can design your portfolio site. Then you can buy your preferred domain name at any convenient time. After that, you can connect it to your site.
Step 3: Create Your Dorik Account to Start Building Your Website
To create a new account on Dorik, you will need only an active email address. So, before proceeding any further, be sure your email ID is working well.
Now, follow the below instructions:
-
Visit Dorik, the most user-friendly AI and No-code website builder, as it is the first step of your website-building process.
-
Head to the Sign-Up button and click on it. It will take you to a new page.
-
Now, click on the Sign up With Google option.
-
If you've already signed
It’s done. Your new Dorik account has been created. It’s that easy! Within a moment, it will take you to the Dorik Dashboard.
Shortcut: Go to Sign Up→ Sign In With Google→ Select an Email ID
Step 4: Use Dorik AI
Now, from the Dashboard, click on the "AI sites" option. Then click on "Create New Site with AI button."
Now, give your website a name and website description as prompt. You can also select your site language. Click "Generate Your Website".
Example prompt:
Create a simple portfolio website. I have seven years of experience in Digital Marketing. Specialized in Paid ads and SEO. Add client project gallery. Use light colors.
(N.B: The same prompt may create a different output. Improving prompt, Using regeneration and editor will make your site design better.)
Shortcut: Go to Create New Website with AI → Write Prompt → Generate Your website
You can always use Dorik full site generation, section generation, text generation, image generation, and full site editing to make your site more engaging. You can also edit the prompt.
You can publish your site for free using dorik's subdomain. However, you can also add a custom domain on Dorik after upgrading to a premium plan.
Congratulations!
Your website has been successfully created, and you will now be directed to the Dorik CMS Site Dashboard.
It's essential to take the time to examine each element and feature of the drag-and-drop interface to optimize your workflow.
The left-sidebar editing panel is crucial since it contains all the options required to customize your site.
Once you are OK with all the features and options, click the "Launch the Builder" button to start.
Are you worried about hosting your website? Relax! Because Dorik provides free hosting.
Step 5: Customize Your Portfolio Website
The main task of how to build a portfolio website starts now. After launching the builder, you will find yourself in the editing panel of your website’s homepage.
You have the freedom to make any changes to your design. So, let’s customize it!
1) Add A Logo To Your Website
-
To add a logo, hover your cursor over the header area. It will show you an editing option. Click on the Edit Element icon.
It will open a navigation bar showing you all the available options. You can move it anywhere for convenience of work.
Now, hit the Brand Logo Delete button beside the image. The default logo will be removed, giving you the option to upload your logo.
Click the Upload Logo button and select your pre-designed logo from your computer.
If you don't have one yet, it would be better to make a logo. After uploading the logo, add relevant Logo Alt texts. You can also insert a specific URL with the logo.
After that, adjust its Width.
2) Customize the Header & Navigation Menus
You should maintain the best practices for designing your website header. It will make your site professional.
Let's edit the default design!
-
Hover your cursor over the header area and click on the Edit Element icon.
-
From the navigation bar, click on the “+” icon just beside the LINKS option. Here, you will find all the default menus. You will be able to copy, edit and delete them. Modify them as per your demand.
-
If you need more Menu, click on the Add New button.
-
A blank menu will be created. Then hit its dropdown arrow icon. Name your new menu from the Link Text box. Select your preferred Link Type.
3) Add & Customize The Call to Action (CTA) Button
-
Go to BUTTONS from the editing panel and click on its “+” sign. It will open the option to customize it.
-
Now, write down your preferred text in the Button Text box.
-
Click on the dropdown arrow of Link Type and select a specific type. For example: If you want to add an external link to your button, choose the External Link option.
-
Then insert the targeted link in the URL box.
-
To open it in another tab, select the New Tab option.
-
You can also customize the button color.
4) Add Your Name And A Catchy Title
-
To do it, hover your mouse over the pre-written name and click the Edit Element icon as before.
-
Now, replace the default name with your own name. Change the font and style if you want.
In the same way, edit the default description under the name and add your preferred texts.
However, if you want to delete any element, hit the Delete Element icon. It will be removed instantly.
5) Change The Section Background Image
It is the same as the logo-changing process.
-
Click the Edit Section Style from the top left corner of the screen. It will open the section background editing option.
-
From the editing panel, click the Delete icon of the background image. The image will be deleted at once.
-
Now, hit the Add New Image button.
-
Pick a suitable image from your computer.
-
Instead of an image, you can even add solid background color, Gradient color, and videos. So, decide which one you prefer.
6) Edit Your Service Section
Editing all sections in Dorik is the same. It's pretty easy to make any changes where necessary.
So, do not panic thinking about how to build a portfolio website.
Now, navigate to the Service section. The template we have chosen allows us to show 3 service areas. But it lets you add more if you need. So, do not get worried.
Let's do it!
-
To modify the title of a specific service, click on its Edit Element option.
-
Give a suitable title for your offered service.
-
After that, add a short description just below the title.
-
You can also add a link to it for more engagement.
-
Click on the icon symbol if you wish to change it. Choose the exact match from the icon library. Then, adjust its alignment, color, size, background, etc.
Add all of your offered service areas following the same editing process.
However, you can see some examples of service websites to better understand the design patterns.
7) Edit Your About Section
-
Go to the About section.
-
Click on the description box. A text editor panel will appear. Write down a short bio of yourself there.
-
Hit the Read More link. Change the Link Text as per your requirement.
-
If you want to redirect your visitors to your About page, select Page from the Link Type option.
-
Then, pick About (Your About Page) from the Select Page option.
-
Add your own photograph following the image-changing process that we have shown you earlier.
-
There is a section showing the brands you have worked with. Replace them by pursuing the logo-changing technique.
-
However, if you do not want to display them, click the Delete Row icon.
If you want to gather more inspiration, you should read our blog on 32 Inspiring About Us Page Examples of 2023.
8) Highlight Your Achievements
In this template, you will find this section labeled “My Track Record”. To manifest your achievements, follow the below techniques.
-
Click on any pre-built section and add your value in the text editor panel. Edit every element in the same way.
9) Customize Your Portfolio Section
-
Scroll down to your portfolio section.
-
To edit the title of your portfolio, click on its title bar. Add relevant texts.
-
Write a short description of every item also.
-
Add something that will express your expertise in that specific field. For example, you can add something like this, “Organic Traffic on LinkedIn increased by 67% in the last six months.”
-
Then customize the Read More link by clicking on it. You can change the link’s text, type, and many more. Do it following the method of changing LINKS ITEM as we have presented it in the About section.
-
To showcase your portfolio image, first, delete the default image. Then add a new relevant image. Adding multimedia will increase user experience and engagement.
Applying the same technique, add as many portfolio items as you need.
10) Personalize The Blog Section
-
So, proceed to the blog section.
-
Then click Edit CMS Row Style.
-
Select Posts from the Data Source option. If you choose this feature, some demo posts that are published automatically by the system will be displayed.
-
Additionally, you can choose Custom Collection if you want to show customized data. We recommend you read our complete guide on How to use Dorik Custom Collection.
-
However, if you want to publish a new blog on your website, navigate to the dashboard.
-
Click Post under the CONTENT section.
-
After that hit the ‘+ New Post’ button. Write or add your blog post.
-
Fill out the essential fields such as slug, excerpt, author, category, thumbnail image, keywords, etc.
-
Finally, hit the Publish icon. You have a new blog published.
I am sure you know what you have to do now. Yes, add as many blog posts as you want by applying this method.
One more thing to mention, there is no other system to modify your Testimonial part. Follow the same process to personalize this section also.
However, you can ask for testimonials from others and show them in your website to make your portfolio more authentic.
11) Customize The Contact Section
One of the most significant sections or pages of a portfolio website is the “Contact” portion. It allows anyone to get in touch with you. The default template comes with a contact form. Let’s edit it!
Click the Edit Element icon. From Send To option, you can select Email, Zapier, Integromat, and Pabbly Connect. Here, I am selecting Email. Then add your email address in the Receive At box, input the email subject and success message.
Integrating Zapier, Integromat, and Pabbly Connect is really easy with Dorik. Choose any of them depending on your preference.
From the FIELDS option, you can remove or add any fields depending on your need.
Hit the BUTTON TEXT & STYLE option. Write down your button text. Change its color, border, radius, alignment, etc. if you want.
If you do not like to use the default design, you can create a new one from scratch.
However, the following blog post will show you the complete process of creating a Contact Us Page.
11) Re-design Your Footer Area
The footer is a vital part of your portfolio website. By optimizing it, you can significantly impact user experience and search engine optimization.
If you struggle to personalize your footer section, you can see some examples of website footer for inspiration.
Some tips on optimizing your footer:
Keep it Simple: Your footer should be clean and straightforward, with only the necessary information.
Include Navigation: Add links to the most helpful pages in your footer to help users find what they're looking for.
Incorporate Contact Information: Adding contact information, such as your email address or phone number, can help visitors reach out to you quickly.
Add Social Media Links: Including links to your social media profiles can help visitors connect with you on other platforms.
Copyright and Privacy Policy: It's safe to have a copyright notice and privacy policy in your footer to protect your website.
To add your social media profile, follow the below process.
-
Click on a default-specific icon. For example, Select Facebook.
-
Add your Facebook profile link in the URL field.
-
Finally, select the open link in the New Tab option if you want.
-
Do the same for the other social icons.
Suggestion for creating other pages
The way you have designed your homepage, you can add and customize as many pages as you need. For example, The About, Service, Contact, Portfolio, and Blog pages.
This is the basics of customizing a page. You can even add as many Elements, Sections, Rows, etc. as you need from the available options.
From the Page Settings option, you can include page title, description, language, etc. under the BASIC settings. Similarly, you can explore PAGE META and ADVANCED features.
Step 6: Configure Site Settings And Integrations
Site settings and integrations hold a crucial part in your website’s performance. That’s why you should also pay attention to it.
-
Click the Site Settings icon from the left editing bar. A new pop-up will emerge.
-
Select your preferred site language, favicon, and social media image under the GENERAL tab.
-
Then click on INTEGRATIONS tab.
-
It will allow you to integrate Google Analytics and Google Tag Manager into your site so that you can track and monitor your website’s overall performance.
-
Even you can add live chat and payment methods if you require.
-
Moreover, you can submit your sitemap on Google Search Console. These are some of the features that have made Dorik the best for SEO.
-
Go to Settings→ Site Settings & SEO→ Copy Sitemap→ Submit to Google Search Console
Step 7: Test Your Website Before Going Live
Before launching your website, it must be tested to ensure everything is working correctly.
Here are some steps to test your website before going live:
Proofread: Go through all the content on your website and check for typos, grammar errors, and spelling mistakes.
Functionality: Check all links, buttons, forms, and interactive elements to ensure they function correctly.
Responsiveness: Test your website on different devices, including desktop, tablet, and mobile, to ensure it is responsive and displays correctly on all devices.
Speed: Test your website's loading speed using online tools like Google PageSpeed Insights to optimize your website's performance.
Security: Website security is crucial for your portfolio website. So, ensure your website hosting service is secure and protected against malware and viruses.
Compatibility: Check your website's compatibility with different browsers like Chrome, Firefox, Safari, and Internet Explorer.
Step 8: Time To Publish Your Customized Portfolio Website
It’s time to go live.
But before hitting the "Publish" button, you should preview your site by clicking on the "Eye Icon."
Once you have checked everything,, just click on the Publish button located at the top right corner of your screen.
You can then view the live version of your website by clicking on the upward-facing arrow icon next to the "Publish" button.
Congratulations! You have a stunning portfolio website published now.
Step 9: Promote Your Portfolio Site
Promoting a website is crucial for increasing its visibility and driving traffic.
Here we present some ways to make your website visible on google searches. Let's dive in!
Search Engine Optimization (SEO)
SEO is one of the most powerful methods to drive organic traffic to your website. SEO can improve your ranking in search engine result pages (SERPs).
To ensure your website is SEO-friendly, you should focus on keyword research, on-page optimization, off-page optimization, guest blogging, and link building.
Additionally, you should also focus on local SEO to stay ahead in your local market.
Content Marketing
Develop top-notch content that resonates with your target audience. It will drive more traffic to your portfolio website and establish your personal brand as an authority in your industry.
You can incorporate blog posts, infographics, podcasts, videos, and more.
Email Marketing
Email marketing is another powerful tactic to promote your website and stay in touch with your audience. By building an email list, you can send targeted messages to your subscribers and drive traffic to your website.
However, you can utilize email marketing automation software to mange your data.
Submit your site to online directories
Submitting your website to online directories can help you get more exposure and improve your search engine rankings.
Make sure to choose reputable directories that are relevant to your niche. This can also help you build backlinks to your website, which can further improve your SEO.
Social Media Marketing
Social media is a crucial tool for promoting your website.
By leveraging social media platforms like Facebook, Twitter, and Instagram, you can reach a wider audience, build relationships with your followers, and share content that resonates with the target market.
Hence, you can take it as a part of your marketing strategy.
Paid Marketing
Paid marketing, such as Google Ads or Facebook Ads, can help you quickly drive targeted traffic to your website.
While it requires an investment, it can effectively promote your website and attract new visitors.
Step 10: Ongoing Maintenance and Upgrades
Once your website is live, you must keep it updated and secure. Regular website maintenance can save you from any inconveniences.
So, confirm that everything is up-to-date.
These upgrades will keep your website relevant and help you stay ahead of your competition.
The Must-Have Sections of Your Portfolio Website
As a beginner, you might not know what essential sections a professional portfolio website requires. So, here we go.
A Captivating Home Page
Your website's homepage is one of the first things your visitors see. Make it count by adopting an eye-catching design that will pique their interest. Plus, always remember homepage copy or text is also important. So, pay attention to them too.
A homepage should be engaging and informative, so your visitors will want to visit the rest of the site.
Make sure everything is easy to find by using Menu systems. Therefore create a winning home page for your website.
A Strong Call To Action (CTA) Button on Your Homepage
There is no doubt that a CTA (call to action) is a fundamental element of any website. Its purpose is to capture the user's attention and then prompt them to take some sort of action.
An About Section- Details About Yourself
The About page of a portfolio website is a vital segment of your online presence. It should be full of detail about you and your work.
You should provide information about your education, experience, achievements, interest, and skills.
A Service Section- Your Offered Services
Your service section should be easy to find and navigate. It must present clear and concise information about what you offer and how to get in touch.
A Portfolio Section- Containing Your Best Work
Tell me, why do you want to create a portfolio website? If I am not wrong, the reason is; it gives you the window to exhibit all of your fantastic work.
So, add relevant information about your work. Include images, videos, and other multimedia content to draw attention.
Write concisely but effectively so that potential clients can understand what you can do for them.
Testimonials- What People Say About You
Just think about yourself. What do you do before buying an online product? Most probably, you try to find it out on the internet.
Then you start reading what other people are saying after using that product. If you find positive reviews, you place the order.
The same strategy goes here. The testimonials part can be a valuable addition to help promote and sell your services or products. It helps to build trust and credibility with the to-be potential clients.
A Contact Information Section
Suppose you are highly convinced with a freelancer’s portfolio and want to hire him/her for your project. You can not find a way to connect to that person. Isn’t it disappointing? Of course, it is a loss for both parties.
If you do not want to repeat the same scenario with others, always add a Contact section on your website. Do not forget to mention your name, email ID, and phone number.
A Blog Section
The blog is not a mandatory part of your website. If you do not have enough time to write, you can just skip it.
But it is one of the best ways to display your thoughts and ideas. You can easily express your depth of knowledge by creating blogs.
If you regularly publish blogs, your website will get organic traffic. More traffic, more chances of being hired!
Inspiring Portfolio Website Examples
Here, I am presenting some examples of personal websites so that you can develop a better understanding.
Let's see them!
1. Studio Bagaz
Want to create an appealing, pleasant, professional portfolio website that stands out? The Studio Bagaz graphics design studio portfolio page can be your best inspiration.
The homepage showcases their work in a colorful background. Visitors can get a glimpse of Bagaz's branding & production, app, set design, and visual identity by scrolling down. The website has an organized structure that you can easily swift between pages by clicking the visual blocks on the side menu bar.
2. Muazzim
This fabulous website has impressive features that anyone can apply to their websites. The hovered system and the structure are amazingly organized.
Muazzim showcased his talents and works on this website very well. He also added some blogs to help his clients understand him before hiring.
He also added a store button where clients can easily purchase the services. If you find this relatable to your criterion, feel free to adopt the features from Dorik.
3. Roger Federer
Roger Federer's official site presents a clean, sophisticated design that highlights his career achievements and personal brand.
On his website, he added his biography, career highlights, news updates, and media section, along with links to his social media accounts and charitable foundation.
Is it worth making a portfolio website?
Of course, you should have your portfolio site to grab the world’s attention. You need a website because it is one of the unique ways to manifest your skills, experience, personality, etc.
Can you create your portfolio website without paying?
Yes. You can create a free portfolio website. There are some website builder platforms like Dorik, Wix, Weebly, Webflow, Squarespace, Joomla, Blogger, etc. that offer free plans.
What are the benefits of a portfolio website?
Some benefits of a portfolio website are:
-
Window to showcase your expertise and knowledge
-
Space to reveal your personality
-
Opportunity to display all of your work
-
Chances to increase potential clients
-
Better communication
Should you use your name on the portfolio website?
Yes, you should certainly use your name on your portfolio website. It will build trust. For example, if you have a modeling portfolio website, you must mention your name. The same will go with all other types of portfolios. Additionally, exploring effective portfolio website examples can provide valuable insights and inspiration to stand out in your field.
How many pages should my portfolio website carry?
Truly speaking, there is no exact number. You can create as many pages as you need. But do not jam-pack your website with irrelevant pages.
Final Verdict
We hope you have your portfolio website by this time. Share your site’s link as much as you can to get a massive response.
Keep your portfolio website simple but attractive. Avoid overloading it with too many graphics, pages, elements, etc. It may dramatically decrease your site’s loading speed and performance.
Work on your site’s SEO also for better output.
If you have any queries regarding how to build a portfolio website, please leave us a comment. We will respond as soon as possible with the best solution.
You'll get your portfolio website in minutes with Dorik. So, let's try it!
