Personal Portfolio Template

This repository contains a simple personal portfolio template designed for beginners. It is structured to help you create your own personal website easily using HTML5 and CSS3.

Project Structure

personal-portfolio
├── css
│   ├── about.css
│   ├── index.css
│   ├── projects.css
│   └── styles.css
├── img
│   ├── img_avatar_f.png
│   └── img_avatar_m.png
├── pages
│   ├── about.html
│   └── projects.html
├── index.html
├── LICENSE
└── README.md

Getting Started

1. Clone the Repository To get started, clone this repository to your local machine using the following command:

   git clone https://github.com/acm-udayton/template-portfolio.git
   

2. Open the Project Navigate to the project directory:

   cd template-portfolio
   

3. Edit the Files

   • Open index.html to customize your profile photo, name, and tagline.
   • Update the navigation links if necessary.
   • Modify pages/about.html to include your work history, education, and skills.
   • Add your projects in pages/projects.html.

4. Customize the Styles

   • Open css/styles.css to change the styles of your website. This file contains all the CSS rules, and you can easily modify colors, fonts, and layout.

5. Choose the Icons

   • In any file, replace the <i class="fa- ... </i> code with the code for a different FontAwesome icon. You can use their icon search page to look for icons to suit your design and website!

6. Preview Your Website Open index.html in your web browser to see your changes in action. We recommend you use the Visual Studio Code extension LiveServer to view your changes without needing to reload the page.

Deploying with GitHub Pages

1. Push your changes to your GitHub repository.
2. Go to your repository on GitHub.
3. Click on the "Settings" tab.
4. Scroll down to the "GitHub Pages" section.
5. Select the branch you want to use (usually main or master) and click "Save".
6. Your website will be published at https://yourusername.github.io/personal-portfolio.

Tips for Beginners

• HTML Basics: Familiarize yourself with HTML tags and structure. Use comments to organize your code.
• CSS Basics: Learn about selectors, properties, and values. Use classes and IDs to apply styles to specific elements.
• Responsive Design: Use relative units (like percentages) and media queries to make your website look good on all devices.

Feel free to reach out if you have any questions or need help! Happy coding!