├── 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 | 5 | 6 | 7 | Sarthak Sachdev Portfolio website 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 | 21 | 29 |
30 | Let's chat 31 |
32 |
33 |
34 |
35 |
36 | 37 |
38 |
39 |

Welcome To my World

40 |

Hi I'm Sarthak

41 | 42 |
43 |

Full stack Developer

44 |
45 | 46 |

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!

47 | 48 |
49 | Hire Me Now ! 50 | Download CV 51 |
52 | 53 | 74 |
75 |
76 | profile pic 77 |
78 |
79 |

I'm Blogger and I'm Web Developer and I'm a Designer and

80 |
81 | 82 |
83 |
84 |
85 | 86 |
87 |
88 | 89 |
90 |
91 |
92 |
93 |

About Me

94 |

Software Developer

95 |

Good at problem solving by implementing DSA and Web Development using variety of stacks

96 |
97 | 98 | 99 | 100 |
101 |
102 |
103 |
104 |

Data Structures and Algorithms

105 | Execute and design algorithms and implement data structures 106 |
107 |
108 |

Frontend development

109 | Delight the user and make it work. 110 |
111 |
112 |

Backend development

113 | Manage backend, database, hosting and deployment 114 |
115 |
116 | 117 |
118 |
119 |

Two times consecutive finalist in LHMC hackathon

120 | Worked with medical experts for product design and web dev 121 |
122 |
123 |

Gold medalist on CodeChef

124 | Solved more than 500 problems to recieve it. 125 |
126 |
127 |

5 star rated on HackerRank

128 | Exhibited quick and accurate problem solving skills in C++ 129 |
130 |
131 | 132 | 133 |
134 |
135 |

Coding Ninjas Data Structures mastery course

136 | Earned distinction certificate for recieving more than 90% marks 137 |
138 |
139 |

React Native developer intern at Maruti Suzuki

140 | Working as an intern in June-July 2024 141 |
142 |
143 |

Bachelor's Degree in Mechanical Engineering

144 | Will be earning my B.Tech degree in 2025 145 |
146 |
147 |
148 |
149 | Download CV 150 |
151 |
152 |
153 | 154 |
155 |
156 |

Projects

157 | Some of my latest work 158 |
159 | 160 |
161 |
162 |
163 |
164 | project 165 |
166 |
167 |

Tip Calculator App

168 | Jan 2024 169 |

170 | A tip calculator app for restuarants's and bars's employees for better convinience. 171 |

172 | Explore More 173 |
174 |
175 | 176 |
177 |
178 | project 179 |
180 |
181 |

Responsive TODO app

182 | Feb 2024 183 |

184 | A todo app for students and working professionals to never miss out on important events 185 |

186 | Explore More 187 |
188 |
189 | 190 |
191 |
192 | project 193 |
194 |
195 |

Melodify

196 | Oct 2023 197 |

198 | An interactive, easy to use and modern music streaming platform customised according to user. 199 |

200 | Explore More 201 |
202 |
203 | 204 |
205 |
206 | project 207 |
208 |
209 |

Chat App illustration

210 | April 2024 211 |

212 | An illustration of an ad of chat app made using HTML CSS Vanilla JS. 213 |

214 | Explore More 215 |
216 |
217 | 218 |
219 |
220 | project 221 |
222 |
223 |

Netflix UI clone

224 | May 2024 225 |

226 | Frontend clone of famous video streaming website Netflix with code available for free using MERN stack. 227 |

228 | Explore More 229 |
230 |
231 | 232 |
233 |
234 | project 235 |
236 |
237 |

SurgiPlan PRO - India's first operation time table website

238 | July 2023 239 |

240 | Website to generate time table for operation according to priority decided by hospital. 241 |

242 | Explore More 243 |
244 |
245 | 246 |
247 |
248 | 249 |
250 | 251 |
252 |
253 | 254 |
255 | 256 |
257 |
258 |

My Services

259 | What I will do for you 260 |
261 | 262 |
263 |
264 |
265 | 266 | 267 |
268 |

Frontend Development

269 |

Just like this portfolio website, I can make customised web apps and websites according to user's convinience and demands in variety of tech stacks!!

270 | My past work 271 |
272 | 273 |
274 |
275 | 276 | 277 |
278 |

Problem Solving

279 |

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!!

280 | Code Profile 281 |
282 | 283 |
284 |
285 | 286 | 287 |
288 |

UI / UX Design

289 |

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!!

290 | Project Designs 291 |
292 | 293 |
294 |
295 | 296 | 297 |
298 |

Backend Development

299 |

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!!

300 | Past projects 301 |
302 |
303 | 304 |
305 |
306 | Get It Touch 307 |

Have a Project On Your Mind

308 | Contact Me 309 |
310 | contact-us 311 |
312 | 313 |
314 |
315 |
316 | 317 |
318 |
319 |

My Services

320 | what i will do for you 321 |
322 |
323 | 324 | 325 | 326 | 327 |
328 | 329 |
330 |
331 |
332 |

UI/UX Design

333 |

Design and implement layout and landing page of websites.

334 | Explore More 335 |
336 |
337 | web-icon 338 |
339 |
340 | 341 |
342 |
343 |

DSA

344 |

Implement Data Structures and design Algorithms to solve real world problems

345 | Explore More 346 |
347 |
348 | web-icon 349 |
350 |
351 | 352 |
353 |
354 |

Frontend Web Development

355 |

Can code frontend of a website from scratch in codestack on your choice.

356 | Explore More 357 |
358 |
359 | web-icon 360 |
361 |
362 | 363 | 364 |
365 |
366 |

Backend Web Development

367 |

Make backend and database of your web-service from scratch along with many other features.

368 | Explore More 369 |
370 |
371 | web-icon 372 |
373 |
374 | 375 |
376 |
377 |

Graphics Design

378 |

Well versed with photoshop and illustrator to make custom graphics for you.

379 | Explore More 380 |
381 |
382 | web-icon 383 |
384 |
385 | 386 |
387 |
388 |

Event management

389 |

Experienced in generating leads, hosting events and improve social media handles.

390 | Explore More 391 |
392 |
393 | web-icon 394 |
395 |
396 |
397 | 398 |
399 | 400 |
401 |
402 |
403 |
404 |

Contact Me

405 | get in touch with me 406 |
407 |
408 |
409 | 410 | 411 |
412 | 413 | 414 | 416 |
417 | 418 |
419 |
420 |
421 |
422 |
423 |
424 |
425 |

My Skills

426 | Let Me Help you 427 |
428 |
429 |
430 |
431 |
432 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 |

443 | 0% 444 |

445 |
446 |
447 |
448 | DSA 449 |
450 |
451 | 452 |
453 |
454 |
455 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 |

466 | 0% 467 |

468 |
469 |
470 |
471 | Frontend 472 |
473 |
474 | 475 | 476 |
477 |
478 |
479 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 |

490 | 0% 491 |

492 |
493 |
494 |
495 | Backend 496 |
497 |
498 | 499 | 500 |
501 |
502 |
503 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 |

514 | 0% 515 |

516 |
517 |
518 |
519 | UI/UX Design 520 |
521 |
522 |
523 |
524 |
525 |
526 |
527 |
528 | 529 | 532 | 533 |
534 | 535 | 536 | 537 |
538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // active hamburger menu 2 | let menuIcon = document.querySelector(".menu-icon"); 3 | let navlist = document.querySelector(".navlist") 4 | menuIcon.addEventListener("click", () => { 5 | menuIcon.classList.toggle("active"); 6 | navlist.classList.toggle("active"); 7 | document.body.classList.toggle("open"); 8 | }); 9 | 10 | // remove navlist 11 | navlist.addEventListener("click", () => { 12 | navlist.classList.remove("active"); 13 | menuIcon.classList.remove("active"); 14 | document.body.classList.remove("open"); 15 | }) 16 | 17 | 18 | 19 | // rotate text js code 20 | let text = document.querySelector(".text p"); 21 | 22 | text.innerHTML = text.innerHTML.split("").map((char, i) => 23 | `${char}` 24 | ).join(""); 25 | 26 | 27 | // switch between about buttons 28 | 29 | const buttons = document.querySelectorAll('.about-btn button'); 30 | const contents = document.querySelectorAll('.content'); 31 | 32 | buttons.forEach((button, index) => { 33 | button.addEventListener('click', () => { 34 | contents.forEach(content => content.style.display = 'none'); 35 | contents[index].style.display = 'block'; 36 | buttons.forEach(btn => btn.classList.remove('active')); 37 | button.classList.add('active'); 38 | }); 39 | }); 40 | 41 | 42 | 43 | // portfolio fillter 44 | 45 | var mixer = mixitup('.portfolio-gallery', { 46 | selectors: { 47 | target: '.portfolio-box' 48 | }, 49 | animation: { 50 | duration: 500 51 | } 52 | }); 53 | 54 | 55 | // Initialize swiperjs 56 | 57 | var swiper = new Swiper(".mySwiper", { 58 | slidesPerView: 1, 59 | spaceBetween: 30, 60 | pagination: { 61 | el: ".swiper-pagination", 62 | clickable: true, 63 | }, 64 | autoplay: { 65 | delay: 3000, 66 | disableOnInteraction: false, 67 | }, 68 | 69 | breakpoints: { 70 | 576: { 71 | slidesPerView: 2, 72 | spaceBetween: 10, 73 | }, 74 | 1200: { 75 | slidesPerView: 3, 76 | spaceBetween: 20, 77 | }, 78 | } 79 | }); 80 | 81 | 82 | 83 | // skill Progress bar 84 | 85 | const first_skill = document.querySelector(".skill:first-child"); 86 | const sk_counters = document.querySelectorAll(".counter span"); 87 | const progress_bars = document.querySelectorAll(".skills svg circle"); 88 | 89 | window.addEventListener("scroll", () => { 90 | if (!skillsPlayed) 91 | skillsCounter(); 92 | }) 93 | 94 | 95 | function hasReached(el) { 96 | let topPosition = el.getBoundingClientRect().top; 97 | if (window.innerHeight >= topPosition + el.offsetHeight) return true; 98 | return false; 99 | } 100 | 101 | function updateCount(num, maxNum) { 102 | let currentNum = +num.innerText; 103 | 104 | if (currentNum < maxNum) { 105 | num.innerText = currentNum + 1; 106 | setTimeout(() => { 107 | updateCount(num, maxNum) 108 | }, 12) 109 | } 110 | } 111 | 112 | 113 | let skillsPlayed = false; 114 | 115 | function skillsCounter() { 116 | if (!hasReached(first_skill)) return; 117 | skillsPlayed = true; 118 | sk_counters.forEach((counter, i) => { 119 | let target = +counter.dataset.target; 120 | let strokeValue = 465 - 465 * (target / 100); 121 | 122 | progress_bars[i].style.setProperty("--target", strokeValue); 123 | 124 | setTimeout(() => { 125 | updateCount(counter, target); 126 | }, 400) 127 | }); 128 | 129 | progress_bars.forEach(p => p.style.animation = "progress 2s ease-in-out forwards"); 130 | } 131 | 132 | 133 | // side progress bar 134 | 135 | let calcScrollValue = () => { 136 | let scrollProgress = document.getElementById("progress"); 137 | let pos = document.documentElement.scrollTop; 138 | 139 | let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; 140 | let scrollValue = Math.round((pos * 100) / calcHeight); 141 | 142 | if (pos > 100) { 143 | scrollProgress.style.display = "grid"; 144 | } else { 145 | scrollProgress.style.display = "none"; 146 | } 147 | 148 | scrollProgress.addEventListener("click", () => { 149 | document.documentElement.scrollTop = 0; 150 | }); 151 | 152 | scrollProgress.style.background = `conic-gradient(#fff ${scrollValue}%,#e6006d ${scrollValue}%)`; 153 | }; 154 | 155 | window.onscroll = calcScrollValue; 156 | window.onload = calcScrollValue; 157 | 158 | 159 | // active menu 160 | 161 | let menuLi = document.querySelectorAll("header ul li a"); 162 | let section = document.querySelectorAll('section'); 163 | 164 | function activeMenu() { 165 | let len = section.length; 166 | while (--len && window.scrollY + 97 < section[len].offsetTop) { } 167 | menuLi.forEach(sec => sec.classList.remove("active")); 168 | menuLi[len].classList.add("active"); 169 | } 170 | activeMenu(); 171 | window.addEventListener("scroll", activeMenu); 172 | 173 | // scroll reveal 174 | 175 | ScrollReveal({ 176 | distance: "90px", 177 | duration: 2000, 178 | delay: 200, 179 | // reset: true , 180 | }); 181 | 182 | 183 | ScrollReveal().reveal('.hero-info,.main-text,.proposal,.heading', { origin: "top" }); 184 | ScrollReveal().reveal('.about-img,.fillter-buttons,.contact-info', { origin: "left" }); 185 | ScrollReveal().reveal('.about-content,.skills', { origin: "right" }); 186 | ScrollReveal().reveal('.allServices,.portfolio-gallery,.blog-box,footer,.img-hero', { origin: "bottom" }); 187 | // Convert square favicon to round using JavaScript 188 | // const favicon = document.querySelector("link[rel='icon']"); 189 | // const roundedFavicon = document.createElement("link"); 190 | // roundedFavicon.rel = "icon"; 191 | // roundedFavicon.type = "image/x-icon"; 192 | // roundedFavicon.href = "favicon.jpg"; 193 | 194 | // favicon.parentNode.insertBefore(roundedFavicon, favicon); 195 | // favicon.parentNode.removeChild(favicon); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap'); 2 | 3 | * { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | list-style: none; 8 | scroll-behavior: smooth; 9 | } 10 | 11 | :root { 12 | --bg-color: #e3edf7; 13 | --gradient-white-bg: linear-gradient(0deg, #fff 0%, #edf4fa 51%, #e5eef7 100%); 14 | --gradient-color-bg: linear-gradient(180deg, rgba(247, 1, 120, 1)0%, 15 | rgba(160, 8, 156, 1)51%, 16 | rgba(99, 13, 178, 1)100%); 17 | --main-color: #e6006d; 18 | --font-color: #90979f; 19 | --hover-box-shadow: rgba(0, 0, 0, 0.19)0px 10px 20px, 20 | rgba(0, 0, 0, 0.23)0px 6px 6px; 21 | --gradient-white-bg2: linear-gradient(98deg, #e5eef7 0%, #fff 100%); 22 | } 23 | 24 | a { 25 | text-decoration: none; 26 | color: #000; 27 | } 28 | 29 | body { 30 | font-family: 'Poppins', sans-serif; 31 | background: var(--bg-color); 32 | overflow-x: hidden; 33 | } 34 | 35 | header { 36 | padding: 15px 8%; 37 | width: 100%; 38 | position: fixed; 39 | top: 0; 40 | left: 0; 41 | display: flex; 42 | align-items: center; 43 | justify-content: space-between; 44 | background: var(--gradient-white-bg); 45 | z-index: 100; 46 | transition: .3s; 47 | } 48 | 49 | header .logo { 50 | font-size: 1.7rem; 51 | font-weight: 700; 52 | } 53 | 54 | span { 55 | background: var(--gradient-color-bg); 56 | -webkit-background-clip: text; 57 | background-clip: text; 58 | color: transparent; 59 | } 60 | 61 | 62 | ul.navlist { 63 | display: flex; 64 | } 65 | 66 | .navlist li { 67 | margin: 0 1rem; 68 | } 69 | 70 | .navlist li a { 71 | display: inline-flex; 72 | font-weight: 600; 73 | } 74 | 75 | .navlist li a:hover, 76 | .navlist li a.active { 77 | background: var(--gradient-color-bg); 78 | -webkit-background-clip: text; 79 | background-clip: text; 80 | color: transparent; 81 | } 82 | 83 | .right-header { 84 | display: flex; 85 | align-items: center; 86 | justify-content: end; 87 | grid-gap: .8rem; 88 | } 89 | 90 | .btn { 91 | background: var(--gradient-color-bg); 92 | color: #fff; 93 | padding: 8px 10px; 94 | border-radius: 5px; 95 | font-weight: 500; 96 | transition: all .3s ease; 97 | } 98 | 99 | .btn:hover, 100 | .btn-box .d-CV:hover { 101 | box-shadow: var(--hover-box-shadow); 102 | } 103 | 104 | .menu-icon { 105 | position: relative; 106 | display: block; 107 | width: 30px; 108 | height: 30px; 109 | cursor: pointer; 110 | /* background: blue; */ 111 | } 112 | 113 | .menu-icon .bar, 114 | .menu-icon::after, 115 | .menu-icon::before { 116 | content: ""; 117 | display: none; 118 | width: 100%; 119 | height: 4px; 120 | border-radius: 3px; 121 | background: #000; 122 | margin: 6px 0; 123 | transition: .4s; 124 | } 125 | 126 | .menu-icon.active::before { 127 | transform: rotate(-45deg) translate(-6px, 6px); 128 | } 129 | 130 | .menu-icon.active::after { 131 | transform: rotate(45deg)translate(-8px, -8px); 132 | } 133 | 134 | .menu-icon.active .bar { 135 | opacity: 0; 136 | } 137 | 138 | 139 | /* ==================== home section css code ============================ */ 140 | section { 141 | padding: 90px; 142 | } 143 | 144 | .home { 145 | min-height: 100vh; 146 | height: 100%; 147 | width: 100%; 148 | display: flex; 149 | grid-template-columns: repeat(2, 1fr); 150 | align-items: center; 151 | grid-gap: 4em; 152 | background: var(--gradient-white-bg2); 153 | } 154 | 155 | .hero-info { 156 | margin-top: 3rem; 157 | } 158 | 159 | .hero-info h3 { 160 | color: var(--font-color); 161 | font-weight: 300; 162 | text-transform: uppercase; 163 | font-size: 1.1rem; 164 | } 165 | 166 | .hero-info h1 { 167 | font-size: 3.5rem; 168 | } 169 | 170 | /* Prevent horizontal scroll */ 171 | body { 172 | overflow-x: hidden; 173 | } 174 | 175 | /* Base Styles for Section */ 176 | section { 177 | padding: 50px 8%; 178 | box-sizing: border-box; 179 | /* Include padding and border in the width and height */ 180 | } 181 | 182 | /* Home Section Styles */ 183 | .home { 184 | min-height: 100vh; 185 | height: 100%; 186 | width: 100%; 187 | display: flex; 188 | align-items: center; 189 | justify-content: space-between; 190 | /* Ensure space between flex items */ 191 | grid-gap: 4em; 192 | background: var(--gradient-white-bg2); 193 | box-sizing: border-box; 194 | /* Include padding and border in the width and height */ 195 | } 196 | 197 | /* Hero Info Styles */ 198 | .hero-info { 199 | flex: 1; 200 | /* Allow the hero info to grow and fill available space */ 201 | margin-top: 3rem; 202 | } 203 | 204 | /* Image Hero Styles */ 205 | .img-hero { 206 | position: relative; 207 | animation: floatImage 4s ease-in-out infinite; 208 | animation-delay: 3s; 209 | flex: 1; 210 | /* Allow the image hero to grow and fill available space */ 211 | display: flex; 212 | justify-content: center; 213 | align-items: center; 214 | } 215 | 216 | .img-hero img { 217 | width: 100%; 218 | /* Ensure the image fits within the container */ 219 | max-width: 400px; 220 | height: auto; 221 | z-index: 10; 222 | opacity: 0; 223 | } 224 | 225 | .text-animate { 226 | width: 21.35rem; 227 | position: relative; 228 | } 229 | 230 | .text-animate h2 { 231 | font-size: 1.8rem; 232 | font-weight: 700; 233 | margin-bottom: 1rem; 234 | color: transparent; 235 | -webkit-text-stroke: 0.1vw #770753; 236 | background: var(--gradient-color-bg); 237 | background-repeat: no-repeat; 238 | -webkit-background-clip: text; 239 | background-clip: text; 240 | background-position: 0 0; 241 | transition: .6s; 242 | letter-spacing: 2px; 243 | animation: moveText 3s linear infinite; 244 | animation-delay: 2s; 245 | } 246 | 247 | .text-animate h2::before { 248 | content: ""; 249 | position: absolute; 250 | top: 7px; 251 | left: -3px; 252 | width: 0; 253 | height: 70%; 254 | border-right: 2px solid var(--main-color); 255 | animation: moveCursorText 3s linear infinite; 256 | animation-delay: 2s; 257 | } 258 | 259 | 260 | .hero-info p { 261 | font-size: .9rem; 262 | color: var(--font-color); 263 | line-height: 1.5rem; 264 | } 265 | 266 | .btn-box { 267 | display: flex; 268 | justify-content: space-between; 269 | width: 320px; 270 | margin-top: 2rem; 271 | margin-bottom: 2rem; 272 | } 273 | 274 | .btn-box .btn { 275 | padding: 10px; 276 | display: flex; 277 | align-items: center; 278 | justify-content: space-between; 279 | gap: 8px; 280 | } 281 | 282 | .btn-box .d-CV { 283 | background: var(--gradient-white-bg2); 284 | padding: 10px; 285 | border-radius: 5px; 286 | font-weight: 500; 287 | color: #000; 288 | box-shadow: rgba(60, 64, 67, 0.3)0px 1px 2px 0, 289 | rgba(60, 64, 67, 0.15)0px 2px 6px 2px; 290 | transition: all .3s ease; 291 | } 292 | 293 | .social-media { 294 | display: flex; 295 | justify-content: space-between; 296 | width: 220px; 297 | height: 45px; 298 | } 299 | 300 | .social-media a { 301 | width: 42px; 302 | height: 42px; 303 | font-size: 1.5rem; 304 | color: var(--main-color); 305 | background: #fff; 306 | display: inline-flex; 307 | justify-content: center; 308 | align-items: center; 309 | transition: .4s; 310 | border-radius: 50%; 311 | z-index: 1; 312 | } 313 | 314 | 315 | .social-media a:hover { 316 | background: var(--gradient-color-bg); 317 | color: #fff; 318 | } 319 | 320 | .bg-icon { 321 | position: relative; 322 | display: flex; 323 | justify-content: center; 324 | align-items: center; 325 | } 326 | 327 | .bg-icon span { 328 | position: absolute; 329 | width: 50px; 330 | height: 50px; 331 | background: var(--gradient-color-bg); 332 | border-radius: 50%; 333 | display: flex; 334 | align-items: center; 335 | justify-content: center; 336 | animation: animate 1s linear infinite; 337 | } 338 | 339 | .img-hero { 340 | position: relative; 341 | animation: floatImage 4s ease-in-out infinite; 342 | animation-delay: 3s; 343 | } 344 | 345 | .img-hero img { 346 | position: relative; 347 | width: 400px; 348 | height: auto; 349 | z-index: 10; 350 | opacity: 0; 351 | } 352 | 353 | .rotate-text { 354 | position: absolute; 355 | top: 6%; 356 | left: -53px; 357 | display: flex; 358 | justify-content: center; 359 | align-items: center; 360 | overflow: hidden; 361 | padding: 2rem; 362 | } 363 | 364 | .rotate-text span { 365 | position: relative; 366 | width: 442px; 367 | height: 442px; 368 | background: red; 369 | border: 6px solid #eaeef0; 370 | border-radius: 50%; 371 | z-index: 1; 372 | overflow: hidden; 373 | } 374 | 375 | .rotate-text span::before { 376 | content: ""; 377 | position: absolute; 378 | inset: 20px; 379 | background: #00aaff; 380 | border-radius: 50%; 381 | z-index: 1; 382 | background-image: url("/assets/Sarthak.png"); 383 | background-size: cover; 384 | background-repeat: no-repeat; 385 | } 386 | 387 | .rotate-text span i { 388 | position: absolute; 389 | inset: 0; 390 | background: var(--gradient-color-bg); 391 | filter: blur(5px); 392 | animation: animate 2s linear infinite; 393 | } 394 | 395 | 396 | .rotate-text .text { 397 | position: absolute; 398 | width: 490px; 399 | height: 490px; 400 | background: #f2f6fb; 401 | border-radius: 50%; 402 | box-shadow: 0 1px 6px 5.94px rgba(0, 0, 0, 0.2); 403 | animation: rotateText 30s linear infinite; 404 | } 405 | 406 | .text b { 407 | position: absolute; 408 | transform-origin: 0 247px; 409 | display: block; 410 | top: 0; 411 | left: 50%; 412 | font-size: 0.9rem; 413 | letter-spacing: 2px; 414 | word-spacing: 5px; 415 | } 416 | 417 | 418 | /* ==================== About section css code ============================ */ 419 | .about { 420 | display: flex; 421 | justify-content: space-between; 422 | align-items: center; 423 | gap: 1rem; 424 | } 425 | 426 | .about .about-img { 427 | position: relative; 428 | } 429 | 430 | .about .about-img .aboutHero { 431 | width: 40vw; 432 | height: auto; 433 | } 434 | 435 | .about-img .ring { 436 | position: absolute; 437 | top: 22%; 438 | right: 1%; 439 | } 440 | 441 | .about-img .circle { 442 | position: absolute; 443 | top: 0%; 444 | left: 0%; 445 | } 446 | 447 | 448 | .about-content { 449 | padding: 0; 450 | } 451 | 452 | .about-content h2 { 453 | color: var(--main-color); 454 | } 455 | 456 | .about-content h3 { 457 | font-size: 2.1rem; 458 | line-height: 3rem; 459 | margin: .5rem 0; 460 | } 461 | 462 | .about-content p { 463 | color: var(--font-color); 464 | } 465 | 466 | .text-box p { 467 | font-size: 1.1rem; 468 | font-weight: 500; 469 | } 470 | 471 | .about-btn { 472 | margin: .8rem 0; 473 | } 474 | 475 | .about-btn button, 476 | .cvContent a { 477 | background: var(--gradient-white-bg2); 478 | padding: 10px 20px; 479 | border-radius: 5px; 480 | border: none; 481 | font-size: 1rem; 482 | font-weight: 500; 483 | color: #000; 484 | box-shadow: rgba(60, 64, 67, 0.3)0px 1px 2px 0, 485 | rgba(60, 64, 67, 0.15)0px 2px 6px 2px; 486 | margin-right: .5rem; 487 | cursor: pointer; 488 | transition: all .3s ease; 489 | } 490 | 491 | 492 | .about-btn button.active { 493 | background: var(--gradient-color-bg); 494 | color: #ffff; 495 | } 496 | 497 | .text-box { 498 | margin: .8rem 0; 499 | } 500 | 501 | .content-btn>.content:not(:first-child) { 502 | display: none; 503 | } 504 | 505 | .about-btn button:hover { 506 | box-shadow: var(--hover-box-shadow); 507 | } 508 | 509 | .cvContent { 510 | margin-top: 1.5rem; 511 | } 512 | 513 | /* ==================== Services section css code ============================ */ 514 | .services { 515 | position: relative; 516 | } 517 | 518 | .main-text { 519 | width: 100%; 520 | text-align: center; 521 | margin-bottom: 2rem; 522 | } 523 | 524 | .main-text .heading { 525 | color: var(--main-color); 526 | } 527 | 528 | .main-text span { 529 | color: var(--font-color); 530 | font-weight: 200; 531 | text-transform: uppercase; 532 | } 533 | 534 | .allServices { 535 | display: grid; 536 | grid-template-columns: repeat(auto-fit, minmax(220px, auto)); 537 | align-items: center; 538 | gap: 2rem; 539 | position: relative; 540 | z-index: 1; 541 | } 542 | 543 | .servicesItem { 544 | box-shadow: rgba(0, 0, 0, 0.1)0px 1px 3px 0, 545 | rgba(0, 0, 0, 0.06)0px 1px 2px 0px; 546 | padding: 2rem 1rem; 547 | border-radius: 10px; 548 | background: var(--gradient-white-bg2); 549 | text-align: center; 550 | } 551 | 552 | .icon-services { 553 | display: inline-flex; 554 | position: relative; 555 | } 556 | 557 | .icon-services i { 558 | box-shadow: rgba(0, 0, 0, 0.1)0px 1px 3px 0, 559 | rgba(0, 0, 0, 0.06)0px 1px 2px 0px; 560 | padding: .5rem; 561 | border-radius: 50%; 562 | background: var(--gradient-color-bg); 563 | width: 70px; 564 | height: 70px; 565 | color: #fff; 566 | font-size: 2.5rem; 567 | display: inline-flex; 568 | justify-content: center; 569 | align-items: center; 570 | transition: .4s; 571 | z-index: 1; 572 | } 573 | 574 | .servicesItem:hover i { 575 | outline: 1px solid var(--main-color); 576 | transform: scale(1.2); 577 | } 578 | 579 | .icon-services span { 580 | position: absolute; 581 | width: 80px; 582 | height: 80px; 583 | left: -5px; 584 | top: -5px; 585 | background: var(--gradient-color-bg); 586 | border-radius: 50%; 587 | animation: animate 1s linear infinite; 588 | } 589 | 590 | .servicesItem h3 { 591 | margin: 1rem 0 0.5rem; 592 | } 593 | 594 | .servicesItem p { 595 | margin-bottom: 1.5rem; 596 | font-size: .9rem; 597 | color: var(--font-color); 598 | } 599 | 600 | .readMore { 601 | background: var(--gradient-white-bg2); 602 | box-shadow: rgba(0, 0, 0, 0.1)0px 1px 3px 0, 603 | rgba(0, 0, 0, 0.06)0px 1px 2px 0px; 604 | padding: 10px 20px; 605 | border-radius: 5px; 606 | font-size: 1rem; 607 | font-weight: 500; 608 | color: #000; 609 | margin-right: .8rem; 610 | cursor: pointer; 611 | } 612 | 613 | .proposal { 614 | position: relative; 615 | display: flex; 616 | justify-content: space-between; 617 | align-items: center; 618 | width: 100%; 619 | background: var(--gradient-white-bg2); 620 | box-shadow: rgba(0, 0, 0, 0.1)0px 1px 3px 0, 621 | rgba(0, 0, 0, 0.06)0px 1px 2px 0px; 622 | margin-top: 8rem; 623 | border-radius: 10px; 624 | padding: 0rem 2rem; 625 | z-index: 1; 626 | } 627 | 628 | .proposal img { 629 | width: 40vw; 630 | height: auto; 631 | margin: -4rem 0 0; 632 | z-index: 2; 633 | } 634 | 635 | .services .text-box span { 636 | font-size: 1.2rem; 637 | font-weight: 600; 638 | } 639 | 640 | .services .text-box h3 { 641 | margin-top: 1rem; 642 | margin-bottom: 2rem; 643 | font-size: 2.3rem; 644 | font-weight: 800; 645 | } 646 | 647 | .services .text-box .btn { 648 | padding: 10px 20px; 649 | } 650 | 651 | 652 | .services .showcase .ring { 653 | width: 100px; 654 | height: auto; 655 | position: absolute; 656 | top: 2%; 657 | left: -3%; 658 | } 659 | 660 | .services .showcase .circle { 661 | position: absolute; 662 | width: 70px; 663 | height: auto; 664 | top: 2%; 665 | right: 6%; 666 | filter: blur(3px); 667 | } 668 | 669 | .services .showcase .circle2 { 670 | position: absolute; 671 | width: 40px; 672 | height: auto; 673 | filter: blur(3px); 674 | } 675 | 676 | .services .showcase .circle3 { 677 | position: absolute; 678 | width: 70px; 679 | height: auto; 680 | filter: blur(3px); 681 | bottom: 36%; 682 | left: 22%; 683 | } 684 | 685 | .services .showcase { 686 | position: absolute; 687 | width: 120px; 688 | height: auto; 689 | bottom: 4%; 690 | right: 6%; 691 | } 692 | 693 | 694 | /* ==================== Services section css code ============================ */ 695 | .fillter-buttons { 696 | text-align: center; 697 | padding: .5rem; 698 | margin-bottom: 2rem; 699 | } 700 | 701 | .fillter-buttons button { 702 | background: var(--gradient-white-bg2); 703 | padding: 12px 15px; 704 | border-radius: 5px; 705 | border: none; 706 | font-weight: 500; 707 | color: #000; 708 | box-shadow: rgba(60, 64, 67, 0.3)0px 1px 2px 0, 709 | rgba(60, 64, 67, 0.15)0px 2px 6px 2px; 710 | margin-right: .5rem; 711 | cursor: pointer; 712 | transition: all .3s ease; 713 | } 714 | 715 | .fillter-buttons button:hover, 716 | button.mixitup-control-active { 717 | background: var(--gradient-color-bg); 718 | color: #fff; 719 | } 720 | 721 | .portfolio-gallery { 722 | display: grid; 723 | grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); 724 | gap: 1rem; 725 | } 726 | 727 | .portfolio-img img { 728 | display: block; 729 | width: 100%; 730 | height: 160px; 731 | transition: .3s; 732 | } 733 | 734 | .portfolio-box { 735 | display: flex; 736 | justify-content: space-between; 737 | align-items: center; 738 | gap: .5rem; 739 | padding: .5rem; 740 | box-shadow: rgba(0, 0, 0, 0.18)0px 2px 4px; 741 | background: var(--gradient-white-bg2); 742 | border-radius: 10px; 743 | transition: all .3s ease; 744 | } 745 | 746 | .portfolio-content { 747 | width: 100%; 748 | padding-left: .5rem; 749 | padding-bottom: .5rem; 750 | } 751 | 752 | .portfolio-img { 753 | width: 100%; 754 | border-radius: 5px; 755 | overflow: hidden; 756 | } 757 | 758 | .portfolio-box:hover img { 759 | transform: scale(1.1); 760 | } 761 | 762 | .portfolio-content a.readMore { 763 | padding: 8px 12px; 764 | font-size: .8rem; 765 | } 766 | 767 | .portfolio-content p { 768 | font-size: .9rem; 769 | color: var(--font-color); 770 | margin: .5rem 0 1rem 0; 771 | } 772 | 773 | 774 | /* ==================== Blog section css code ============================ */ 775 | 776 | .blog-box { 777 | padding: .5rem !important; 778 | } 779 | 780 | .blog { 781 | position: relative; 782 | overflow: hidden; 783 | } 784 | 785 | .cards { 786 | padding: 1rem .1rem; 787 | } 788 | 789 | .card { 790 | background: var(--gradient-white-bg2); 791 | box-shadow: rgba(0, 0, 0, 0.18)0px 2px 4px; 792 | padding: 1rem; 793 | border-radius: 10px; 794 | } 795 | 796 | .card-top { 797 | overflow: hidden; 798 | border-radius: 10px 10px 0 0; 799 | } 800 | 801 | .card img { 802 | width: 100%; 803 | height: 100%; 804 | object-fit: contain; 805 | object-position: center; 806 | height: 250px; 807 | transition: .3s; 808 | display: block; 809 | } 810 | 811 | .card:hover img { 812 | transform: scale(1.1); 813 | } 814 | 815 | .card-info { 816 | padding-bottom: .5rem; 817 | } 818 | 819 | .card-info h2 { 820 | font-size: 1.2rem; 821 | margin-top: 1rem; 822 | } 823 | 824 | .data { 825 | display: block; 826 | margin: .2rem 0; 827 | } 828 | 829 | .card .excerpt { 830 | color: var(--font-color); 831 | margin-bottom: 1.5rem; 832 | } 833 | 834 | .swiper-pagination { 835 | position: relative !important; 836 | margin-top: 3rem; 837 | } 838 | 839 | .swiper-pagination-bullet { 840 | height: 10px !important; 841 | width: 30px !important; 842 | border-radius: 25px !important; 843 | background: var(--gradient-color-bg) !important; 844 | } 845 | 846 | .blog .showcase img { 847 | position: absolute; 848 | width: 90px; 849 | height: 90px; 850 | } 851 | 852 | .blog .showcase .circle { 853 | filter: blur(3px); 854 | } 855 | 856 | .blog .showcase .ring { 857 | top: 0; 858 | left: -1%; 859 | } 860 | 861 | .blog .showcase { 862 | top: 10%; 863 | right: 10%; 864 | } 865 | 866 | .blog .showcase .second-circle { 867 | top: 30%; 868 | left: 2%; 869 | filter: blur(1px); 870 | } 871 | 872 | 873 | /* ==================== Contact section css code ============================ */ 874 | 875 | .contactSkills { 876 | display: flex; 877 | justify-content: space-between; 878 | gap: 2rem; 879 | } 880 | 881 | .contact-info, 882 | .skills { 883 | width: 100%; 884 | background: var(--gradient-white-bg2); 885 | box-shadow: rgba(0, 0, 0, 0.18)0px 2px 4px; 886 | padding: 1rem; 887 | border-radius: 10px; 888 | } 889 | 890 | 891 | .contact-info input, 892 | .contact-info form textarea { 893 | width: 100%; 894 | } 895 | 896 | .contact-info form input, 897 | .contact-info form textarea { 898 | /* width: 100%; */ 899 | padding: .8rem; 900 | border: 2px solid #e8e1e1; 901 | margin: .5rem 0; 902 | background: #e8f1f9; 903 | border-radius: 5px; 904 | outline: none; 905 | transition: .3s; 906 | } 907 | 908 | .contact-info form .input-box { 909 | display: flex; 910 | justify-content: space-between; 911 | } 912 | 913 | .input-box input { 914 | width: 49%; 915 | } 916 | 917 | form input:focus, 918 | form textarea:focus { 919 | filter: brightness(100%); 920 | background: #d2e9ff; 921 | border: 2px solid #f8caca; 922 | } 923 | 924 | form textarea { 925 | resize: none; 926 | } 927 | 928 | form .btn { 929 | padding: 15px 20px; 930 | cursor: pointer; 931 | border: none; 932 | } 933 | 934 | /* ==================== Skills section css code ============================ */ 935 | 936 | #contact { 937 | padding-bottom: 0; 938 | } 939 | 940 | .skillBox .main-text { 941 | margin-bottom: 1rem; 942 | } 943 | 944 | .skill-wrap { 945 | display: grid; 946 | grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 947 | justify-items: center; 948 | grid-gap: 2.5rem; 949 | } 950 | 951 | 952 | .skill { 953 | display: flex; 954 | flex-direction: column; 955 | align-items: center; 956 | justify-content: center; 957 | } 958 | 959 | .outer-circle { 960 | width: 170px; 961 | height: 170px; 962 | position: relative; 963 | margin-bottom: 1rem; 964 | padding: 20px; 965 | border-radius: 50%; 966 | box-shadow: rgba(50, 50, 93, 0.25)0px 6px 12px -2px, 967 | rgba(0, 0, 0, 0.3)0px 3px 7px -3px; 968 | display: flex; 969 | align-items: center; 970 | justify-content: center; 971 | } 972 | 973 | .inner-circle { 974 | width: 130px; 975 | height: 130px; 976 | border-radius: 50%; 977 | box-shadow: rgba(204, 219, 232)3px 3px 6px 0px inset, 978 | rgba(255, 255, 255, 0.5)-3px -3px 6px 1px inset; 979 | } 980 | 981 | .outer-circle svg { 982 | position: absolute; 983 | top: 0; 984 | left: 0; 985 | width: 100%; 986 | height: 100%; 987 | } 988 | 989 | .outer-circle svg circle { 990 | fill: none; 991 | stroke-width: 15px; 992 | stroke: url(#GradientColor); 993 | stroke-linecap: round; 994 | stroke-dasharray: 465; 995 | stroke-dashoffset: 464; 996 | } 997 | 998 | .outer-circle h2.counter { 999 | position: absolute; 1000 | top: 50%; 1001 | left: 50%; 1002 | transform: translate(-50%, -50%); 1003 | z-index: 1; 1004 | font-size: .9rem; 1005 | font-weight: 400; 1006 | } 1007 | 1008 | h2.counter span { 1009 | font-size: 1.7rem; 1010 | } 1011 | 1012 | .sk-title { 1013 | font-size: 1rem; 1014 | font-weight: 500; 1015 | } 1016 | 1017 | /*======================= footer ============================ */ 1018 | footer { 1019 | text-align: center; 1020 | margin: 0 3%; 1021 | padding: 1rem 0; 1022 | border-top: 2px solid #e8e1e1; 1023 | } 1024 | 1025 | #progress { 1026 | position: fixed; 1027 | /* background-color: #000000; */ 1028 | z-index: 1000; 1029 | bottom: 60px; 1030 | right: 10px; 1031 | width: 50px; 1032 | height: 50px; 1033 | display: none; 1034 | place-items: center; 1035 | border-radius: 50%; 1036 | color: #1d002c; 1037 | cursor: pointer; 1038 | box-shadow: rgba(50, 50, 93, 0.25)0px 50px 100px -20px, 1039 | rgba(0, 0, 0, 0.3)0px 30px 60px -30px, 1040 | rgba(10, 37, 64, 0.35)0px -2px 6px 0px inset; 1041 | } 1042 | 1043 | #progress-value { 1044 | display: grid; 1045 | height: calc(100% - 12px); 1046 | width: calc(100% - 12px); 1047 | background: var(--gradient-color-bg); 1048 | border-radius: 50%; 1049 | color: #fff; 1050 | place-items: center; 1051 | font-size: 25px; 1052 | } 1053 | 1054 | /*======================= @keyframes ============================ */ 1055 | 1056 | @keyframes moveText { 1057 | 1058 | 0%, 1059 | 10%, 1060 | 100% { 1061 | background-position: -24rem 0; 1062 | } 1063 | 1064 | 65%, 1065 | 85% { 1066 | background-position: 0rem 0; 1067 | } 1068 | } 1069 | 1070 | @keyframes moveCursorText { 1071 | 1072 | 0%, 1073 | 10%, 1074 | 100% { 1075 | width: 0; 1076 | } 1077 | 1078 | 65%, 1079 | 78%, 1080 | 85% { 1081 | width: 100%; 1082 | opacity: 1; 1083 | } 1084 | 1085 | 75%, 1086 | 85% { 1087 | opacity: 0; 1088 | } 1089 | } 1090 | 1091 | @keyframes animate { 1092 | 0% { 1093 | transform: rotate(0deg); 1094 | } 1095 | 1096 | 100% { 1097 | transform: rotate(360deg); 1098 | } 1099 | } 1100 | 1101 | @keyframes rotateText { 1102 | 0% { 1103 | transform: rotate(360deg); 1104 | } 1105 | 1106 | 100% { 1107 | transform: rotate(0deg); 1108 | } 1109 | } 1110 | 1111 | @keyframes progress { 1112 | to { 1113 | stroke-dashoffset: var(--target); 1114 | } 1115 | } 1116 | 1117 | @keyframes floatImage { 1118 | 0% { 1119 | transform: translateY(0); 1120 | } 1121 | 1122 | 50% { 1123 | transform: translateY(-22px); 1124 | } 1125 | 1126 | 100% { 1127 | transform: translateY(0); 1128 | } 1129 | } 1130 | 1131 | /*======================= BrakPoints ============================ */ 1132 | 1133 | @media(min-width: 1550px) { 1134 | .rotate-text { 1135 | position: relative; 1136 | left: -24%; 1137 | } 1138 | 1139 | .home { 1140 | max-width: 100%; 1141 | } 1142 | 1143 | .navlist { 1144 | max-width: 90%; 1145 | } 1146 | } 1147 | 1148 | ; 1149 | 1150 | @media(max-width:1200px) { 1151 | html { 1152 | font-size: 95%; 1153 | } 1154 | } 1155 | 1156 | @media(max-width:1100px) { 1157 | 1158 | header, 1159 | section, 1160 | footer { 1161 | padding-left: 3%; 1162 | padding-right: 3%; 1163 | width: 96%; 1164 | } 1165 | 1166 | .home, 1167 | .portfolio-box { 1168 | flex-direction: column-reverse; 1169 | } 1170 | 1171 | .about, 1172 | .contactSkills { 1173 | flex-direction: column; 1174 | } 1175 | 1176 | .about .about-img .aboutHero { 1177 | width: 100%; 1178 | } 1179 | 1180 | .proposal img { 1181 | width: 52vw; 1182 | } 1183 | 1184 | .portfolio-img img { 1185 | width: 100%; 1186 | height: 100%; 1187 | } 1188 | 1189 | .portfolio-gallery { 1190 | grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 1191 | } 1192 | 1193 | .img-hero { 1194 | margin-top: 3rem; 1195 | } 1196 | } 1197 | 1198 | @media(max-width: 981px) { 1199 | .proposal { 1200 | display: none; 1201 | } 1202 | 1203 | .home { 1204 | flex-direction: column-reverse; 1205 | justify-content: space-between; 1206 | } 1207 | 1208 | .hero-info { 1209 | margin-top: 120px; 1210 | } 1211 | 1212 | .btn-box { 1213 | flex-direction: column; 1214 | align-items: flex-start; 1215 | } 1216 | 1217 | .menu-icon .bar, 1218 | .menu-icon::after, 1219 | .menu-icon::before { 1220 | display: block; 1221 | } 1222 | 1223 | ul.navlist { 1224 | position: absolute; 1225 | top: -1000px; 1226 | transition: all .3s ease; 1227 | width: 100%; 1228 | text-align: center; 1229 | display: block; 1230 | background: var(--gradient-white-bg); 1231 | left: 0; 1232 | border-top: 2px solid rgba(248, 202, 202, .7); 1233 | padding: 0; 1234 | margin: 0; 1235 | box-sizing: border-box; 1236 | } 1237 | 1238 | .navlist { 1239 | width: 100%; 1240 | } 1241 | 1242 | ul.navlist a { 1243 | font-size: 1.5rem; 1244 | margin: 1rem 0; 1245 | display: block; 1246 | } 1247 | 1248 | .navlist.active { 1249 | top: 100%; 1250 | } 1251 | 1252 | .overlay { 1253 | width: 100vw; 1254 | height: 100vh; 1255 | top: 0; 1256 | left: 0; 1257 | position: fixed; 1258 | background: rgba(0, 0, 0, 0.5); 1259 | z-index: 8; 1260 | opacity: 0; 1261 | transition: .3s; 1262 | pointer-events: none; 1263 | } 1264 | 1265 | body .open .overlay { 1266 | opacity: 1; 1267 | pointer-events: auto; 1268 | } 1269 | 1270 | .btn { 1271 | padding: 10px; 1272 | } 1273 | 1274 | .home { 1275 | grid-gap: 0; 1276 | } 1277 | 1278 | .fillter-buttons button { 1279 | padding: 10px; 1280 | font-size: .8rem; 1281 | } 1282 | } 1283 | 1284 | * { 1285 | box-sizing: border-box; 1286 | } 1287 | 1288 | body { 1289 | overflow-x: hidden; 1290 | } 1291 | 1292 | 1293 | 1294 | @media(max-width:530px) { 1295 | html { 1296 | font-size: 70%; 1297 | } 1298 | 1299 | .hero-info { 1300 | margin-top: -20px; 1301 | } 1302 | 1303 | .home { 1304 | padding-bottom: 10px; 1305 | } 1306 | 1307 | section { 1308 | padding: 50px 3%; 1309 | } 1310 | 1311 | .contact-info form .input-box { 1312 | display: block; 1313 | } 1314 | 1315 | .input-box input { 1316 | width: 100%; 1317 | } 1318 | 1319 | .rotate-text { 1320 | display: none; 1321 | } 1322 | 1323 | #main { 1324 | display: none; 1325 | } 1326 | 1327 | .img-hero img { 1328 | width: 100%; 1329 | } 1330 | 1331 | .text-animate { 1332 | width: 23.8rem; 1333 | } 1334 | 1335 | .btn-box { 1336 | width: 266px; 1337 | margin-bottom: 3rem; 1338 | } 1339 | 1340 | .about-btn button { 1341 | padding: 10px 15px; 1342 | } 1343 | 1344 | .fillter-buttons { 1345 | display: grid; 1346 | grid-gap: 1rem; 1347 | } 1348 | 1349 | .fillter-buttons button { 1350 | width: 100%; 1351 | padding: 13px; 1352 | } 1353 | } 1354 | 1355 | @media(max-width:350px) { 1356 | body{ 1357 | font-size: 30%; 1358 | overflow-x: scroll; 1359 | } 1360 | 1361 | .hero-info{ 1362 | font-size: 40% !important; 1363 | } 1364 | } -------------------------------------------------------------------------------- /svg.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | --------------------------------------------------------------------------------