Case study: A Walk-through of How To Rebuild your Portfolio Website
Introduction
A colleague and friend Okai Abena Akweley recently saw my revamped website and advised that I share my process and so I went ahead to write and share it on medium for the world to read.
As a professional(especially those in the software and startup space) in today’s digital age, having a well-designed portfolio website is essential. It serves as a showcase of your experience, skills, and expertise, allowing potential clients, business partners or employers to get a glimpse of what you have to offer.
It is also a medium you can use to channel forth your wisdom and share it with the world through personal blogs documenting your past experiences and lessons you learnt from them as a mentor Bright Ahedor often does.
In this case study, I will walk you through the process of rebuilding your own portfolio website, highlighting the steps, considerations, and decisions you can make along the way.
The Importance of a Well-Designed Portfolio Website
A well-designed portfolio website is more than just a collection of your work. It is a reflection of your personal brand, professionalism, and attention to detail. First impressions matter, and last longer than any other impression or re-impressions.
Your website is often the first point of contact for potential clients, employers or business partners from referrals or from your social media accounts. A poorly designed or outdated website can leave a negative impression and hinder your chances of utilizing new opportunities.
Investing time and effort into creating a visually appealing and user-friendly portfolio website can significantly enhance your online presence and credibility. It allows you to showcase your work in a way that highlights your unique abilities and strengths, making it easier for others to understand and appreciate your skills.
Now it goes without saying that we all have different personalities, preferences and temperaments so there is always a variety in how we present ourselves or how we choose to brand ourselves. Your portfolio website should reflect your physical and personal brand as well such that people don’t feel scammed or deceived when they meet an out of depth individual with a very appealing and captivating portfolio, always make sure you are worth your salt.
Assessing the Current Performance and Design of Your Portfolio Website
Before diving into the rebuild process, it is crucial to assess the current performance and design of your current or previous portfolio website. It doesn’t matter if you don’t have one yet you can contact a Brand Designer or Strategist to help you craft a palette for your personal brand then you can contact a web designer/developer to make one for you that is tailored to you. If you possess the skills to build it then you can go ahead to do just that with assistance of your brand palette and assets.
Back to Assessments..
Evaluate your current portfolio website strengths and weaknesses, identify areas for improvement, and gather feedback from others, such as colleagues or industry professionals. This evaluation will provide valuable insights into what aspects of your website are working well and what needs to be addressed during the rebuild.
Consider factors such as page load speed, mobile responsiveness, navigation structure, visual aesthetics, and overall user experience. A thorough assessment will guide your decision-making process and help you prioritize the changes and updates needed for a successful portfolio website rebuild.
For analytics on these specific metrics you can use Lighthouse report in your browser or Plausible.
Planning the Rebuild: Setting Goals and Objectives
Like any project, a portfolio website rebuild requires careful planning. Start by setting clear goals and objectives for the rebuild. Ask yourself questions such as:
- What do I want to achieve with my new portfolio website?
- How do I want visitors to perceive my work and skills?
- What specific features or functionality do I need in my new website?
By defining your goals and objectives upfront, you can establish a roadmap that will guide your decision-making process throughout the rebuild. It will also help you stay focused and ensure that the end result aligns with your overall vision for your portfolio website.
User Experience (UX) Considerations for a Portfolio Website
User experience (UX) plays a vital role in the success of any website, including portfolio websites. As you rebuild your website, consider the following UX principles:
- Simplicity: Keep the design clean and uncluttered, ensuring that visitors can easily navigate and find the information they need. This is what reflects the thought process and planning you put into the website; everything is positioned where it should be; nothing is lacking or misplaced.
- Consistency: Maintain a consistent visual and navigational structure throughout your website to provide a seamless user experience. This ensures the users of your website have a smooth flow through all the webpage without feeling a break in the flow; this greatly reduces the bounce rate of your website by keeping visitors longer on your website. Read this article by hub spot on how to fix a high bounce rate
- Accessibility: Ensure that your website is accessible to users with disabilities by following accessibility guidelines and standards. I wrote an article recently about web accessibility and our joint responsibility; you should read making the internet accessible to everyone
- Engagement: Incorporate interactive elements and engaging content to captivate your audience and encourage them to explore further. This is another principle I seriously took into consideration by incorporating a fluid and fascinating albeit uncommon navigation menu that I will write about on my hashnode blog soon.
- Visual Hierarchy: Prioritize and organize your content in a way that guides users’ attention and showcases your most important work prominently. This guided presentation of content on your website makes your content consumable and removes the overwhelming part of it. Visitors digest the information you have to offer in bits and snippets; making them ask for more if they feel the need to; this also feeds into engagement, because they reach out to ask questions or are interested in finding more value.
By focusing on the above User experience (UX) principles and considerations, you can create a portfolio website that not only looks visually appealing but also provides a smooth and enjoyable experience for your visitors.
Incorporating Design Thinking Principles into Your Website Rebuild
Design thinking is an iterative process that involves understanding the user’s needs, challenging assumptions, and exploring innovative solutions.
It is also a process we ought to use often as entrepreneurs and software engineers when approaching problem solving. By incorporating design thinking principles into your website rebuild, you can ensure that your portfolio website meets the needs and expectations of your target audience.
Start by conducting user research to gain insights into the preferences, behaviors, and pain points of your target audience. This user research could be a google form or a simple chat with people who have visited your website before and or new visitors either in person or via google meet. Use the insights from these interviews to inform your design decisions and prioritize the features and functionality that will deliver the most value to your users.
Throughout the rebuild process, continuously test and gather feedback from a closed community of visitors to identify areas for improvement. Iterate on your designs based on user feedback, always striving to create a website that meets the needs of your audience.
Choosing the Right tools and frameworks for Your Portfolio Website
Choosing the right frameworks, libraries and languages to build with is crucial for the success of your portfolio website rebuild. These languages, libraries and frameworks provide the foundation for your website’s structure, layout, and interactivity. Consider the following factors when selecting frameworks:
- Ease of Use: Choose frameworks that are easy to learn and work with, especially if you have limited experience with web development.
- Community Support: Opt for frameworks that have an active community of developers, as this ensures ongoing support, updates, and resources.
- Scalability: Select frameworks that can accommodate future growth and expansion of your portfolio website.
- Compatibility: Ensure that the frameworks you choose are compatible with modern browsers and devices, ensuring a seamless user experience across different platforms.
Research and experiment with different frameworks to find the ones that best meet your needs and align with your technical skills. It is best to choose a framework that has a community around it and is opensource like Nextjs or Vuejs; such that in-case you run into errors; there is help available for you in form of documentation and individuals in slack channels, stack overflow and Discord Servers
I chose to use HTML, Tailwind CSS and Vanilla JavaScript ES6 because I have a very high affinity with these tools and for the ultimate reason of continuity, and giving others a chance to clone my repository and use it to make their own personal website.
Step-by-Step Walk-through of Rebuilding Your Portfolio Website
Since I have already explained these processes indepth; I will just outline them here in a blitz format. Each of these steps is essential in creating a successful and impactful online presence:
Step 1: Define Your Branding and Visual Identity
Define your branding elements, such as your logo, color palette, typography, and overall visual style. These elements will set the tone for your portfolio website and help create a cohesive and professional look. See a brand strategist or designer
Step 2: Plan Your Information Architecture
Create a clear and intuitive navigation structure that allows visitors to easily find the information they are looking for. Consider organizing your work into categories or projects, ensuring that each item is easily accessible. Do this with a UI/UX engineer
Step 3: Design Your Layout and Wireframes
Create wireframes or mockups to visualize the layout and structure of your portfolio website. Consider the placement of your work, the use of white space, and the overall visual hierarchy. Do this with a UI Designer
Step 4: Develop Your Website’s Front-End
Translate your design into code using HTML, CSS, and JavaScript. Pay attention to responsive design principles to ensure your website looks great on different devices. See a Web developer for this or do it yourself of you have the skills
Step 5: Implement Interactive Elements and Functionality
Incorporate interactive elements, such as image sliders, hover effects, or animated transitions, to enhance user engagement and showcase your work effectively. Very important to think about
Step 6: Optimize Your Website for Performance
Optimize your website’s performance by compressing images, minifying code, and leveraging browser caching. This will improve page load speed and enhance the overall user experience. Using SEO-friendly frameworks like Nextjs, Angular and Vuejs spares you the time of having to tweak everything yourself.
Step 7: Implement SEO Best Practices
Optimize your portfolio website for search engines by incorporating relevant keywords, meta tags, and descriptive URLs. This will improve your website’s visibility and attract organic traffic. This is for those using plain HTML, Vanilla Javascript; as mentioned in step 7 most frameworks provide this out of the box.
Step 8: Test and Debug Your Website
Thoroughly test your website across different browsers, devices, and screen sizes to ensure it functions as intended. Identify and fix any bugs or issues that may arise. I used Developer tools in Mozilla firefox and Chrome browser for this.
Step 9: Publish and Deploy Your Website
Choose a reliable hosting provider and deploy your portfolio website to make it accessible to the public. Set up domain mapping, SSL certificates, and other necessary configurations, if you use something like Hostgator, Go Daddy or Hostinger. My trusted hosting provider is vercel and they provide SSL certificates as part of your hosting and domain plan.
Testing and Optimizing Your New Portfolio Website
Once your portfolio website is live, it’s essential to continuously test and optimize its performance. Monitor user behavior, analyze website analytics, and gather feedback to identify areas for improvement.
Regularly update and maintain your website by adding new work, updating your resume or bio, and staying up-to-date with industry trends. This will ensure that your portfolio website remains relevant and continues to impress potential clients or employers.
Showcasing Your Portfolio Website and Gaining Feedback
Building a portfolio website is just the first step. To make the most of your new online presence, actively promote and showcase your work. Share your website on professional networking platforms, social media, and relevant online communities.
Encourage visitors to provide feedback on your portfolio website, allowing you to gather insights and make further improvements. Actively engage with your audience, respond to inquiries, and use their feedback to refine your website over time. I did this by sharing my website in a whatsapp group with 50 other entrepreneurs; about 20% gave me feedback which is a good bench-marking number.
Code Snippets
If you need building blocks for HTML, CSS and JS, here are some code snippets from my portfolio website rebuild. Feel free to use and adapt them for your own project:
/* index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/about.css">
<link rel="stylesheet" href="css/noise.css">
<link rel="stylesheet" href="css/index.css">
<link href="./output.css" rel="stylesheet">
<link href="https://cdn.tailwindcss.com/2.2.15/tailwind.min.css" rel="stylesheet">
<title>Were Samson - Personal Website</title>
</head>
<div id="dock-container">
<div id="dock">
<ul>
<li>
<span>Home</span>
<a href="index.html"><img src="images/HomeDark.png"/></a>
</li>
<li >
<span>About</span>
<a href="html/about.html"><img src="images/Earth.png"/></a>
</li>
<li >
<span>Projects</span>
<a href="html/project.html"><img src="images/Projects.png"/></a>
</li>
<li >
<span>Skills</span>
<a href="html/skills.html"><img src="images/terminal.png"/></a>
</li>
<li >
<span>Contact</span>
<a href="html/contact.html"><img src="images/message.png"/></a>
</li>
<li >
<span>Github</span>
<a href="https://github.com/Samsonroyal"><img src="images/github.png"/></a>
</li>
<li >
<span>Twitter</span>
<a href="https://twitter.com/SamsonWere_"><img src="images/X.png"/></a>
</li>
<li >
<span>Medium</span>
<a href="https://medium.com/@weresamson"><img src="images/medium.png"/></a>
</li>
</ul>
</div>
</div>
<body>
<div class="content">
<h4 class="text-3xl font-bold underline">
Hello there!
</h1>
<div class="terminal_toolbar">
<div class="butt">
<button class="btn btn-color"></button>
<button class="btn"></button>
<button class="btn"></button>
</div>
<p class="user">Samson@TheMonarch: ~</p>
</div>
<div class="container_terminal">
<div class="terminal_body">
<div class="terminal_promt">
<span class="terminal_user">Samson@TheMonarch:</span>
<span class="terminal_location">~
<span class="terminal_bling">$
I am The Monarch; I build software for businesses
</span>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="text-container">
<button class="button-29" role="button">
<>Therapy Button</>
</button>
</div>
<!-- end of text-container -->
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
<script src="mouseglow.js"></script>
</body>
</html>/* index.css */
@import url('https://fonts.googleapis.com/css?family=Inconsolata|Lato:300,400,700');
html, body, h1, h2, h3, h4, h5, h6, p, li, ol, ul, pre {
margin: 0;
padding: 0;
}
html, body { min-height: 100%; }
body {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
position: relative;
overflow: hidden;
}
.content {
position: relative;
padding: 20px;
box-sizing: border-box;
background: #7188ee;
color: #fff; /* Text color */
font-size: 1.6em;
line-height: 2.6em;
margin: 20px auto;
margin-top: 80px;
width: 100%;
max-width: 800px;
border-radius: 15px;
border-color: transparent 5px;
/* Drop shadow */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
}
.content ul {
margin: .15em 2em;
padding: 0;
}
#header {
background: #7188ee;
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center;
height: 60px;
position: sticky;
}
.links {
display: flex;
list-style: none;
margin: 0;
padding: 0;
--nav-item-padding: 10px;
}
.nav-item {
margin: 0 var(--nav-item-padding);
padding: 0;
}
.nav-link {
text-decoration: none;
color: rgba(255, 255, 255, 0.8);
font-weight: bold;
transition: color 0.3s;
font-size: 18px;
}
.nav-link:hover {
color: rgba(255, 255, 255, 1);
}
.line {
width: 1px;
height: 30px;
background: rgba(255, 255, 255, 0.3);
margin: 0 20px;
}
.button-29 {
align-items: center;
appearance: none;
background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
border: 0;
border-radius: 6px;
box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-flex;
font-family: "JetBrains Mono",monospace;
height: 48px;
justify-content: center;
line-height: 1;
list-style: none;
overflow: hidden;
padding-left: 16px;
padding-right: 16px;
position: relative;
text-align: left;
text-decoration: none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: 18px;
margin-top: 10px;
margin-bottom:20px;
}
.button-29:focus {
box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}
.button-29:hover {
box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
transform: translateY(-2px);
}
.button-29:active {
box-shadow: #3c4fe0 0 3px 7px inset;
transform: translateY(2px);
}
.container {
width: 230px;
height: 194px;
}
.terminal_toolbar {
display: flex;
height: 30px;
align-items: center;
padding: 0 8px;
box-sizing: border-box;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: linear-gradient(#504b45 0%, #3c3b37 100%);
}
.butt {
display: flex;
align-items: center;
}
.btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin-right: 5px;
font-size: 8px;
height: 12px;
width: 12px;
box-sizing: border-box;
border: none;
border-radius: 100%;
background: linear-gradient(#7d7871 0%, #595953 100%);
text-shadow: 0px 1px 0px rgba(255,255,255,0.2);
box-shadow: 0px 0px 1px 0px #41403A, 0px 1px 1px 0px #474642;
}
.btn-color {
background: #ee411a;
}
.btn:hover {
cursor: pointer;
}
.btn:focus {
outline: none;
}
.butt--exit {
background: linear-gradient(#f37458 0%, #de4c12 100%);
}
.user {
color: #d5d0ce;
margin-left: 6px;
font-size: 14px;
line-height: 15px;
}
.terminal_body {
background: rgba(56, 4, 40, 0.9);
height: calc(100% - 30px);
padding-top: 2px;
margin-top: -1px;
font-size: 12px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.terminal_promt {
display: flex;
}
.terminal_promt span {
margin-left: 4px;
}
.terminal_user {
color: #7eda28;
}
.terminal_location {
color: #4878c0;
}
.terminal_bling {
color: #dddddd;
}
.terminal_cursor {
display: block;
height: 14px;
width: 5px;
margin-left: 10px;
animation: curbl 1200ms linear infinite;
}/* about.css */
.App {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
font-family: sans-serif;
section {
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 33px;
font-weight: 400;
text-align: center;
margin: 40px 0 10px 0;
color: #2A354F;
}
h2 {
font-size: 23px;
font-weight: 200;
text-align: center;
margin: 30px 0 10px 0;
color: #2f61d4;
}
p {
width: 400px;
font-size: 16px;
line-height: 24px;
color: #2A354F;
margin-bottom: 40px;
em {
display: block;
margin-top: 10px;
font-size: 14px;
}
}
input {
display: inline-block;
width: 300px;
height: 44px;
margin: 5px 10px 15px 0;
padding: 10px 11px;
font-size: 16px;
font-weight: 300;
line-height: 1.5;
color: #869ab8;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #dde1ed;
border-radius: 2px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
outline: none;
box-sizing: border-box;
&.error {
border: 1px solid #FA5252;
}
}
button {
position: relative;
display: inline-block;
height: 44px;
padding: 4px 10px;
letter-spacing: 0.025em;
font-size: 16px;
font-weight: 400;
border-radius: 2px;
border: none;
color: #fff;
background-color: #274991;
box-sizing: border-box;
outline: none;
cursor: pointer;
}
}
.Footer {
display: flex;
justify-content: center;
width: 100%;
margin-top: 40px;
background-color: #264991;
ul {
margin: 0 0 15px 10px;
padding-left: 0;
li {
padding: 4px 0;
color: rgba(255, 255, 255, 0.9);
}
}
ul + ul {
margin: 30px 0 20px 0;
li {
display: inline-block;
a {
margin: 0 15px;
text-decoration: none;
}
&:last-child a { margin-right: 0; }
&:first-child a { margin-left: 0; }
}
}
a {
font-weight: 200;
color: rgba(255, 255, 255, 0.9);
}
}
#dock-container {
position: fixed;
bottom: 0;
text-align: center;
right: 20%;
left: 20%;
width: 60%;
background: rgba(95, 59, 223, 0.2);
border-radius: 10px 10px 0 0;
}
#dock-container li {
list-style-type: none;
display: inline-block;
position: relative;
}
#dock-container li img {
width: 64px;
height: 64px;
-webkit-box-reflect: below 2px
-webkit-gradient(linear, left top, left bottom, from(transparent),
color-stop(0.7, transparent), to(rgba(255,255,255,.5)));
-webkit-transition: all 0.3s;
-webkit-transform-origin: 50% 100%;
}
#dock-container li:hover img {
-webkit-transform: scale(2);
margin: 0 2em;
}
#dock-container li:hover + li img,
#dock-container li.prev img {
-webkit-transform: scale(1.5);
margin: 0 1.5em;
}
#dock-container li span {
display: none;
position: absolute;
bottom: 140px;
left: 0;
width: 100%;
background-color: rgba(0,0,0,0.75);
padding: 4px 0;
border-radius: 12px;
}
#dock-container li:hover span {
display: block;
color: #fff;
}/* about.css */
*, *:before, *:after {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body, button, input {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: 1.4px;
}
.background {
display: flex;
min-height: 50vh;
}
.container {
flex: 0 1 700px;
margin: auto;
padding: 10px;
}
.screen {
position: relative;
background: #FFFFFF;
border-radius: 15px;
}
.screen:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 20px;
right: 20px;
bottom: 0;
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
z-index: -1;
}
.screen-header {
display: flex;
align-items: center;
padding: 10px 20px;
background: #4d4d4f;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.screen-header-left {
margin-right: auto;
}
.screen-header-button {
display: inline-block;
width: 8px;
height: 8px;
margin-right: 3px;
border-radius: 8px;
background: white;
}
.screen-header-button.close {
background: #ED5E1C;
}
.screen-header-button.maximize {
background: #D5E925;
}
.screen-header-button.minimize {
background: #49DF04;
}
.screen-header-right {
display: flex;
}
.screen-header-ellipsis {
width: 3px;
height: 3px;
margin-left: 2px;
border-radius: 8px;
background: #999;
}
.screen-body {
display: flex;
}
.screen-body-item {
flex: 1;
padding: 50px;
}
.screen-body-item.left {
display: flex;
flex-direction: column;
}
.app-title {
display: flex;
flex-direction: column;
position: relative;
color: #3E7CE7;
font-size: 26px;
}
.app-title:after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 25px;
height: 4px;
background: #A933C6;
}
.app-contact {
margin-top: auto;
font-size: 8px;
color: #888;
}
.app-form-group {
margin-bottom: 15px;
}
.app-form-group.message {
margin-top: 40px;
}
.app-form-group.buttons {
margin-bottom: 0;
text-align: right;
}
.app-form-control {
width: 100%;
padding: 10px 0;
background: none;
border: none;
border-bottom: 1px solid #666;
color: #ddd;
font-size: 14px;
text-transform: uppercase;
outline: none;
transition: border-color .2s;
}
.app-form-control::placeholder {
color: #666;
}
.app-form-control:focus {
border-bottom-color: #ddd;
}
.app-form-button {
background: none;
border: none;
color: #171716;
font-size: 14px;
cursor: pointer;
outline: none;
}
.app-form-button:hover {
color: #13B948;
}
.credits {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
color: #ffa4bd;
font-family: 'Roboto Condensed', sans-serif;
font-size: 16px;
font-weight: normal;
}
.credits-link {
display: flex;
align-items: center;
color: #fff;
font-weight: bold;
text-decoration: none;
}
.dribbble {
width: 20px;
height: 20px;
margin: 0 5px;
}
@media screen and (max-width: 520px) {
.screen-body {
flex-direction: column;
}
.screen-body-item.left {
margin-bottom: 30px;
}
.app-title {
flex-direction: row;
}
.app-title span {
margin-right: 12px;
}
.app-title:after {
display: none;
}
}
@media screen and (max-width: 600px) {
.screen-body {
padding: 40px;
}
.screen-body-item {
padding: 0;
}
}Conclusion
Rebuilding a portfolio website is a valuable investment in your professional growth and success. By following the step-by-step walk-through and incorporating the principles of design thinking and user experience, you can create a portfolio website that stands out and captivates your audience.
Remember to continuously test, optimize, and update your website to ensure it remains relevant and impactful. Finally, don’t forget to actively promote and showcase your work to gain valuable feedback and attract new opportunities.
Now, it’s your turn to take action.
The code snippets I provided here are not the entirety of my website
Visit the github repository of my portfolio website , fork the repo, and make contributions. It is open source, and your contributions will help improve the portfolio website template for others to use. Happy rebuilding!
