How to Make a Freelancer portfolio website (WordPress & Elementor Tutorial for Beginners)

(Exclusive: Click above link & use "JFD10" coupon code to get upto 78% DISCOUNT!)

Quick Summary

(Exclusive: Click above link & use "JFD10" coupon code to get upto 78% DISCOUNT!)

In this tutorial, You'll learn How to Unlock Your Dream Job with This Portfolio Website using WordPress & Elementor Free Version. This Elementor Masterclass is for Complete Beginners.

(Exclusive: Click above link & use "JFD10" coupon code to get upto 78% DISCOUNT!)

If you want to stand out from the crowd, you should have a really modern and unique-looking portfolio website. In this tutorial, I will show you how to create this amazing Bento-Grid portfolio website using all free resources.

And, having a portfolio site like this is not optional nowadays for a real professional. Let me share my personal experience with you – so far, I have done nearly 1200+ freelance projects. And, over 90% of clients came through my portfolio site. Even we have done 100+ jobs on a freelancing marketplace, and 80% of clients asked me this question first – “Do you have a portfolio website?”

So many of you guys always ask me how I land so many freelance jobs while others are struggling to get their first job. Then, my number one suggestion would be: make your portfolio website before anything else. Now, in this tutorial, I will show you how to create a portfolio website that will help you attract more clients. To create this website, we will be using a free CMS, a free theme, a free page builder, and all free resources.

Tools and Links Used

Hostinger Fast, beginner friendly WordPress hosting.

Get Hosting

Elementor The free page builder this tutorial is built with.

Get Elementor

Elementor Pro The Pro upgrade used throughout this tutorial.

Get Elementor Pro

Project Files Download the resources used in this tutorial.

Download Files

Kitpapa Ready made Elementor template kits.

Get Templates

Kitpapa Ready made Elementor template kits.

Get Templates

Prompt Used in This Tutorial

Buttons's Shadow Style CSS

<style>
.buttons-shadow .elementor-button {
  position: relative;
  z-index: 1;
  box-shadow: 
    0px 32px 64px 0px rgba(0, 0, 0, 0.075),
    0px 2.15px 0.5px 0px rgba(0, 0, 0, 0.25),
    0px 24px 24px 0px rgba(8, 8, 8, 0.04),
    0px 6px 13px 0px rgba(8, 8, 8, 0.03),
    0px 6px 4px 0px rgba(8, 8, 8, 0.05),
    0px 5px 1.5px 0px rgba(8, 8, 8, 0.05);
  border-radius: 83px;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.buttons-shadow .elementor-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #779DFF 0%, #2D68FF 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1; 
  border-radius: 83px;
}

.buttons-shadow .elementor-button:hover::after {
  opacity: 1;
}


.buttons-shadow .elementor-button-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
}

.buttons-shadow .elementor-button:hover .elementor-button-icon svg {
  fill: none;
}

.buttons-shadow .elementor-button:focus,
.buttons-shadow .elementor-button:active {
  color: #181D2A !important;
  outline: none; 
}

</style>

Buttons's Shadow Style CSS Class

buttons-shadow

Button Gradient Style CSS

.gradient-button .elementor-button {
  position: relative;
  z-index: 1;
  box-shadow: 
    0px 32px 64px 0px rgba(0, 0, 0, 0.075),
    0px 2.15px 0.5px 0px rgba(0, 0, 0, 0.25),
    0px 24px 24px 0px rgba(8, 8, 8, 0.04),
    0px 6px 13px 0px rgba(8, 8, 8, 0.03),
    0px 6px 4px 0px rgba(8, 8, 8, 0.05),
    0px 5px 1.5px 0px rgba(8, 8, 8, 0.05);
  border-radius: 83px;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.gradient-button .elementor-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, #F1F1F1 0%, #2D68FF 100%);
  opacity: 0; 
  transition: opacity 0.4s ease; 
  z-index: -1; 
  border-radius: 83px;
}

.gradient-button .elementor-button:hover::after {
  opacity: 1;
}

.gradient-button .elementor-button-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  transition: fill 0.3s ease; 
}

.gradient-button .elementor-button:hover .elementor-button-icon svg {
  fill: none !important; 
}

Button Gradient Style CSS Classes

gradient-button
elementor-button-icon

Icon Section Style CSS

.icons-section {
  position: relative;
  box-shadow: 0px 32px 64px  rgba(0, 0, 0, 0.075), 0px 2.15px 0.5px rgba(0, 0, 0, 0.25), 0px 24px 24px rgba(8, 8, 8, 0.04), 0px 6px 13px rgba(8, 8, 8, 0.03), 0px 6px 4px rgba(8, 8, 8, 0.05), 0px 5px 1.5px  rgba(8, 8, 8, 0.05);
  border: 1.5px solid transparent;
  border-radius: 12px;
  
  background-image: 
  linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), 
  linear-gradient(180deg, #F6F6F6 0%, #E6E6E6 100%);

    
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}

.elementor-social-icon {
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.1) !important;
}

Icon Section Style CSS Classes

icons-section
elementor-social-icon

Project Section Style CSS

.projects {
   box-shadow: 0px 16px 24px -13px rgba(0, 0, 0, 0.5), 0px 2.15px 0.5px -2px rgba(0, 0, 0, 0.25), 0px 5px 1.5px -4px rgba(8, 8, 8, 0.2), 0px 6px 4px -4px rgba(8, 8, 8, 0.16), 0px 6px 13px rgba(8, 8, 8, 0.12), 0px 24px 24px -16px rgba(8, 8, 8, 0.08), inset 2px 4px 16px rgba(253, 253, 253, 0.05);
}
    
.projects {
  position: relative;
  border-radius: 20px;
  z-index: 1;
  
}

.projects::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 0.5px;
  background: linear-gradient(
    -90deg,
    rgba(253, 253, 253, 0.4) 0%,
    rgba(253, 253, 253, 0.01) 0.01%,
    rgba(253, 253, 253, 0.01) 0.01%,
    rgba(253, 253, 253, 0.1) 10%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

.projects-sec {
    max-height: 449px;
    overflow-y: auto;
}

.projects-sec::-webkit-scrollbar {
    display: none; 
}

Project Section Style CSS Classes

projects
projects-sec

Custom Animated Button Style CSS

.custom-animated-btn .elementor-button-icon svg {
  width: 40px;
  height: 40px;
  fill: none;
}

.custom-animated-btn .elementor-button:hover .elementor-button-icon svg {
    color: #2D68FF;
  fill: none;
}

.custom-animated-btn .elementor-button {
  position: relative;
  overflow: hidden;
  z-index: 2;
  margin-bottom: -6px;
  transition: color 0.3s ease, font-weight 0.3s ease;
}

.custom-animated-btn .elementor-button:hover {
  background: #282828;
  box-shadow:
    0px 16px 24px rgba(0, 0, 0, 0.5),
    0px 2.15px 0.5px rgba(0, 0, 0, 0.25),
    0px 5px 1.5px rgba(8, 8, 8, 0.2),
    0px 6px 4px rgba(8, 8, 8, 0.16),
    0px 6px 13px rgba(8, 8, 8, 0.12),
    0px 24px 24px rgba(8, 8, 8, 0.08),
    inset 2px 4px 16px rgba(253, 253, 253, 0.05);
}


.custom-animated-btn .elementor-button:hover {
  color: #EFF5F2 !important;
  font-weight: 600 !important;
}


.custom-animated-btn .elementor-button::after {
  content: url('https://kitpapa.net/bentolio/wp-content/uploads/2025/04/guidance_up-arrow-1.svg');
  position: absolute;
  right: 18px;
  top: 54%;
  transform: translateY(-50%) translateX(10px);
  width: 40px;
  height: 40px;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 3;
   display: block;
}


.custom-animated-btn .elementor-button:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}


.custom-animated-btn .elementor-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(
    to right,
    rgba(253, 253, 253, 0.05) 0%,
    rgba(253, 253, 253, 0.05) 40%,
    rgba(253, 253, 253, 0.05) 60%,
    rgba(253, 253, 253, 0.05) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.custom-animated-btn .elementor-button:hover::before {
  opacity: 0.15;
}

Custom Animated Button Style CSS Style

custom-animated-btn

Skill Section Style CSS Style

.skill-icon .elementor-icon-list-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.11);
    border-radius: 100px;
    margin-right: 12px;
    
}

.Work-Experience {
  position: relative;
  border-radius: 12px;
  transition: all 0.4s ease;
  
}

.Work-Experience:hover {
  background: #282828;
  box-shadow:
    0px 16px 24px rgba(0, 0, 0, 0.5),
    0px 2.15px 0.5px rgba(0, 0, 0, 0.25),
    0px 5px 1.5px rgba(8, 8, 8, 0.2),
    0px 6px 4px rgba(8, 8, 8, 0.16),
    0px 6px 13px rgba(8, 8, 8, 0.12),
    0px 24px 24px rgba(8, 8, 8, 0.08),
    inset 2px 4px 16px rgba(253, 253, 253, 0.05);
}


.Work-Experience::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(
    to bottom,
    rgba(253, 253, 253, 0.15) 0%,
    rgba(253, 253, 253, 0.15) 40%,
    rgba(253, 253, 253, 0.15) 60%,
    rgba(253, 253, 253, 0.15) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.Work-Experience:hover::before {
  opacity: 0.5;
}

.Work-Experience {
  position: relative;
  border-radius: 12px;
  transition: all 0.4s ease;
}

Skill Section Style CSS Classes

skill-icon
Work-Experience

Testimonial Widget Style CSS

.elementskit-single-testimonial-slider .elementskit-profile-info {
  order: 999 !important;
}

.elementskit-single-testimonial-slider {
  display: flex !important;
  flex-direction: column !important;
}

.elementskit-profile-info {
    margin: 0px !important;
}

Testimonial Widget Pagination JS

<script>
jQuery(document).ready(function($) {
  setTimeout(function() {
   
    var testimonialSlider = $('.elementskit-testimonial-slider');
    
    if (testimonialSlider.length) {
     
      $('.custom-progress-container').remove();
      
    
      testimonialSlider.after('<div class="custom-progress-container"><div class="custom-progress-bar"></div></div>');
      
     
      if (!$('#custom-progress-styles').length) {
        $('head').append(`
          <style id="custom-progress-styles">
            .custom-progress-container {
              width: 100%;
              background-color: rgba(128, 128, 128, 0.1); 
              height: 1.5px;
              margin-top: 20px;
              position: relative;
              border-radius: 2px;
            }
            .custom-progress-bar {
              position: absolute;
              left: 0;
              top: 0;
              height: 100%;
              background-color: rgba(255, 255, 255, 0.2); 
              border-radius: 2px;
              transition: width 0.4s ease-in-out;
            }
          </style>
        `);
      }
      
      // Count total slides
      var totalSlides = testimonialSlider.find('.elementskit-single-testimonial-slider').length;
      
      // Initial setup - start with first slide
      updateProgress(0, totalSlides);
      
      // Try to get Swiper instance
      var swiperContainer = testimonialSlider.find('.swiper-container');
      if (swiperContainer.length && typeof swiperContainer[0].swiper !== 'undefined') {
        // If Swiper is available
        var swiper = swiperContainer[0].swiper;
        
        // Update progress when slide changes
        swiper.on('slideChange', function() {
          updateProgress(swiper.activeIndex, totalSlides);
        });
      } else {
        // Fallback method using interval checking
        setInterval(function() {
          var activeSlide = testimonialSlider.find('.swiper-slide-active, .slick-active').index();
          if (activeSlide >= 0) {
            updateProgress(activeSlide, totalSlides);
          }
        }, 300);
      }
    }
  }, 1000);
  
  function updateProgress(currentIndex, totalSlides) {
    var progressPercent = ((currentIndex + 1) / totalSlides) * 100;
    $('.custom-progress-bar').css('width', progressPercent + '%');
  }
});
</script>

Counter Area Style CSS

<style>
.abt-img {
        box-shadow: inset 0px 0px 32px 1px rgba(255, 255, 255, 0.1);
        border-radius: 100px;
    }
    
   .achievements-icons .elementor-icon {
       display: flex;
       justify-content: center;
       align-items: center;
       width: 40px;
       height: 40px;
       background: rgba(255, 255, 255, 0.11);
       border-radius: 100px;
   } 
    
   .achievements-section {
       
     border: 1px solid rgba(253, 253, 253, 0.05);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
    border-radius: 12px;}
    
    .achievements-section {
  position: relative;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.achievements-section::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    rgba(253, 253, 253, 0.4) 0%,
    rgba(253, 253, 253, 0) 40%,
    rgba(253, 253, 253, 0) 60%,
    rgba(253, 253, 253, 0.1) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.achievements-section:hover {
  background: #282828;
  box-shadow:
    0px 16px 24px rgba(0, 0, 0, 0.5),
    0px 2.15px 0.5px rgba(0, 0, 0, 0.25),
    0px 5px 1.5px rgba(8, 8, 8, 0.2),
    0px 6px 4px rgba(8, 8, 8, 0.16),
    0px 6px 13px rgba(8, 8, 8, 0.12),
    0px 24px 24px rgba(8, 8, 8, 0.08),
    inset 2px 4px 16px rgba(253, 253, 253, 0.05);
}

.achievements-section:hover::before {
  opacity: 0.15;
}
</style>

Counter Area Style CSS Classes

abt-img
achievements-icons
achievements-section

Contact Information Area Style CSS

<style>
.custom-icon .mf-input-select .mf_select__indicators {
    margin-right: 2px;
    position: relative;
}

.custom-icon .mf-input-select .mf_select__indicators{
    visibility: hidden;
}

.custom-icon .mf-input-select .mf_select__indicators::before {
    content: "";
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px; 
    height: 16px;
    background: url('https://kitpapa.net/bentolio/wp-content/uploads/2025/04/chevron-down.svg') no-repeat center center;
    background-size: contain; 
    visibility: visible;
}

.contact-icons-section {
    background: #282828;
   box-shadow: 0px 16px 24px -13px rgba(0, 0, 0, 0.5), 0px 2.15px 0.5px -2px rgba(0, 0, 0, 0.25), 0px 5px 1.5px -4px rgba(8, 8, 8, 0.2), 0px 6px 4px -4px rgba(8, 8, 8, 0.16), 0px 6px 13px rgba(8, 8, 8, 0.12), 0px 24px 24px -16px rgba(8, 8, 8, 0.08), inset 2px 4px 16px rgba(253, 253, 253, 0.05);
border-radius: 12px;
}

.ct-icons-sec {
    border: 1px solid rgba(253, 253, 253, 0.05);
    box-shadow: 0px 16px 24px -13px rgba(0, 0, 0, 0.5), 0px 2.15px 0.5px -2px rgba(0, 0, 0, 0.25), 0px 5px 1.5px -4px rgba(8, 8, 8, 0.2), 0px 6px 4px -4px rgba(8, 8, 8, 0.16), 0px 24px 24px -16px rgba(8, 8, 8, 0.08), inset 2px 4px 16px rgba(253, 253, 253, 0.05);
    filter: drop-shadow(0px 6px 13px rgba(8, 8, 8, 0.12));
    border-radius: 12px;
}

.ct-icons-design .elementor-icon-box-icon{
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 52px;
        height: 52px;
        border: 2px solid rgba(253, 253, 253, 0.05) !important;
       box-shadow: 0px 16px 24px -13px rgba(0, 0, 0, 0.5), 0px 2.15px 0.5px -2px rgba(0, 0, 0, 0.25), 0px 5px 1.5px -4px rgba(8, 8, 8, 0.2), 0px 6px 4px -4px rgba(8, 8, 8, 0.16), 0px 24px 24px -16px rgba(8, 8, 8, 0.08), inset 2px 4px 16px rgba(253, 253, 253, 0.05);
      border-radius: 12px;
     margin-top: 5px;
}
</style>

Contact Information Area Style CSS Classes

custom-icon
contact-icons-section
ct-icons-sec
ct-icons-design

Map Style CSS

.elementor-custom-embed:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  mix-blend-mode: difference;
  pointer-events: none;
  border-radius: 28px;
  border: none;
}

.mf-input-select .mf_select__menu>div {
    overflow-x: hidden;
}

Service Box Style CSS

<style>
 .elementor-icon-box-icon svg {
     fill: none;
 }
    
.service-item:hover {
  background: #282828;
  box-shadow:
    0px 16px 24px rgba(0, 0, 0, 0.5),
    0px 2.15px 0.5px rgba(0, 0, 0, 0.25),
    0px 5px 1.5px rgba(8, 8, 8, 0.2),
    0px 6px 4px rgba(8, 8, 8, 0.16),
    0px 6px 13px rgba(8, 8, 8, 0.12),
    0px 24px 24px rgba(8, 8, 8, 0.08),
    inset 2px 4px 16px rgba(253, 253, 253, 0.05);
  
  
}

.service-item:hover .elementor-icon {
  color: #A8A8A8 !important;
}

.service-item:hover .elementor-icon-box-icon svg {
    color: #2D68FF !important;
} 
</style>

Service Box Style CSS Classes

service-item
elementor-icon-box-icon

Menu SVG Icon Code

<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2.5 5.99998L8.5 1.33331L14.5 5.99998V13.3333C14.5 13.6869 14.3595 14.0261 14.1095 14.2761C13.8594 14.5262 13.5203 14.6666 13.1667 14.6666H3.83333C3.47971 14.6666 3.14057 14.5262 2.89052 14.2761C2.64048 14.0261 2.5 13.6869 2.5 13.3333V5.99998Z" stroke="currentcolor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6.5 14.6667V8H10.5V14.6667" stroke="currentcolor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> </svg>Home



<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13.8334 14V12.6667C13.8334 11.9594 13.5525 11.2811 13.0524 10.781C12.5523 10.281 11.874 10 11.1667 10H5.83341C5.12617 10 4.44789 10.281 3.9478 10.781C3.4477 11.2811 3.16675 11.9594 3.16675 12.6667V14" stroke="currentcolor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8.49992 7.33333C9.97268 7.33333 11.1666 6.13943 11.1666 4.66667C11.1666 3.19391 9.97268 2 8.49992 2C7.02716 2 5.83325 3.19391 5.83325 4.66667C5.83325 6.13943 7.02716 7.33333 8.49992 7.33333Z" stroke="currentcolor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> </svg>About



<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13.8333 1.33331H3.16659C2.43021 1.33331 1.83325 1.93027 1.83325 2.66665V5.33331C1.83325 6.06969 2.43021 6.66665 3.16659 6.66665H13.8333C14.5696 6.66665 15.1666 6.06969 15.1666 5.33331V2.66665C15.1666 1.93027 14.5696 1.33331 13.8333 1.33331Z" stroke="currentcolor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13.8333 9.33331H3.16659C2.43021 9.33331 1.83325 9.93027 1.83325 10.6666V13.3333C1.83325 14.0697 2.43021 14.6666 3.16659 14.6666H13.8333C14.5696 14.6666 15.1666 14.0697 15.1666 13.3333V10.6666C15.1666 9.93027 14.5696 9.33331 13.8333 9.33331Z" stroke="currentcolor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M4.5 4H4.50667" stroke="currentcolor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M4.5 12H4.50667" stroke="currentcolor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> </svg>Services



<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8.49927 2L2.49927 5L8.49927 8L14.4993 5L8.49927 2Z" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2.49927 11L8.49927 14L14.4993 11" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2.49927 8L8.49927 11L14.4993 8" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round"/> </svg>Works



<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13 0.549988H4.00005C2.37355 0.549988 1.05005 1.87349 1.05005 3.49999V12.5C1.05005 14.1265 2.37305 15.45 4.00005 15.45H13C14.6265 15.45 15.95 14.1265 15.95 12.5V3.49999C15.95 1.87349 14.6265 0.549988 13 0.549988ZM15.05 12.5C15.05 13.6305 14.1305 14.55 13 14.55H4.00005C2.86955 14.55 1.95005 13.6305 1.95005 12.5V3.49999C1.95005 2.36949 2.86955 1.44999 4.00005 1.44999H13C14.1305 1.44999 15.05 2.36949 15.05 3.49999V12.5Z" fill="currentcolor"/> <path d="M5.50815 10.6865C5.55665 10.6865 5.60516 10.6825 5.65366 10.6745L6.95965 10.4545C7.14065 10.424 7.30466 10.3395 7.43316 10.2105L11.1647 6.47851C11.4752 6.16851 11.6467 5.75551 11.6467 5.31701C11.6467 4.87801 11.4757 4.46551 11.1652 4.15551C10.5452 3.53451 9.46116 3.53501 8.84166 4.15501L5.10916 7.88751C4.98066 8.01651 4.89665 8.1795 4.86565 8.36L4.64465 9.66501C4.59715 9.94401 4.68866 10.23 4.88866 10.43C5.05416 10.595 5.27815 10.6865 5.50815 10.6865ZM10.0032 4.57301C10.2012 4.57301 10.3882 4.65051 10.5282 4.79101L10.5287 4.79151C10.6687 4.93151 10.7467 5.11801 10.7467 5.31701C10.7467 5.51501 10.6692 5.70201 10.5282 5.84201L10.0272 6.34351L8.97615 5.29251L9.47765 4.79101C9.61765 4.65051 9.80416 4.57301 10.0032 4.57301ZM5.74566 8.52251L8.33965 5.92851L9.39115 6.98001L6.81015 9.56601L5.53216 9.81451L5.74566 8.52251Z" fill="currentcolor"/> <path d="M11.918 11.427H11.449C11.2005 11.427 10.999 11.6285 10.999 11.877C10.999 12.1255 11.2005 12.327 11.449 12.327H11.918C12.1665 12.327 12.368 12.1255 12.368 11.877C12.368 11.6285 12.1665 11.427 11.918 11.427Z" fill="currentcolor"/> <path d="M9.64665 11.427H5.18315C4.93465 11.427 4.73315 11.6285 4.73315 11.877C4.73315 12.1255 4.93465 12.327 5.18315 12.327H9.64665C9.89515 12.327 10.0967 12.1255 10.0967 11.877C10.0967 11.6285 9.89515 11.427 9.64665 11.427Z" fill="currentcolor"/> </svg>Blogs

Get Your FREE Freelancing Roadmap

Stop hopping between tutorials. Grab the Freelancing Mastery Handbook to learn how to choose a skill, build your foundation, find clients, and confidently start your freelancing journey.

Free eBook Download

How to Make a Freelancer portfolio website (WordPress & Elementor Tutorial for Beginners)

Quick Summary

Tools and Links Used

Prompt Used in This Tutorial

Get Your FREE Freelancing Roadmap

Related Tutorials

Vibe Code a REAL Animated WordPress Website with Claude + Elementor

Vibe Coding Full Course for Beginners – Build & Launch a Real SaaS

Edit Videos with ChatGPT Codex — Raw Clips to Finished Reel