https://github.com/tmhsdigital/template_portfolio-site-gh-pages
https://github.com/tmhsdigital/template_portfolio-site-gh-pages
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/tmhsdigital/template_portfolio-site-gh-pages
- Owner: TMHSDigital
- License: apache-2.0
- Created: 2024-08-22T21:13:54.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-22T21:30:51.000Z (almost 2 years ago)
- Last Synced: 2025-01-06T07:28:00.074Z (over 1 year ago)
- Language: CSS
- Homepage: https://tmhsdigital.github.io/TEMPLATE_Portfolio-Site-GH-Pages/
- Size: 18.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Portfolio Website
This is a modern, responsive portfolio website built using HTML, CSS, and JavaScript. It is designed to showcase your work, skills, and contact information in a clean and professional manner. This website is perfect for developers, designers, and other professionals who want to create an online presence.
## Features
- **Responsive Design**: The website is fully responsive and looks great on all devices, from mobile phones to desktop computers.
- **Smooth Scrolling**: Navigation links provide smooth scrolling to different sections of the website.
- **Fade-In Animations**: Sections of the website fade in as they come into view, adding a subtle yet elegant effect.
- **Scroll-to-Top Button**: A scroll-to-top button appears when the user scrolls down the page, allowing for easy navigation back to the top.
- **Contact Form**: A simple contact form is included, which can be easily connected to services like Formspree for email submissions.
## Installation
To get started with this portfolio website, follow these steps:
1. **Clone the Repository**
```bash
git clone https://github.com/your-username/portfolio-website.git
```
Alternatively, you can download the zip file from GitHub.
2. **Navigate to the Project Directory**
```bash
cd portfolio-website
```
3. **Open in Your Browser**
- Simply open `index.html` in your web browser to view the website locally.
## Customization
### 1. Update Your Name and Profession
- Open `index.html` and find the `
` and `
` tags under the `#home` section. Replace the placeholder text `[Your Name]` and `[Your Profession]` with your own.
### 2. Add Your Own Background Image
- Replace the placeholder `background.jpg` in the `#home` section with your own image. Update the file path in `style.css` under the `#home` selector:
```css
#home {
background: url('your-background.jpg') no-repeat center center/cover;
/* other styles */
}
```
### 3. Customize Portfolio Items
- In `index.html`, locate the `#portfolio` section. Replace the existing `portfolio-item` entries with your own projects. Update the image source (`src`), project name (`
`), and description (`
`).
### 4. Modify Contact Form
- If using Formspree for the contact form, replace `{your-email}` in the `action` attribute of the form with your Formspree endpoint.
```html
```
### 5. Customize Styles
- Open `style.css` and adjust colors, fonts, or any other styles to match your personal brand.
### 6. JavaScript Enhancements
- Open `animations.js` if you'd like to add or modify any JavaScript interactions or animations.
## Deployment
### GitHub Pages
You can easily deploy this portfolio on GitHub Pages by following these steps:
1. **Create a New Repository on GitHub**
- Go to GitHub and create a new repository named `your-username.github.io`.
2. **Push Your Code to GitHub**
- Add the remote repository and push your code.
```bash
git remote add origin https://github.com/your-username/your-username.github.io.git
git push -u origin main
```
3. **Access Your Website**
- After pushing the code, your portfolio will be available at `https://your-username.github.io`.