Overview

This article provides instructions on how to customize a template for a personal website. It gives guidance on various aspects such as changing the logo, navigation links, profile image, name, job title, job description, and showcasing projects.

Features

• Customizable logo and navigation links
• Ability to change profile image
• Personalized name and job title
• Editable job description
• Connect with me button with customizable link
• Showcase projects using screenshots
• Customizable project titles, stack, and links

Installation

To install and customize this template, follow the steps below:

1. Replace the default logo:

   • Locate the ./assets/logo.png file in the markup of index.html
   • Replace it with your own logo link or image, renaming it to logo.png

2. Update navigation links:

   • Replace the existing # symbol with the respective link for each navigation item
   • Remove any unused navigation links or edit names to preferred link sources
   • The last navigation link is a highlighted yellow button styled with btn and btn-primary classes

3. Replace profile image:

   • Locate the ./assets/profile-image.png file
   • Replace it with your own profile image by either adding the image locally or replacing the source link in the HTML file
   • It is recommended to use your GitHub profile image link to ensure it updates automatically

4. Edit name:

   • Find the welcome message in the index.html file (located in /docs/)
   • Replace “Franklin” with your own name

5. Add job title:

   • Add a concise summary of what you do in five words
   • Place the first two words in the first <h2> element and the remaining four words in the next <h2> element

6. Update job description:

   • Update the job description with your own information, keeping it within 20 words

7. Connect with me button:

   • Replace the # in the link of the “Connect With Me” button with your preferred link, such as a social link, email address, or phone number
   • You can choose any link you want visitors to be directed to when they click the button

8. Customize project section:

   • The project section showcases projects using screenshots, with default settings of 3 columns and 2 rows
   • To adjust the number of columns and rows, modify the .project section
   • To customize individual project cards:
     • Edit the project title within the <h3> element
     • Display the tools/technologies used in building the project in the <p> element
     • Update the project links, represented by icons on the top right of the project cards

Summary

This article provides a guide to customizing a personal website template. It covers various aspects such as changing the logo, navigation links, profile image, name, job title, job description, and showcasing projects. By following the provided instructions, users can easily personalize the template to suit their style and preferences.