How to Build a Portfolio Website in 10 Easy Steps

Ready to embark on an exciting journey to create your very own stunning portfolio website? Let's show you how to build a portfolio website in 10 easy steps.

by Mortuza Hossain • 22 April 2024

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.

Build portfolio website with Dorik

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

  1. Pick a Convenient Website Builder (Dorik AI)
  2. Register a Domain Name
  3. Signup to the Website Builder to Start Building Your Website 
  4. Use Dorik AI
  5. Customize Your Portfolio Website
  6. Configure Site Settings And Integrations
  7. Test Your Website Before Going Live 
  8. Publish Your Customized Portfolio Website
  9. Promote Your Portfolio Site
  10. 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.
dorik homepage
  • Now, click on the Sign up With Google option.
  • If you've already signed
dorik signup page

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."

dorik ai dashboard

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

ai website builder prompt
undefined
ai generated portfolio site

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.

undefined

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.   

Launching the builder 

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. 
Changing logo

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. 

Deleting a logo

Click the Upload Logo button and select your pre-designed logo from your computer. 

Uploading the logo

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. 

Adjusting the logo

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. 
Adding a new menu 
  • 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.
Customizing a new menu

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. 
Customizing the CTA button
  • 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.
Adding details to the CTA button

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. 
Changing name and title 

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. 
1st step of changing the background image
  • From the editing panel, click the Delete icon of the background image. The image will be deleted at once. 
Deleting the background image
  • 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.
Adding a new background 

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. 
Editing the service section
  • 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. 
Changing an icon 

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. 
Customizing the About section 
  • 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.
Customizing the button link 
  • 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.

Deleting the brand logo section 

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. 
Editing the achievement section 

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.”  
Customizing the portfolio section 
  • 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. 
Adding portfolio images 

Applying the same technique, add as many portfolio items as you need.

10) Personalize The Blog Section

Configuring the blog section 
  • 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. 
Creating a new post

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. 

Editing the contact form 

Hit the BUTTON TEXT & STYLE option. Write down your button text. Change its color, border, radius, alignment, etc. if you want. 

Customizing the contact us button  

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. 
undefined

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.  

Showing the page settings 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.  
  • Go to Settings→ Site Settings & SEO→ Copy Sitemap→ Submit to Google Search Console
Showing site settings and integrations 

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.

Publishing the site 

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

must-have sections of a portfolio

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

undefined

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

Muazzim Portfolio

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

undefined

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!

{{Author.name}}
AUTHOR

Mortuza Hossain is a content writer and editor at Dorik with expertise in SaaS, SEO, WordPress, eCommerce, and Technology. He writes to deliver reliable and valuable information that solves people’s problems worldwide. Apart from work, he loves to travel, read, watch movies, and spend time with his family and friends.  

Subscribe to Dorik Newsletter

Subscribe to our newsletter to stay updated with latest articles from our blog.

Explore More on Dorik Blog

Start Building Your Website!

Dorik Logo

❤️ This website is built with Dorik, without writing any code

Product of the week - Producthunt
Partner Program

Earn up to 40% recurring commission

© 2024 Dorik, Inc. All rights reserved