├── README.md
├── assets
├── 1-tip_calculator.jpg
├── 2-todo.jpg
├── 3-melodify.jpeg
├── 4-chat_app.jpg
├── 5-netflix.jpg
├── 6-ott.png
├── Sarthak.png
└── favicon.jpeg
├── favicon.jpeg
├── icons
├── app-development1.png
├── coding1.png
├── design1.png
└── social-media1.png
├── img
├── about.jpg
├── blog
│ ├── 1.jpg
│ ├── 2.jpg
│ ├── 3.jpg
│ ├── 4.jpg
│ ├── 5.jpg
│ └── 6.jpg
├── portfolio
│ ├── 1.jpg
│ ├── 2.jpg
│ ├── 3.jpg
│ ├── 4.jpg
│ ├── 5.jpg
│ └── 6.jpg
└── support.png
├── index.html
├── script.js
├── style.css
└── svg.txt
/README.md:
--------------------------------------------------------------------------------
1 | # HTML CSS JS Portfolio Website 🌐💼
2 |
3 | ## Welcome! 👋
4 |
5 | ## Table of contents
6 |
7 | - [Overview](#overview)
8 | - [The challenge](#the-challenge)
9 | - [Key Features](#features)
10 | - [File Structure](#file-structure)
11 | - [Technologies Used](#technologies-used)
12 | - [Setup Instructions](#setup-instructions)
13 | - [Prerequisites](#prerequisites)
14 | - [Installation](#installation)
15 | - [Usage](#usage)
16 | - [Future Improvements](#future-improvements)
17 | - [Useful Resources](#useful-resources)
18 | - [Author](#author)
19 | - [Acknowledgments](#acknowledgments)
20 |
21 | ## Overview
22 | 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.
23 |
24 | ### The challenge
25 | The challenge of this project was to build a personal portfolio website with the following objectives:
26 | - Create a **responsive** design that works across different screen sizes.
27 | - Showcase my **skills**, **projects**, and **contact details** in an interactive manner.
28 | - Implement **smooth scrolling** for better navigation.
29 | - Use **JavaScript** to add interactivity, like form validation and dynamic project modals.
30 |
31 | ### Features
32 | - **Responsive Design:** The website adapts seamlessly across devices (desktops, tablets, and mobile phones).
33 | - **About Me Section:** Includes a brief introduction, skills, and professional background.
34 | - **Portfolio Projects Section:** Highlights my key projects with descriptions and links to their respective GitHub repositories or live demos.
35 | - **Contact Form:** Allows visitors to send me messages directly through the website.
36 | - **Smooth Scrolling:** Implemented smooth scrolling for a polished navigation experience.
37 | - **Animations:** Subtle animations to make the page more engaging and interactive.
38 | - **Dark Mode (optional):** A simple toggle for switching between light and dark modes.
39 |
40 | ### File Structure
41 | ```
42 | /root-directory
43 | |-- assets/ # Images, icons, and other media files
44 | |-- css/ # CSS files for styling
45 | | |-- style.css # Main stylesheet for the website
46 | |-- js/ # JavaScript files
47 | | |-- script.js # Custom JavaScript functionality (form validation, modals, etc.)
48 | |-- index.html # The main HTML file for the portfolio website
49 | |-- README.md # Project description and instructions
50 | ```
51 |
52 | ### Technologies Used
53 | - **HTML** for the website structure and content.
54 | - **CSS** for styling, including Flexbox and Grid for layout management.
55 | - **JavaScript** for adding interactivity, such as form validation, modal functionality, and smooth scrolling.
56 | - **Google Fonts** for typography.
57 | - **Font Awesome** (optional) for icons.
58 |
59 | ## Setup Instructions
60 |
61 | ### Prerequisites
62 | - Basic understanding of **HTML**, **CSS**, and **JavaScript**.
63 | - A modern web browser (e.g., Google Chrome, Firefox) to view the website.
64 | - A code editor (e.g., Visual Studio Code) for customizing the website.
65 |
66 | ### Installation
67 |
68 | 1. Clone the repository:
69 | ```bash
70 | git clone https://github.com/yourusername/html-css-js-portfolio-website.git
71 | ```
72 | 2. Navigate to the project directory:
73 | ```bash
74 | cd html-css-js-portfolio-website
75 | ```
76 | 3. Open the `index.html` file in your browser to view the website:
77 | ```bash
78 | open index.html # or just double-click on it in your file explorer
79 | ```
80 |
81 | ### Usage
82 | 1. **Customize Content:** Edit the `index.html` file to update the text, links, and project details with your personal information.
83 | 2. **Add Projects:** Add more projects in the **Portfolio Projects** section by copying the project container structure within the HTML file.
84 | 3. **Update Skills:** Update the skills section in the `about me` section to reflect your technical expertise.
85 | 4. **Contact Form:** You can connect the contact form to a backend service or an email API for sending messages.
86 |
87 | ### Future Improvements
88 | - **Backend Integration:** Add server-side functionality to handle form submissions.
89 | - **Portfolio Filters:** Allow users to filter portfolio projects by category (e.g., Web Development, UI/UX Design, etc.).
90 | - **Animations and Transitions:** Use CSS animations or libraries like **AOS** to add more dynamic effects to the website.
91 | - **SEO Optimization:** Enhance the SEO to ensure better visibility on search engines.
92 | - **Content Management System (CMS):** Add a lightweight CMS to make it easy to update content without editing code directly.
93 |
94 | ### Useful resources
95 |
96 | - [HTML Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML) - Comprehensive guide to HTML elements and structure.
97 | - [CSS Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS) - Learn how to style websites effectively with CSS.
98 | - [JavaScript Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript) - Learn how to make your website interactive with JavaScript.
99 | - [Font Awesome](https://fontawesome.com/) - A library of icons you can use for your website.
100 |
101 | ## Author
102 |
103 | Sarthak Sachdev
104 | - Website - [Sarthak Sachdev](https://itsmesarthak.netlify.app/)
105 | - LinkedIn - [Sarthak Sachdev](https://www.linkedin.com/in/sarthak2004/)
106 | - Twitter - [@sarthak_sach69](https://www.twitter.com/sarthak_sach69)
107 |
108 | ## Acknowledgments
109 |
110 | 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.
111 |
112 | ## Got feedback for me?
113 |
114 | Feel free to reach out via email at saarsaach30[at]gmail[dot]com with any feedback or suggestions!
115 |
116 | ## Contributing
117 | Contributions are welcome! Fork the repository, make changes, and submit a pull request.
118 |
119 | ## License📃
120 | This project is licensed under the MIT License.
121 |
122 | Copyright (c) 2024, Sarthak Sachdev
123 |
124 | **Happy coding!** 😊🚀
125 |
--------------------------------------------------------------------------------
/assets/1-tip_calculator.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/assets/1-tip_calculator.jpg
--------------------------------------------------------------------------------
/assets/2-todo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/assets/2-todo.jpg
--------------------------------------------------------------------------------
/assets/3-melodify.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/assets/3-melodify.jpeg
--------------------------------------------------------------------------------
/assets/4-chat_app.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/assets/4-chat_app.jpg
--------------------------------------------------------------------------------
/assets/5-netflix.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/assets/5-netflix.jpg
--------------------------------------------------------------------------------
/assets/6-ott.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/assets/6-ott.png
--------------------------------------------------------------------------------
/assets/Sarthak.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/assets/Sarthak.png
--------------------------------------------------------------------------------
/assets/favicon.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/assets/favicon.jpeg
--------------------------------------------------------------------------------
/favicon.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/favicon.jpeg
--------------------------------------------------------------------------------
/icons/app-development1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/icons/app-development1.png
--------------------------------------------------------------------------------
/icons/coding1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/icons/coding1.png
--------------------------------------------------------------------------------
/icons/design1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/icons/design1.png
--------------------------------------------------------------------------------
/icons/social-media1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/icons/social-media1.png
--------------------------------------------------------------------------------
/img/about.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/img/about.jpg
--------------------------------------------------------------------------------
/img/blog/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/img/blog/1.jpg
--------------------------------------------------------------------------------
/img/blog/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/img/blog/2.jpg
--------------------------------------------------------------------------------
/img/blog/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/img/blog/3.jpg
--------------------------------------------------------------------------------
/img/blog/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/img/blog/4.jpg
--------------------------------------------------------------------------------
/img/blog/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/img/blog/5.jpg
--------------------------------------------------------------------------------
/img/blog/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/img/blog/6.jpg
--------------------------------------------------------------------------------
/img/portfolio/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/img/portfolio/1.jpg
--------------------------------------------------------------------------------
/img/portfolio/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/img/portfolio/2.jpg
--------------------------------------------------------------------------------
/img/portfolio/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/img/portfolio/3.jpg
--------------------------------------------------------------------------------
/img/portfolio/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/img/portfolio/4.jpg
--------------------------------------------------------------------------------
/img/portfolio/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/img/portfolio/5.jpg
--------------------------------------------------------------------------------
/img/portfolio/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/img/portfolio/6.jpg
--------------------------------------------------------------------------------
/img/support.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SartHak-0-Sach/HTML-CSS-JS_portfolio-website/b752e29139bc48417b47af093399b5955846d82b/img/support.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
I'm Sarthak Sachdev, a Full Stack Developer, Educator and a blogger. Currently a third-year student at Delhi Technological University, I thrive on challenging opportunities and continuous learning. Let's connect and collaborate!
I have a good command over variety of concepts in Data Structures and Algorithms using which I can solve bugs or implement solutions in programming language of your choice!!
Being well versed with variety of concepts in UI/UX principles and technologies, I can design as well as implement your website's interface to optimize user experience to the fullest!!
Making backend from scratch, connecting with database or fixing bugs, you name it and I can do it, just give me the command and I'll try my best to give you a satisfied service!!