Github Repository

Create-Your-Own-Portfolio-Website-With-My-Template

Template to be used

Template

Repository Content

The repository contains the code for the template I created for my own portfolio website. The template is built using HTML, and CSS. It is used to showcase your projects, skills, and contact information to potential employers or collaborators.

Files

- index.html: The main HTML file containing the structure of the website.

- styles.css: The CSS file containing the styles for the website.

- .png: Images used around the whole template.

Customization

Before trying to customize the template take your time to read and understand the code, I've added plenty of comments for this.

After reading the whole code and understanding it, feel free to customize the content and styles to match your personal branding and preferences. You can modify the HTML to update project details, skills, and contact information, similarly, you can adjust the CSS to change colors, fonts, layout, etc.

You can clone or add other sections if needed and you can add or change the images to your liking.

Here are some tips for styling your page

- Website Theme Colors: You can use Coolors to generate a theme for your website and use the colors codes it provides on your css, or you can also use a brwoser extension such as Amazing color picker to browse websites you like and draw inspiration from their themes.

Coolors Amazing color picker

- Background Images: Use websites such as Vecteezy for background images.

Vecteezy

- Socials Logos: For your socials I've added each social logo and hyperlinked it to my pages, use Icons8 to search for your socials logo in various styles. Add as many socials as you like and remember to hyperlinked them to your personal pages.

Icons8

Hosting Instructions

To host your website for free, we'll utilize GitHub Pages. Simply follow these steps:

1. Clone the Repository:

   Clone this repository to your local machine using Git or Github Desktop.

2. Edit the Website:

   Customize the website according to your preferences. You can modify the HTML, CSS, and JavaScript files to personalize the content and design.

3. Test Locally:

   Test the website locally to ensure everything works as expected. Open the index.html file in your web browser to preview the changes.

4. Create a New GitHub Repository:

   If you haven't already, create a new repository on GitHub where you will host your website.

5. Push Changes to GitHub:

   Push your changes to the GitHub repository you created.

6. Enable GitHub Pages:

   • Navigate to your repository on GitHub.
   • Go to the "Settings" tab.
   • Scroll down to the "GitHub Pages" section.
   • Under "Source", select "main" branch or "master" branch depending on your repository settings.
   • Click "Save".
   • GitHub Pages will now build and deploy your website. You'll find the URL of your hosted website in the "GitHub Pages" section.

7. Custom Domain (Optional):

   If you have a custom domain, you can configure it to point to your GitHub Pages site. Follow the instructions in the "Custom Domain" section of the GitHub Pages settings.

8. Update README:

   Update the README.md file with information about your website and provide the URL of your hosted GitHub Pages site.

9. Share Your Website:

   Once the website is hosted, share the URL with others to showcase your portfolio.