How to Create Your Own Personal Portfolio

Feb 18, 2023 | Programming

In today’s digital age, having a personal portfolio can be your ticket to showcasing your skills and projects effectively. This guide will walk you through the steps of setting up your own personal portfolio using HTML, CSS, and JavaScript, hosted on GitHub Pages.

Features of the Portfolio

  • Fully Responsive Design
  • Valid HTML5 and CSS3
  • Typing animation using Typed.js
  • Easy to modify for personal preferences

Installation Steps

Follow these steps to get your portfolio up and running:

  1. Clone the repository and modify the contents of bindex.html.
  2. Add or remove images from the assets/img directory as per your requirement.
  3. Update the information in the projects folder according to your needs.
  4. Utilize GitHub Pages to create your own website.
  5. To deploy, create a GitHub repository named your-github-username.github.io and push the generated code to the master branch.

Understanding the Structure

The portfolio is structured like a well-organized book. Imagine your portfolio as a book that has chapters dedicated to different aspects of your professional journey:

  • About: This chapter introduces you and gives insight into who you are.
  • Interests: This reflects what you love and are passionate about.
  • Education: This chapter outlines your academic achievements.
  • Online Certification: Here, you can list your certifications that add value to your profile.
  • Experience: This part showcases your work history and relevant roles.
  • Projects: This is where your creativity shines, showcasing what you’ve created.
  • Skills: A summary of your capabilities.
  • Resume: Your formal document representing your professional background.
  • Contact Info: This tells potential employers how to get in touch with you.

Tools Used

For hosting, we are using GitHub Pages to publish the static website built with HTML, CSS, and JavaScript.

Contributing to the Portfolio

If you’re interested in contributing to this project, follow these steps:

  1. Option 1: Fork this repository!
  2. Option 2: Clone this repository to your local machine.
  3. Build your code.
  4. Create a new pull request.

Troubleshooting Guide

Here are some common issues you may encounter while setting up your portfolio:

  • 404 Error on GitHub Pages: Ensure your repository is named correctly: your-github-username.github.io.
  • Images not loading: Double-check the file paths in the assets/img directory.
  • Portfolio not responsive: Verify that you’re using valid HTML and CSS. Check for any syntax errors.
  • Typing animation not working: Ensure that you’ve included the Typed.js library correctly in your project.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Stay Informed with the Newest F(x) Insights and Blogs

Tech News and Blog Highlights, Straight to Your Inbox