https://github.com/sarthak-0-sach/html-css-js_portfolio-website
https://github.com/sarthak-0-sach/html-css-js_portfolio-website
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/sarthak-0-sach/html-css-js_portfolio-website
- Owner: SartHak-0-Sach
- Created: 2023-06-08T17:35:38.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-11T12:50:18.000Z (9 months ago)
- Last Synced: 2025-01-25T00:27:36.083Z (9 months ago)
- Language: HTML
- Homepage: https://freelance-site-portfolio.netlify.app/
- Size: 4.71 MB
- Stars: 15
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# HTML CSS JS Portfolio Website 🌐💼
## Welcome! 👋
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Key Features](#features)
- [File Structure](#file-structure)
- [Technologies Used](#technologies-used)
- [Setup Instructions](#setup-instructions)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Usage](#usage)
- [Future Improvements](#future-improvements)
- [Useful Resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
The **HTML-CSS-JS Portfolio Website** is a personal portfolio built using **HTML**, **CSS**, and **JavaScript**. This static website serves as a professional online presence, showcasing projects, skills, and contact information in a clean, user-friendly interface. The website is responsive and works well across both desktop and mobile devices. The goal of this project is to provide a simple and effective way to present your work to potential clients, employers, or collaborators.
### The challenge
The challenge of this project was to build a personal portfolio website with the following objectives:
- Create a **responsive** design that works across different screen sizes.
- Showcase my **skills**, **projects**, and **contact details** in an interactive manner.
- Implement **smooth scrolling** for better navigation.
- Use **JavaScript** to add interactivity, like form validation and dynamic project modals.
### Features
- **Responsive Design:** The website adapts seamlessly across devices (desktops, tablets, and mobile phones).
- **About Me Section:** Includes a brief introduction, skills, and professional background.
- **Portfolio Projects Section:** Highlights my key projects with descriptions and links to their respective GitHub repositories or live demos.
- **Contact Form:** Allows visitors to send me messages directly through the website.
- **Smooth Scrolling:** Implemented smooth scrolling for a polished navigation experience.
- **Animations:** Subtle animations to make the page more engaging and interactive.
- **Dark Mode (optional):** A simple toggle for switching between light and dark modes.
### File Structure
```
/root-directory
|-- assets/ # Images, icons, and other media files
|-- css/ # CSS files for styling
| |-- style.css # Main stylesheet for the website
|-- js/ # JavaScript files
| |-- script.js # Custom JavaScript functionality (form validation, modals, etc.)
|-- index.html # The main HTML file for the portfolio website
|-- README.md # Project description and instructions
```
### Technologies Used
- **HTML** for the website structure and content.
- **CSS** for styling, including Flexbox and Grid for layout management.
- **JavaScript** for adding interactivity, such as form validation, modal functionality, and smooth scrolling.
- **Google Fonts** for typography.
- **Font Awesome** (optional) for icons.
## Setup Instructions
### Prerequisites
- Basic understanding of **HTML**, **CSS**, and **JavaScript**.
- A modern web browser (e.g., Google Chrome, Firefox) to view the website.
- A code editor (e.g., Visual Studio Code) for customizing the website.
### Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/html-css-js-portfolio-website.git
```
2. Navigate to the project directory:
```bash
cd html-css-js-portfolio-website
```
3. Open the `index.html` file in your browser to view the website:
```bash
open index.html # or just double-click on it in your file explorer
```
### Usage
1. **Customize Content:** Edit the `index.html` file to update the text, links, and project details with your personal information.
2. **Add Projects:** Add more projects in the **Portfolio Projects** section by copying the project container structure within the HTML file.
3. **Update Skills:** Update the skills section in the `about me` section to reflect your technical expertise.
4. **Contact Form:** You can connect the contact form to a backend service or an email API for sending messages.
### Future Improvements
- **Backend Integration:** Add server-side functionality to handle form submissions.
- **Portfolio Filters:** Allow users to filter portfolio projects by category (e.g., Web Development, UI/UX Design, etc.).
- **Animations and Transitions:** Use CSS animations or libraries like **AOS** to add more dynamic effects to the website.
- **SEO Optimization:** Enhance the SEO to ensure better visibility on search engines.
- **Content Management System (CMS):** Add a lightweight CMS to make it easy to update content without editing code directly.
### Useful resources
- [HTML Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML) - Comprehensive guide to HTML elements and structure.
- [CSS Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS) - Learn how to style websites effectively with CSS.
- [JavaScript Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript) - Learn how to make your website interactive with JavaScript.
- [Font Awesome](https://fontawesome.com/) - A library of icons you can use for your website.
## Author
Sarthak Sachdev
- Website - [Sarthak Sachdev](https://itsmesarthak.netlify.app/)
- LinkedIn - [Sarthak Sachdev](https://www.linkedin.com/in/sarthak2004/)
- Twitter - [@sarthak_sach69](https://www.twitter.com/sarthak_sach69)
## Acknowledgments
Thanks to all the online resources and tutorials that helped me learn and implement best practices in building this portfolio. A special thanks to the community-driven open-source projects, like **Font Awesome** and **Google Fonts**, for offering amazing free resources.
## Got feedback for me?
Feel free to reach out via email at saarsaach30[at]gmail[dot]com with any feedback or suggestions!
## Contributing
Contributions are welcome! Fork the repository, make changes, and submit a pull request.
## License📃
This project is licensed under the MIT License.
Copyright (c) 2024, Sarthak Sachdev
**Happy coding!** 😊🚀