ScholarSite — HTML Starter Template

SHA-256: 376abf1bf4f1387b510ff4fc3120c0db5f93a66af94636eb7b70a0759ed3ddf8

2026-10-03T20:14:05.192Z

# ScholarSite

A fully responsive, modern website template designed for academic researchers to showcase their research, publications, and accomplishments. This template is perfect for creating a personal academic website to share your work with the world.

![GitHub Stars](https://img.shields.io/github/stars/muhammedrashidx/ScholarSite?style=social)
![GitHub Forks](https://img.shields.io/github/forks/muhammedrashidx/ScholarSite?style=social)

## 🌟 Features
- **Responsive Design**: Adapts to different screen sizes.
- **Easy to Customize**: Well-commented CSS for easy edits.
- **Modern Look**: Clean and minimal design for academic profiles.
- **Includes**: About page (`index.html`), Research page (`research.html`), Publications page (`publications.html`), Gallery page (`gallery.html`).

## 🚀 Quick Start

1. **Fork the Repository**
   - Click the **Fork** button in the top-right corner of this page to create your own copy of the repository.
   
   [![Fork the Repository](https://img.shields.io/badge/Fork%20The%20Repository-blue?style=for-the-badge)](https://github.com/muhammedrashidx/ScholarSite/fork)

2. **Clone the Repository**
   - Use Git to clone the repository to your local machine:
     ```bash
     git clone https://github.com/your-username/ScholarSite.git
     ```

3. **Open the Project in VS Code**
   - Open Visual Studio Code, and then open the project folder.
   - To open a terminal in VS Code, press `Ctrl + \`` (backtick).

4. **Make Changes to Your Site**
   - Edit the HTML files (`index.html`, `research.html`, `publications.html`, `gallery.html`) and CSS files to add your own content and style.
   - The CSS is already structured and commented for easy customization. You can modify the `index.html` for your profile, `research.html` for your research work, etc.

5. **Test Your Site Locally**
   - You can test the website on your local machine by opening `index.html` in your browser.
   - Alternatively, you can use a Live Server extension in VS Code to automatically refresh changes.

6. **Push Changes to GitHub**
   - Once you're happy with your changes, commit and push them to your GitHub repository:
     ```bash
     git add .
     git commit -m "Customizing the academic website"
     git push origin main
     ```

## 🌐 Hosting on GitHub Pages

You can host your website for free using **GitHub Pages**, and by following the steps below, your website will be accessible directly at `https://your-username.github.io`.

### Steps to Host on GitHub:

1. **Rename the Repository (Optional but Recommended)**
   - Go to your repository on GitHub.
   - Click on `Settings`.
   - Scroll to the **Repository name** section and rename the repository to match your GitHub username.
   - For example, if your GitHub username is `janedoe`, rename the repository to `janedoe`.
   - This will allow your website to be live at `https://your-username.github.io` (e.g., `https://janedoe.github.io`).

2. **Enable GitHub Pages**
   - Go to your repository on GitHub.
   - Click on `Settings` > `Pages`.
   - Under the "Source" section, select the `main` branch and click **Save**.
   
   [![Enable GitHub Pages](https://img.shields.io/badge/Enable%20GitHub%20Pages-blue?style=for-the-badge)](https://github.com/your-username/your-repo/settings/pages)

3. **Access Your Website**
   - After a few minutes, your website will be live at `https://your-username.github.io`.
   - You can now share your website URL with others!

## 🛠️ Customization Guide

This website template is made up of four main HTML pages:
1. **`index.html`**: This is the About page, where you can include your bio, profile picture, and links to social media or professional profiles.
2. **`research.html`**: Showcase your research projects with detailed descriptions, images, and links to papers.
3. **`publications.html`**: A page to list all your published works with links to their full text or abstract.
4. **`gallery.html`**: A photo gallery page where you can include images of your research, events, or personal photos.

### Editing CSS
- The CSS is fully commented and divided into sections for easy understanding.
- You can modify the styles in the `style.css` file, which controls the layout, fonts, and colors for all pages.

## 🛠️ Tools You Need

- [Visual Studio Code](https://code.visualstudio.com/) - A powerful, free code editor.
- [Git](https://git-scm.com/) - A version control system to manage and push your changes.

### Using VS Code to Clone and Update the Page
1. **Clone the Repository**
   - In VS Code, open the Command Palette (Ctrl + Shift + P), and type `Git: Clone`.
   - Paste your repository URL (from GitHub).
   
2. **Open Files and Make Changes**
   - Once cloned, open the folder in VS Code and start editing `index.html`, `style.css`, etc.
   
3. **Using Live Server to Preview**
   - Install the [Live Server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) for VS Code to see changes in real-time.
   - Right-click on `index.html` and select `Open with Live Server`.

## 👥 Contributing

Feel free to contribute to this project by submitting pull requests for enhancements or bug fixes. Fork the repository, make your changes, and submit a PR!

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

---

### ✨ Enjoy your new ScholarSite and share your work with the world!

[![Star the Repository](https://img.shields.io/badge/Star%20The%20Repository-yellow?style=for-the-badge)](https://github.com/muhammedrashidx/ScholarSite/stargazers)
[![Fork the Repository](https://img.shields.io/badge/Fork%20The%20Repository-blue?style=for-the-badge)](https://github.com/muhammedrashidx/ScholarSite/fork)