diff --git a/01-11-2024/Explanation.md b/01-11-2024/Explanation.md new file mode 100644 index 0000000..932df28 --- /dev/null +++ b/01-11-2024/Explanation.md @@ -0,0 +1,57 @@ +# Portfolio Webpage Creation, Deployment, and Documentation + +## Overview + +The **Career Highlights** page is an integral part of my portfolio website, showcasing significant achievements and milestones in a visually engaging, single-page format. It serves as an excellent example of a streamlined portfolio layout that allows visitors to quickly understand my professional highlights without navigating multiple pages. This page is part of my main portfolio website, accessible at: + +- [Main Portfolio Website](https://madhurimarawat.github.io/Portfolio-Website/index.html) + The Career Highlights page complements the main portfolio by offering a concise, focused display of achievements. + +## Project Structure + +- **Solution.html**: The main HTML file structuring the Career Highlights page, containing sections for achievements, a dynamic social links wheel, and contact information. +- **css/Solution.css**: The custom CSS file responsible for styling, ensuring a polished, cohesive look that matches the overall portfolio's color scheme and branding. +- **js/Solution.js**: JavaScript file managing interactivity, including the rotating social links animation. +- **README.md**: General project documentation. +- **EXPLANATION.md**: Detailed explanation of design decisions, project structure, and deployment steps specific to the Career Highlights page. + +## Design Choices + +### Color Scheme and Styling + +The **Career Highlights** page employs a professional color scheme with subtle, visually appealing accents. A light background enhances readability, while strategic use of color draws attention to sections like achievements and social links. This portfolio showcases a **creative blend of emojis** to enhance visual appeal and expressiveness, contributing to a unique, engaging experience for visitors. A harmonious blend of professional colors ensures a polished, attractive look, maintaining a cohesive aesthetic across both pages. + +### Single-Page Layout + +This page is structured as a single-page web design, a practical approach for portfolios. It enables users to access all essential information in one view without navigating to other pages, making it easier to communicate key points quickly and effectively. This one-page layout is ideal for personal portfolios, allowing for an organized, visually rich presentation without overwhelming the user. + +### Dynamic Social Links Wheel Animation + +The **social links wheel animation** is a standout feature, where icons are displayed in a rotating wheel format. Each social link takes turns in the center, and after every three icons, the wheel reverses direction. The central icon and title update with each rotation, giving a dynamic and interactive feel to the page. The continuous animation ensures that all links receive equal attention, enhancing visitor engagement. This feature has been integrated across both the main portfolio page and the Career Highlights page, with a **social links logo added to the main page** and **corresponding Font Awesome icons** placed on the Career Highlights page. + +### Icons and Fonts + +Font Awesome icons represent social links and other important details, enhancing the pageโ€™s modern look. A calligraphic font choice adds a touch of elegance, complementing the personal branding. + +## Additional Features + +This portfolio includes the following features to enhance functionality and user experience: + +- **Responsive Design**: Ensures the portfolio looks great and functions well on all devices and screen sizes, providing a seamless experience for all users. +- **Dynamic Color Dropdown**: A dropdown for dynamically changing the websiteโ€™s color scheme with options for **Autumn, Summer, Rainy, and Winter** themes. Upon selection, the website colors change instantly. Refreshing the page restores the default color scheme, making it versatile for different seasons. +- **User-Friendly Interface**: A clean and intuitive layout ensures that the website is simple to navigate, making it easy for visitors to focus on the content. +- **Career Achievements Section**: A dedicated area highlights career milestones, allowing visitors to quickly grasp key achievements. + +## Deployment + +The **Career Highlights** page and the entire portfolio were deployed on **GitHub Pages**, making it accessible to the public. Deployment steps include: + +1. **Repository Setup**: Files like `Solution.html`, `css/Solution.css`, and `js/Solution.js` were committed to the repository. +2. **GitHub Pages Activation**: GitHub Pages was enabled by selecting the main branch. +3. **Live URL**: The page is accessible here: + - [Career Highlights Page](https://madhurimarawat.github.io/Portfolio-Website/career-highlights.html) + +## Repository and Live Links + +- **GitHub Repository**: [Portfolio GitHub Repository](https://github.com/madhurimarawat/Portfolio-Website) +- **Live Portfolio**: [Career Highlights Page](https://madhurimarawat.github.io/Portfolio-Website/career-highlights.html) diff --git a/01-11-2024/Question.md b/01-11-2024/Question.md index 52935db..9110970 100644 --- a/01-11-2024/Question.md +++ b/01-11-2024/Question.md @@ -1,6 +1,7 @@ ### **Question: Portfolio Webpage Creation, Deployment, and Documentation** **Difficulty Level:** ๐Ÿ”ด Advanced + **Domain:** Web Development ### **Objective:** diff --git a/01-11-2024/Solution.html b/01-11-2024/Solution.html new file mode 100644 index 0000000..d265c86 --- /dev/null +++ b/01-11-2024/Solution.html @@ -0,0 +1,354 @@ + + + + + + + + + Madhurima Rawat's Portfolio + + + + + +
+

Madhurima Rawat

+

B.Tech Hons. - CSE (Data Science), 3rd Year 6th Semester

+
+ Email + 9407959924 + GitHub + LinkedIn + LinkTree + Portfolio + Devfolio + +
+ + +
+
+
+ + + +
+

 Objective

+

+ Passionate about continuous learning, I seek a dynamic environment to + apply and expand my technical skills, leveraging strong communication, + attention to detail, and confidence to contribute meaningfully to + innovative projects. +

+
+ + +
+

 Education

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Degree/CertificateInstitute/BoardCGPAYear
B.Tech.CSVTU, Bhilai8.23 (Current)/102021 - Present
Senior SecondaryCBSE BoardFirst Division2021
SecondaryCBSE BoardDistinction2019
+
+ + +
+

 Experience

+
+

IIT Roorkee and Diginique Techlabs

+

Student Intern - AI, ML, and DS using Python (July 2023 - Sep 2023) | + GitHub

+ + +
+
+

Uptricks Services Pvt. Ltd

+

Data Science Intern (Feb 2024 - Mar 2024) | + GitHub

+ +
+
+

Mentorness

+

Machine Learning Intern (Mar 2024 - Apr 2024) | GitHub

+ +
+
+

IIT Bhilai

+

Project Intern - Data Science using Python (Feb 2024 - June 2024)

+ +
+
+ + +
+

 Projects

+
+

Library Management System

+

+  Website + | + + + GitHub +

+ +
+
+

HyperTuneML Platform

+

+  Website + | + + GitHub +

+ +
+
+

Web Scraper

+

+  Website + | + GitHub +

+ +
+
+ + + +
+

  Skills

+ +

* Elementary Proficiency

+
+ + + +
+

 Achievements

+ +
+ + + +
+

 Hobbies

+ +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/01-11-2024/css/Solution.css b/01-11-2024/css/Solution.css new file mode 100644 index 0000000..5b69e69 --- /dev/null +++ b/01-11-2024/css/Solution.css @@ -0,0 +1,510 @@ +/* +********************************************************************************************* +* File: career-highlights.css +* Author: Madhurima Rawat +* Date: July 15, 2024 +* Description: Stylesheet for the career highlights section on Madhurima Rawat's personal portfolio +* website, including responsive design, hover effects, color schemes, and layout adjustments. +* This stylesheet defines styles for headers, sections, tables, cards, and a rotating wheel +* of social links. The wheel displays social links around a central logo, with each link +* rotating to the center one by one. The animation continues until all links have been shown, +* then repeats. After every three links, the wheel rotates anticlockwise before resuming +* the clockwise rotation. The central icon and title are dynamically updated with each link. +* Version: 1.0 +* GitHub Repository: https://github.com/madhurimarawat/Portfolio-Website +* Issues/Bugs: For any issues or bugs, please visit the GitHub repository issues section. +* Comments: This CSS file enhances the user experience and visual appeal of the career highlights section, +* ensuring consistency and responsiveness across different devices. +* Dependencies: None +********************************************************************************************* +*/ + +/* Root variables for primary colors */ +:root { + --primary-color: #6cb2eb; + /* Default color */ +} + +/* Header styling */ +header { + background-color: var(--primary-color); + color: white; + padding: 20px; + text-align: center; +} + +/* Styling for header h1 */ +header h1 { + margin: 0; + text-align: center; +} + +/* Styling for header p */ +header p { + margin: 5px 0 10px; + text-align: center; +} + +/* Styling for contact links in header */ +header .contact a { + color: white; + margin: 0 10px; + text-decoration: none; + display: inline-block; + text-align: center; +} + +/* Hover effect for contact links in header */ +header .contact a:hover { + text-decoration: underline; + +} + +/* Styling for icons in the contact section */ +.contact a i { + margin-right: 5px; + +} + +/* Dropdown menu styles */ +.dropdown { + position: relative; + display: inline-block; + margin-left: 5px; + /* Add some space between contact links and dropdown */ +} + +.dropdown-toggle { + background-color: transparent; + /* Match the background with the header */ + color: white; + /* Set text color to white */ + padding: 0; + /* Remove padding */ + border: none; + /* Remove border */ + cursor: pointer; + font-size: 16px; + text-decoration: none; +} + +.dropdown-menu { + display: none; + position: absolute; + background-color: white; + z-index: 1; + border-radius: 5px; + overflow: hidden; + top: 100%; + /* Position the dropdown below the toggle button */ + left: 0; + /* Align dropdown to the left */ + min-width: 180px; + /* Ensure minimum width for dropdown */ + padding: 0; + /* Remove padding from dropdown menu */ +} + +.dropdown-menu a { + position: relative; + color: black; + padding: 10px 15px; + text-decoration: none; + display: block; + width: 100%; + /* Make anchor tags take full width */ + box-sizing: border-box; + /* Ensure padding is included in width */ + margin: 0; + /* Remove default margin */ +} + +.dropdown-menu a::before { + content: ''; + position: absolute; + top: 0; + left: -14px; + right: -5px; + bottom: 0; + background-color: var(--primary-color); + z-index: -1; + transform: scaleX(0); + transform-origin: left; + transition: transform 0.3s ease; +} + +.dropdown-menu a:hover::before { + transform: scaleX(1); +} + +.dropdown-menu a:hover { + color: black; +} + +.dropdown:hover .dropdown-menu { + display: block; + max-height: none; + /* Ensure the entire menu is shown */ + overflow: hidden; + /* Hide any overflowing content */ +} + +/* Body styling */ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + color: #333; + background-color: #FFFFF0; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + text-align: center; +} + +/* Section styling */ +section { + margin: 20px; + padding: 20px; + background-color: white; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + height: 100%; + display: flex; + flex-direction: column; + text-align: center; +} + +/* Styling for section h2 */ +section h2 { + border-bottom: 2px solid var(--primary-color); + padding-bottom: 10px; + margin-bottom: 20px; + text-align: center; +} + +/* Table styling */ +table { + + border-collapse: collapse; + margin-bottom: 20px; + text-align: center; +} + +/* Styling for table cells */ +table th, +table td { + border: 1px solid #ddd; + padding: 8px; + text-align: center; +} + +/* Styling for table headers */ +table th { + background-color: #f2f2f2; + text-align: center; +} + +/* Styling for experience and project items */ +.experience-item, +.project-item { + margin-bottom: 20px; + text-align: center; +} + +/* Additional styling for unordered lists */ +ul { + padding-left: 0; + /* Remove default padding */ + list-style-position: inside; + /* Move bullets inside the content box */ + text-align: center; + /* Center align the text */ +} + +/* Styling for list items in unordered lists */ +ul li { + display: inline-block; + /* Display list items as inline blocks */ + text-align: center; + /* Align text within the inline-blocks */ + margin-bottom: 10px; + width: 100%; + /* Ensure the li spans the full width */ +} + +/* Styling for links within list items */ +ul li a { + color: var(--primary-color); + text-decoration: none; + +} + +/* Hover effect for links within list items */ +ul li a:hover { + text-decoration: underline; + +} + +/* Card styling */ +.card { + transition: transform 0.3s, box-shadow 0.3s; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + text-align: center; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + background-color: #FFFFF0; +} + +/* Hover effect for cards */ +.card:hover { + transform: translateY(-10px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); + text-align: center; +} + +/* Media queries for mobile devices */ + +/* Styles for screens up to 600px */ +@media (max-width: 600px) { + + /* Adjust contact links */ + header .contact { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + gap: 0; + /* Adjust the gap value as needed */ + } + + header .contact a { + flex: 1 1 calc(40% - 10px); + /* Flex basis adjusted */ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding: 0; + margin: 0; + } + + header .contact a:hover { + text-decoration: underline; + } + + /* Ensure the odd and even items align to the left and right respectively */ + header .contact a:nth-child(odd) { + text-align: left; + /* Align odd items to the left */ + } + + header .contact a:nth-child(even) { + text-align: right; + /* Align even items to the right */ + } + + /* Dropdown specific styles */ + header .contact .dropdown { + display: flex; + align-items: flex-start; + /* Align items to the left */ + justify-content: center; + margin-right: 2px; + } + + /* Ensure the table fits within the card */ + section.card { + padding: 10px; + } + + table { + width: 100%; + table-layout: fixed; + /* Fixed table layout */ + overflow-x: hidden; + /* Prevent horizontal scrolling */ + } + + /* Ensures the table container does not overflow */ + .table-container { + overflow-x: hidden; + /* Prevent horizontal scrolling */ + } + + table th, + table td { + padding: 8px 4px; + /* Adjust padding for smaller screens */ + text-align: center; + /* Center-align text for readability */ + font-size: 8px; + } +} + +/* Styles for screens up to 360px */ +@media (max-width: 360px) { + + table th, + table td { + font-size: 7px; + /* Further adjust font size for very small screens */ + } +} + +/* Styles for screens up to 344px */ +@media (max-width: 344px) { + + table th, + table td { + font-size: 7px; + /* Maintain the smaller font size for consistency */ + } +} + +/* Full width card */ +.wheel { + position: relative; + width: 100%; + height: 400px; + overflow: hidden; + /* Hide overflow */ + background: #FFFFF0; + /* Background color */ + box-sizing: border-box; + /* Include padding and border in element's total width and height */ + display: flex; + align-items: center; + justify-content: center; +} + +/* General styles for icons */ +.wheel .links i { + font-size: 24px; + /* Adjust size */ + color: #333; + /* Default color for icons */ + transition: color 0.3s ease; + /* Smooth transition for color change */ +} + +/* Change icon color on hover */ +.wheel .links a:hover i { + color: var(--primary-color); + /* Color on hover */ +} + +/* Central icon styles */ +.center i { + font-size: 48px; + /* Larger central icon size */ + color: var(--primary-color); + /* Default color for central icon */ + transition: color 0.3s ease; + /* Smooth transition for color change */ +} + +/* Change color of the central icon */ +.center i.active { + color: var(--primary-color); + /* Active color for central icon, change as needed */ +} + +/* Color change for central icon on hover */ +.center:hover i { + color: var(--primary-color); + /* Hover color for central icon */ +} + +.scale { + transform: scale(1.2); + /* Example scale effect */ +} + +/* Central image styling */ +.center { + position: absolute; + z-index: 1; +} + +.center-image { + width: 100px; + /* Adjust size as needed */ + height: 100px; + /* Adjust size as needed */ +} + +.center img { + width: 100px; + /* Adjust as needed */ + height: 100px; + /* Adjust as needed */ +} + +.scale img { + transform: scale(1.2); + /* Adjust as needed */ +} + +/* Links container */ +.links { + position: absolute; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +/* Individual link styling */ +.link { + position: absolute; + font-size: 2rem; + /* Adjust size as needed */ + color: #333; + text-align: center; + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + transition: transform 0.5s ease, color 0.5s ease; +} + +.link img { + width: 100%; + height: 100%; + object-fit: contain; +} + +/* Central image scaling with square border */ +.link.scale { + transform: scale(1.2); + position: relative; + display: inline-block; + transition: transform 0.3s ease, color 0.3s ease; +} + +.link.scale::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + border: 2px solid var(--primary-color); + border-radius: 10px; + /* Adjust as needed to make corners disappear */ + box-shadow: 0 0 10px var(--primary-color-lighter); + /* Add a subtle glow for effect */ + transform: translate(-50%, -50%) scale(1.2); + /* Center and slightly enlarge the box */ + z-index: -1; + /* Ensure it appears behind the image */ + pointer-events: none; + /* Ensure the pseudo-element doesn't capture mouse events */ +} + +/* Ensure the image stays centered */ +.link.scale img { + display: block; + position: relative; + z-index: 1; + /* Ensure the image appears above the pseudo-element */ + object-fit: contain; +} \ No newline at end of file diff --git a/01-11-2024/css/index.css b/01-11-2024/css/index.css new file mode 100644 index 0000000..6edbd35 --- /dev/null +++ b/01-11-2024/css/index.css @@ -0,0 +1,411 @@ +/* +********************************************************************************************* +* File: index.css +* Author: Madhurima Rawat +* Date: July 15, 2024 +* Description: Stylesheet for Madhurima Rawat's personal portfolio website, including +* responsive design, hover effects, color schemes, and layout adjustments. +* Version: 1.0 +* GitHub Repository: https://github.com/madhurimarawat/Portfolio-Website +* Issues/Bugs: For any issues or bugs, please visit the GitHub repository issues section. +* Comments: This CSS file defines styles for various components such as navbar, cards, headings, +* buttons, and footer. It includes customizations for hover effects, color schemes, and layout +* adjustments to enhance user experience and visual appeal. +* Dependencies: Bootstrap 4.5.2 for responsive design. +********************************************************************************************* +*/ + +/* Root variables for primary colors */ +:root { + --primary-color: #6cb2eb; + /* Default color */ + --primary-color-lighter: hsl(var(--primary-hue), var(--primary-saturation), 40%); + /* Adjust lightness dynamically */ +} + +/* Styling for the card component */ +.card { + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transition: transform 0.3s, box-shadow 0.3s; + height: 100%; + display: flex; + flex-direction: column; + background-color: #FFFFF0; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); +} + +/* Hover effect for the card component */ +.card:hover { + transform: translateY(-10px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); +} + +/* Styling for the main heading */ +.heading { + text-align: center; + color: var(--primary-color); + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); +} + +/* Styling for secondary headings */ +.heading_1 { + text-align: center; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); +} + +/* Styling for the brand image in the navbar */ +.navbar-brand img { + border-radius: 50%; + width: 50px; + /* Adjust size as needed */ + height: 50px; + /* Adjust size as needed */ +} + +/* Padding for the navigation links */ +.navbar-nav .nav-link { + padding: 0.5rem 1rem; +} + +/* Margin for font-awesome icons in navigation links */ +.navbar-nav .nav-link .fa { + margin-right: 5px; +} + +/* Updated CSS for transparent navbar and rainy background effect */ + +/* Background color for the navbar */ +.navbar { + background-color: var(--primary-color); + /* Change background color */ +} + +/* Text color for navbar links */ +.navbar-dark .navbar-nav .nav-link { + color: #fff; + /* Change text color */ +} + +/* Hover effect for navbar links */ +.navbar-dark .navbar-nav .nav-link:hover { + color: #f0f0f0; + /* Change text color on hover */ +} + +/* Styling for the brand image in the navbar */ +.navbar-brand img { + border-radius: 50%; + width: 50px; + /* Adjust size as needed */ + height: 50px; + /* Adjust size as needed */ +} + +/* Padding for the navigation links */ +.navbar-nav .nav-link { + padding: 0.5rem 1rem; +} + +/* Margin for font-awesome icons in navigation links */ +.navbar-nav .nav-link .fa { + margin-right: 5px; +} + +/* Dropdown menu item hover */ +.navbar-dark .navbar-nav .dropdown-menu a.dropdown-item:hover { + background-color: var(--primary-color); + /* Set hover background color */ + color: black; + /* Set hover text color */ +} + +/* Positioning for carousel items */ +.carousel-item { + position: relative; +} + +/* Styling for custom captions in the carousel */ +.custom-caption { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: rgba(0, 0, 0, 0.7); + /* Black text color */ + font-size: 2em; + /* Adjust font size as needed */ + font-weight: bold; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + font-family: 'Times New Roman', cursive; +} + +/* Table styling */ +table { + width: 100%; + border-collapse: collapse; + margin-bottom: 20px; + table-layout: fixed; + /* Ensure fixed layout */ +} + +/* Styling for table cells */ +table th, +table td { + border: 1px solid #ddd; + padding: 8px; + text-align: center; +} + +/* Styling for table headers */ +table th { + background-color: #f2f2f2; + text-align: center; +} + +/* Styling for the body */ +body { + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + background-color: #FFFFF0; +} + +/* Styling for tool buttons */ +.tool-button { + display: inline-block; + background-color: var(--primary-color); + color: white; + text-align: center; + padding: 8px 16px; + margin: 4px; + border-radius: 4px; + text-decoration: none; + transition: background-color 0.3s; +} + +/* Hover effect for tool buttons */ +.tool-button:hover { + /* background-color: #4a8dc9; */ + background-color: --primary-color-lighter; +} + +/* Styling for the languages and tools section */ +.languages-and-tools { + margin-top: 20px; + text-align: center; +} + +/* Inline styling for paragraphs and links in the languages and tools section */ +.languages-and-tools p, +.languages-and-tools a { + display: inline-block; + margin: 5px; +} + +/* Styling for the first type of tool button */ +.tool-button-1 { + display: inline-block; + background-color: #dfff00; + color: black; + text-align: center; + padding: 4px 10px; + /* Reduced padding */ + margin: 2px 4px; + /* Slightly reduced margin */ + border-radius: 4px; + /* Increased border radius for a smoother look */ + text-decoration: none; + font-size: 0.875rem; + /* Slightly smaller font size */ + font-weight: 500; + /* Added font weight for a bolder look */ + transition: background-color 0.3s, transform 0.3s; + /* Added transform transition for better effect */ +} + +/* Hover effect for the first type of tool button */ +.tool-button-1:hover { + background-color: #dfff00; + /* Slightly darker background on hover */ + transform: scale(1.05); + /* Slight scale up effect on hover */ +} + +/* Styling for the second type of tool button */ +.tool-button-2 { + display: inline-block; + background-color: bisque; + color: black; + text-align: center; + padding: 4px 10px; + /* Reduced padding */ + margin: 2px 4px; + /* Slightly reduced margin */ + border-radius: 4px; + /* Increased border radius for a smoother look */ + text-decoration: none; + font-size: 0.875rem; + /* Slightly smaller font size */ + font-weight: 500; + /* Added font weight for a bolder look */ + transition: background-color 0.3s, transform 0.3s; + /* Added transform transition for better effect */ +} + +/* Hover effect for the second type of tool button */ +.tool-button-2:hover { + background-color: bisque; + /* Slightly darker background on hover */ + transform: scale(1.05); + /* Slight scale up effect on hover */ + color: var(--primary-color); + /* Change text color on hover */ +} + +.footer-section { + text-align: center; + padding: 10px; + color: white; + background-color: var(--primary-color); +} + +/* Add margin-top to row class for larger screens */ +.row+.row { + margin-top: 24px; + /* Adjust the value as needed */ +} + +/* For mobile devices, set margin-top to 0 for rows and add margin-bottom to cards */ +@media (max-width: 767.98px) { + .row+.row { + margin-top: 0; + } + + .col-md-3 { + margin-bottom: 20px; + /* Adjust the value as needed */ + } +} + +/* Full width card */ +.wheel { + position: relative; + width: 100%; + max-width: 600px; + /* Maximum width of the card */ + height: 400px; + /* Adjust as needed */ + margin: auto; + border: 1px solid #ccc; + /* Border for card effect */ + border-radius: 15px; + /* Rounded corners */ + padding: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + /* Shadow for card effect */ + overflow: hidden; + /* Hide overflow */ + background: #FFFFF0; + /* Background color */ + box-sizing: border-box; + /* Include padding and border in element's total width and height */ + display: flex; + align-items: center; + justify-content: center; +} + +/* Central image styling */ +.center { + position: absolute; + z-index: 1; +} + +.center-image { + width: 100px; + /* Adjust size as needed */ + height: 100px; + /* Adjust size as needed */ +} + +.center img { + width: 100px; + /* Adjust as needed */ + height: 100px; + /* Adjust as needed */ +} + +.scale img { + transform: scale(1.2); + /* Adjust as needed */ +} + +/* Links container */ +.links { + position: absolute; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +/* Individual link styling */ +.link { + position: absolute; + font-size: 2rem; + /* Adjust size as needed */ + color: #333; + text-align: center; + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + transition: transform 0.5s ease, color 0.5s ease; +} + +.link img { + width: 100%; + height: 100%; + object-fit: contain; +} + +/* Central image scaling with square border */ +.link.scale { + transform: scale(1.2); + position: relative; + display: inline-block; + transition: transform 0.3s ease, color 0.3s ease; +} + +.link.scale::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + border: 2px solid var(--primary-color); + border-radius: 10px; + /* Adjust as needed to make corners disappear */ + box-shadow: 0 0 10px var(--primary-color-lighter); + /* Add a subtle glow for effect */ + transform: translate(-50%, -50%) scale(1.2); + /* Center and slightly enlarge the box */ + z-index: -1; + /* Ensure it appears behind the image */ + pointer-events: none; + /* Ensure the pseudo-element doesn't capture mouse events */ +} + +/* Ensure the image stays centered */ +.link.scale img { + display: block; + position: relative; + z-index: 1; + /* Ensure the image appears above the pseudo-element */ + object-fit: contain; +} \ No newline at end of file diff --git a/01-11-2024/images/Frame Image.png b/01-11-2024/images/Frame Image.png new file mode 100644 index 0000000..d4d1f31 Binary files /dev/null and b/01-11-2024/images/Frame Image.png differ diff --git a/01-11-2024/images/My Avatar.png b/01-11-2024/images/My Avatar.png new file mode 100644 index 0000000..f9a2f40 Binary files /dev/null and b/01-11-2024/images/My Avatar.png differ diff --git a/01-11-2024/images/Profile Image.png b/01-11-2024/images/Profile Image.png new file mode 100644 index 0000000..7a18c2e Binary files /dev/null and b/01-11-2024/images/Profile Image.png differ diff --git a/01-11-2024/images/Programmer Illustration Infinity Sign.jpg b/01-11-2024/images/Programmer Illustration Infinity Sign.jpg new file mode 100644 index 0000000..9f0f854 Binary files /dev/null and b/01-11-2024/images/Programmer Illustration Infinity Sign.jpg differ diff --git a/01-11-2024/images/Programmer Illustration.jpg b/01-11-2024/images/Programmer Illustration.jpg new file mode 100644 index 0000000..02c5d99 Binary files /dev/null and b/01-11-2024/images/Programmer Illustration.jpg differ diff --git a/01-11-2024/images/Title Logo.png b/01-11-2024/images/Title Logo.png new file mode 100644 index 0000000..519b3a1 Binary files /dev/null and b/01-11-2024/images/Title Logo.png differ diff --git a/01-11-2024/index.html b/01-11-2024/index.html new file mode 100644 index 0000000..38ffb9b --- /dev/null +++ b/01-11-2024/index.html @@ -0,0 +1,958 @@ + + + + + + + + + + + + + + + + + + Portfolio Website + + + + + + + +
+

+ + + + + + + + +
+
+

+ + Typing SVG + +

+

๐Ÿ‘ฉโ€๐Ÿ’ป  About Me

+
+
+
+ +
+ +
+ Photo +
+

Madhurima Rawat

+

+ + Typing SVG + +

+

+ With a passion for learning and exploring new horizons, I'm + committed to self-improvement, continually expanding my knowledge + and skills, both in the world of technology and beyond. As a + confident public speaker with strong communication skills and a + knack for effective reading and writing, I enjoy sharing insights + and connecting with people from diverse backgrounds. +

+
+ + +
+
    +
  • ๐Ÿ‘‹ Iโ€™m Madhurima Rawat ๐Ÿง‘โ€๐ŸŽ“
    • +
  • + ๐Ÿ‘€ Iโ€™m interested in data structures and programming languages +
    • +
  • + +
    • +
  • + ๐Ÿ›๏ธ Pursuing B.Tech(Hons.) in Data Science from CSVTU + +
    • +
  • + ๐ŸŒฑ Iโ€™m currently learning Artificial Intelligence ๐Ÿค–๐Ÿง , Data + Science ๐Ÿ“Š๐Ÿ“ˆ, and Machine Learning ๐Ÿ› ๐Ÿ“š +
    • +
  • + ๐Ÿ‘ฏ Iโ€™m looking to collaborate on Python + Python Language +
    • +
  • + ๐Ÿ’ฌ Ask me about programming languages ๐Ÿ˜€ +
    • +
  • + ๐Ÿ“ซ How to reach me:   + + Linkedin Badge + +     + + Mail Illustration๐Ÿ“ซ + +
    • +
  • ๐Ÿ˜„ Pronouns: She/Her.
    • +
  • + โšก Fun fact: In my free time I read stories ๐Ÿ“š and explore + new technologies ๐Ÿ’ป +
    • +
  • + ๐Ÿ’ก Feel free to share any good story or article resources with + me! ๐Ÿ“šโœจ +
    • +
+
+
+
+
+ + + + +
+
+

+ + Typing SVG +

+

๐Ÿง‘โ€๐ŸŽ“  Education

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
Degree/CertificateInstitute/BoardCGPAYear
B.Tech.CSVTU, Bhilai8.23 (Current)/102021 - Present
Senior SecondaryCBSE BoardFirst Division2021
SecondaryCBSE BoardDistinction2019
+
+
+ + + +
+
+

+ + Typing SVG + + +

+
+ +

๐Ÿ›   Languages and Tools

+ +
+

Click on the icon to see the associated repository.

+
+ +
+ ๐Ÿ“š  Languages : +
+

+ C + C++ + Python + R + CSS + HTML + JavaScript + PHP + Ruby + Scratch + Java +

+
+ +
+ ๐Ÿ“‘  Frameworks & Libraries : +
+

+ Numpy + Pandas + Matplotlib + Seaborn + Scikit + Learn + Mlxtend + Pickle + Joblib + ggplot2 + Bootstrap + NLTK + Requests + PyTest + Sphinx + MkDocs + PDoc +

+
+ +
+ ๐Ÿ’ป  Databases : +
+

+ MySQL + InfluxDB + Hive +

+
+ +
+ ๐ŸŒŸ  Technology and Tools : +
+

+ GCC + Jupyter + Anaconda + Google + Colab + R Studio + PyCharm + Visual Studio + Code + Notepad++ + Komodo IDE + Grafana + Astyle + Git + GitHub + Actions + Travis + CI + Hadoop + Kafka + Spark +

+
+ +
+ ๐ŸŒ  Web Servers : +
+

+ XAMPP Server + Flask + API + Streamlit +

+
+ +
+ ๐Ÿ“Š  Web Services : +
+

+ Netlify +

+
+
+
+ + + +
+
+

+ + Typing SVG + +

+

๐Ÿ“‘๐ŸŒŸ   Experience

+

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CompanyRoleDurationProjects and Achievements
IIT Roorkee and Diginique TechlabsStudent Intern - AI, ML, and DS using Python | + GitHubJuly 2023 - Sep 2023 + Developed ML model web app for optimizing accuracy with hyperparameter tuning on real-world + datasets. + Managed GitHub repository for organizing and sharing project codes. +
Uptricks Services Pvt. LtdData Science Intern | GitHub + Feb 2024 - Mar 2024 + Focused on retail sales forecasting and credit card prediction, demonstrating proficiency in + data analysis and predictive modeling. Received a Letter of Recommendation for outstanding + performance. +
MentornessMachine Learning Intern| GitHubMar 2024 - Apr 2024 + Developed a churn analysis application, conducted World Cup data analysis, and authored an + insightful + article on hyperparameter tuning techniques. +
IIT BhilaiProject Intern - Data Science using PythonFeb 2024 - June 2024 + Contributed to the 'BSP Pre-Failure Alert Generation' project by using matrix profiling to + discern motifs + and + discords in time series data of PLC signals, enabling the + identification of normal and anomalous patterns with precision. Enhanced Grafana dashboards for + more + effective + visualization of BSP mill server data. +
+
+
+ + + +
+
+

+ + Typing SVG + +

+

๐Ÿ“Ž๐Ÿ“š   Projects

+
+

Click on the Thumbnail to See the Website

+
+
+ +
+
+ + Library Management system website + +
+
+ Library Website +
+
+

+  Website + | + + GitHub +

+ + CSS + HTML + JavaScript + Bootstrap +

+

+ Executed frontend development for a Library Management System + Website, enhancing book tracking, user management, and overall + library experience. Designed a user-friendly interface + facilitating efficient processes for librarians and patrons. +

+
+
+
+ +
+
+ + Website Image + +
+
HyperTuneML Platform
+
+

+  Website + | + GitHub +

+ Python + Scikit + Learn + Joblib + Streamlit +

+

+ Developed HyperTuneML Platform, a comprehensive platform showcasing + diverse machine learning models with real-world datasets. + Offers practical insights to enhance understanding of + predictive analytics, catering to learners at all levels. +

+
+
+
+ +
+
+ + Web Scrapper website + +
+
Web Scrapper
+
+

+  Website + | + + GitHub +

+ Python + Requests + bs4 + Streamlit +

+

+ Developed a Web Scraper Website with versatile functions for + efficient data extraction from diverse websites. Showcases + commitment to enhancing data accessibility and streamlining + information retrieval processes. +

+
+
+
+ +
+
+ + Github Repository Lister Website + +
+
+ GitHub Repository Lister +
+

+  Website + | + + GitHub +

+ + CSS + HTML + JavaScript + Bootstrap +

+

+ Created a GitHub Repository Lister Website to simplify the + exploration of repository topics, enhancing the user + experience by providing a clear, organized display of relevant + repositories. +

+
+
+
+
+ + +
+ + +
+
+ + Semester Notes Website + +
+
Study Materials
+

+  Website + | + + GitHub +

+ CSS + HTML + JavaScript + Bootstrap +

+

+ Developed a comprehensive Semester Notes Website, offering students + easy access to course materials and study resources. Provides a + well-organized platform for efficient learning and information + retrieval. +

+
+
+
+ + +
+
+ + CodeCulture Website + +
+
CodeCulture Daily
+

+  Website + | + + GitHub +

+ HTML + GitHub + Programming + Bootstrap +

+

+ CodeCulture-Daily is a programming challenge repository offering daily problems to boost + coding skills. Solutions and + explanations are posted at 7 PM, fostering collaborative learning. +

+
+
+
+
+
+
+ + + + + + +
+
+

+ + Typing SVG + +

+ +

โœจ   Hobbies and Interests

+
+
+ +
+
+ AI Art Illustration +
+
AI Arts ๐Ÿ–Œ๏ธ๐Ÿ’ป
+
+

โ€œA machineโ€™s perspective on the world.โ€

+
+
+
+ +
+
+ Girl With book and Butterfly +
+
Literature ๐Ÿ“š๐Ÿ“–
+
+

โ€œA good book is an event in life.โ€

+
+
+
+ +
+
+ Music-vector-Feature Illustration +
+
Music ๐ŸŽผ๐ŸŽต
+
+

+ โ€œMusic is to Heart what Medicine is to Body.โ€ +

+
+
+
+ +
+
+ Nature Photography Illustration +
+
+ Nature Photography ๐Ÿ“ธ๐Ÿž๏ธ +
+

+ โ€œNature always wears the colors of the spirit.โ€ +

+
+
+
+
+
+
+
+
+ + + +
+

Thank You

+

+ Thank you for visiting my portfolio. If you have any questions or would + like to get in touch, please feel free to contact me. +

+ + + +
+ Email + 9407959924 + GitHub +   +   + + LinkedIn   + + LinkTree   + Portfolio  + + Devfolio + +
+ Visit on GitHub   +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/01-11-2024/js/Solution.js b/01-11-2024/js/Solution.js new file mode 100644 index 0000000..f38b18e --- /dev/null +++ b/01-11-2024/js/Solution.js @@ -0,0 +1,221 @@ +/* +********************************************************************************************* +* File: career-highlights.js +* Author: Madhurima Rawat +* Date: July 15, 2024 +* Description: JavaScript file for Madhurima Rawat's personal portfolio website, managing the +* behavior of a color switcher dropdown for dynamically changing the website's primary color, +* and animating social links wheel with dynamic updates to central icon and title. +* Version: 1.1 +* GitHub Repository: https://github.com/madhurimarawat/Portfolio-Website +* Issues/Bugs: For any issues or bugs, please visit the GitHub repository issues section. +* Comments: This JS file defines scripts to manage the visibility and interaction of the color switcher +* dropdown, and a social links wheel, enhancing user experience by allowing dynamic customization +* of the website's color scheme and interactive display of social links. +* Dependencies: None +********************************************************************************************* +*/ + +/** + * Manages the behavior of a color switcher dropdown for dynamically changing the website's primary color, + * and animates the social links wheel with dynamic updates to the central icon and title. + */ + +/** + * Color Switcher Dropdown Interaction + * + * This script manages the behavior of a color switcher dropdown: + * - Shows the dropdown menu on hover over the toggle button. + * - Hides the dropdown menu when the mouse leaves the dropdown area. + * - Hides the dropdown menu when clicking outside the dropdown. + * - Changes the root element's primary color variable based on user selection. + * - Automatically hides the dropdown after a delay once a color is selected. + */ + +/** + * Social Links Wheel Animation + * + * This script manages the behavior of a social links wheel: + * - Dynamically updates the position and rotation of social links around a central icon. + * - Rotates the wheel and updates the central icon and title based on the current link. + * - Adjusts radius based on screen size for responsiveness. + * - Starts animation only after user scrolls to the section using Intersection Observer. + */ + +// Function to handle interactions with the color switcher dropdown +document.addEventListener('DOMContentLoaded', function () { + const dropdownToggle = document.querySelector('.dropdown-toggle'); // Dropdown toggle button + const colorDropdown = document.getElementById('colorDropdown'); // Dropdown menu itself + + // Show dropdown menu on hover + dropdownToggle.addEventListener('mouseenter', function () { + colorDropdown.style.display = 'block'; // Display dropdown on hover + }); + + // Hide dropdown menu when mouse leaves the dropdown + colorDropdown.addEventListener('mouseleave', function () { + colorDropdown.style.display = 'none'; // Hide dropdown on mouse leave + }); + + // Hide dropdown menu when clicking outside + document.addEventListener('click', function (event) { + if (!dropdownToggle.contains(event.target) && !colorDropdown.contains(event.target)) { + colorDropdown.style.display = 'none'; // Hide dropdown if click is outside + } + }); + + // Add event listeners to dropdown items + const dropdownItems = document.querySelectorAll('.dropdown-item'); + dropdownItems.forEach(item => { + item.addEventListener('click', function () { + const selectedColor = this.getAttribute('onclick').split("'")[1]; // Get selected color from dropdown item + changeColor(selectedColor); // Call function to change color based on selection + + // Hide dropdown menu after selection with delay + setTimeout(function () { + colorDropdown.style.display = 'none'; + }, 300); // Delay in milliseconds (e.g., 300ms = 0.3 second) + }); + }); +}); + +// Function to change the root element's primary color variable +function changeColor(color) { + let root = document.documentElement; // Access the root element of the document (e.g., ) + + // Change primary color variable based on selected color + switch (color) { + case 'autumn': + root.style.setProperty('--primary-color', 'coral'); // Autumn: Coral + break; + case 'summer': + root.style.setProperty('--primary-color', '#FFD700'); // Summer: Gold + break; + case 'rainy': + root.style.setProperty('--primary-color', '#00CED1'); // Rainy: Dark Turquoise + break; + case 'winter': + root.style.setProperty('--primary-color', 'rgb(242, 82, 175)'); // Winter: Deep Pink + break; + default: + root.style.setProperty('--primary-color', '#6cb2eb'); // Default: Sky Blue + } +} + +document.addEventListener('DOMContentLoaded', () => { + const links = document.querySelectorAll('.link'); + const totalLinks = links.length; + const centerRotationDuration = 3000; // Duration for each link to stay in center + const rotationSpeed = 0.5; // Speed of the rotation (in degrees per frame) + const initialDisplayDuration = 1000; // Duration for initial central icon to be displayed (in milliseconds) + const initialTitle = 'Central Title'; + const initialHref = '#'; + + let radius = 150; // Default radius for larger screens + + // Adjust radius based on screen width + if (window.innerWidth > 412 && window.innerWidth <= 480) { + // Screen width between 413px and 480px + radius = 123; + } else if (window.innerWidth < 412 && window.innerWidth > 344) { + // Screen width between 345px and 411px + radius = 108; + } else if (window.innerWidth <= 344) { + // Screen width 344px or smaller + radius = 106; + } else if (window.innerWidth == 412) { + // Exact screen width of 412px + radius = 135; + } + + let currentIndex = 0; + let angle = 0; // Initial rotation angle + let rotationInterval; + + function updateLinksPosition() { + const angleStep = 360 / totalLinks; + + links.forEach((link, index) => { + const rotation = angleStep * index + angle; + link.style.transform = `rotate(${rotation}deg) translateX(${radius}px) rotate(-${rotation}deg)`; + }); + } + + function rotateCenter() { + const centralIcon = document.querySelector('.center i'); + const centralLink = document.querySelector('.center a'); + + // Remove the 'active' class from the previous central icon + document.querySelectorAll('.links i').forEach(icon => { + icon.classList.remove('active'); + }); + + // Get the primary color from the CSS variables + const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim(); + + if (currentIndex === 0) { + // Reset to initial icon after all links have been shown + centralIcon.className = 'fas fa-user-friends'; // Default central icon class + centralIcon.style.color = primaryColor; // Use the primary color for the central icon + centralLink.href = initialHref; + centralLink.title = initialTitle; + centralIcon.title = initialTitle; // Set the title for the central icon + centralIcon.classList.remove('active'); // Ensure 'active' class is removed + } else { + const currentLink = links[currentIndex - 1]; + const newIconClass = currentLink.querySelector('i').className; + const newHref = currentLink.href; + const newTitle = currentLink.title; + + // Update the central icon class and link attributes + centralIcon.className = newIconClass; + centralIcon.style.color = primaryColor; // Use the primary color for the central icon + centralLink.href = newHref; + centralLink.title = newTitle; + centralIcon.title = newTitle; // Set the title for the central icon + + // Add the 'active' class to the central icon + centralIcon.classList.add('active'); + + links.forEach((link, index) => { + link.classList.remove('scale'); // Remove scaling from all links + if (index === currentIndex - 1) { + link.classList.add('scale'); // Add scaling to the current link + } + }); + } + + currentIndex = (currentIndex + 1) % (totalLinks + 1); + } + + function animateRotation() { + angle = (angle + rotationSpeed) % 360; // Update rotation angle + updateLinksPosition(); // Update positions of the links + requestAnimationFrame(animateRotation); // Request the next frame + } + + // Intersection Observer to start animation on scroll + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + // Start the rotation animation + animateRotation(); + + // Display the initial central icon for a set duration, then start the periodic rotation + setTimeout(() => { + rotateCenter(); // Rotate center once after the initial delay + rotationInterval = setInterval(rotateCenter, centerRotationDuration); // Start the periodic rotation + }, initialDisplayDuration); + + // Stop observing after the animation starts + observer.unobserve(entry.target); + } + }); + }, { + threshold: 0.5 // Adjust the threshold as needed + }); + + // Start observing the social links section + const socialLinksSection = document.getElementById('social-links-section'); + observer.observe(socialLinksSection); +}); diff --git a/01-11-2024/js/index.js b/01-11-2024/js/index.js new file mode 100644 index 0000000..6cbeecd --- /dev/null +++ b/01-11-2024/js/index.js @@ -0,0 +1,219 @@ +/********************************************************************************************* +* File: index.js +* Author: Madhurima Rawat +* Date: July 15, 2024 +* Description: JavaScript file for Madhurima Rawat's personal portfolio website, providing +* functionality to dynamically change color schemes based on user-selected seasons. +* Also handles the spacing when a section is clicked with respect to navigation bar. +* Version: 1.0 +* GitHub Repository: https://github.com/madhurimarawat/Portfolio-Website +* Issues/Bugs: For any issues or bugs, please visit the GitHub repository issues section. +* Comments: This JS file defines functions to update the primary color variable of the root +* element based on the provided season. It enhances user experience by allowing +* dynamic customization of the color scheme. +* Dependencies: None +*********************************************************************************************/ + +/** + * Change Primary Color Variable + * + * This function updates the primary color variable of the root element (document.documentElement) + * based on the provided color name. + * + * @param {string} Color - The name of the color to set as the primary color. + * Valid values are 'autumn', 'summer', 'rainy', 'winter', or default to '#6cb2eb'. + */ + +// "Life is too short to be using just one color!" +// This function takes the color from the index page and then returns the variable value according to that +function changeColor(Color) { + let color; + + // Determine the color based on the provided Color parameter + switch (Color) { + case 'autumn': + color = 'coral'; // Autumn: Coral + break; + case 'summer': + color = '#FFD700'; // Summer: Gold + break; + case 'rainy': + color = '#00CED1'; // Rainy: Dark Turquoise + break; + case 'winter': + color = 'rgb(242, 82, 175)'; // Winter: Deep Pink + break; + default: + color = '#6cb2eb'; // Default color (sky blue) + } + + // Set the '--primary-color' CSS variable of the root element to the determined color + document.documentElement.style.setProperty('--primary-color', color); +} + +$(document).ready(function () { + // Function to handle smooth scrolling for both dropdown and direct navigation items + function smoothScroll(event, target) { + var offset; + + // Check if it's a mobile device + if ($(window).width() < 992) { + offset = $(target).offset().top - 75; // Manually adjust for mobile, excluding navbar height + } else { + offset = $(target).offset().top - $(".navbar").outerHeight() - (-10); // Default offset for larger screens + } + + // Smooth scroll to the target section + $('html, body').animate({ + scrollTop: offset + }, 800); + + // Collapse the navbar menu after clicking a dropdown item + $(".navbar-collapse").collapse('hide'); + } + + // Handle click event for dropdown items within the "Profile" section + $("#navbarDropdownProfile + .dropdown-menu a.dropdown-item").on('click', function (event) { + // Check if the clicked item has the class 'dev' + if ($(this).hasClass('dev')) { + // Allow the default action (opening in a new tab) + return true; + } else { + // Prevent the default action (not open in a new tab) + event.preventDefault(); + + var target = $(this).attr("href"); + smoothScroll(event, target); + } + }); + + // Handle click event for direct navigation items + $(".nav-item a.nav-link").on('click', function (event) { + var target = $(this).attr("href"); + smoothScroll(event, target); + }); +}); + +// Run when DOM content is fully loaded +document.addEventListener("DOMContentLoaded", function () { + // Center align contentRow element using Flexbox + var contentRow = document.getElementById("contentRow_1"); + if (contentRow) { + contentRow.classList.add("d-flex", "justify-content-center"); + } +}); + +document.addEventListener('DOMContentLoaded', () => { + const links = document.querySelectorAll('.link'); + const totalLinks = links.length; + const centerRotationDuration = 3000; // Duration for each link to stay in center + const radius = 150; // Distance of icons from center + const rotationSpeed = 0.5; // Speed of the rotation (in degrees per frame) + const initialDisplayDuration = 1000; // Duration for initial central icon to be displayed (in milliseconds) + const extendedDisplayDuration = 5000; // Duration for extended visibility of icons in the center (in milliseconds) + const initialImageSrc = 'https://ouch-cdn2.icons8.com/7t1OP99ujxbijKLclt_j8lXv5sNR8Ob4utsa-QRFnf0/rs:fit:435:456/extend:false/wm:1:re:0:0:0.8/wmid:ouch/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvMTA0/L2RjMWUzN2RiLWM1/NzctNGY0Mi05ZWFj/LWVkMWRlYjJkMDAw/Yy5zdmc.png'; + const initialTitle = 'Central Title'; + const initialHref = '#'; + const sectionId = 'social-links'; // ID of the section to animate + + let currentIndex = 0; + let angle = 0; // Initial rotation angle + let rotationInterval; + let isAnimating = false; // Track if the animation has started + let animationTimeout; // Track the timeout for extending icon visibility + + function updateLinksPosition() { + const angleStep = 360 / totalLinks; + + links.forEach((link, index) => { + const rotation = angleStep * index + angle; + link.style.transform = `rotate(${rotation}deg) translateX(${radius}px) rotate(-${rotation}deg)`; + }); + } + + function rotateCenter() { + const centralImage = document.querySelector('.center img'); + const centralLink = document.querySelector('.center a'); + + if (currentIndex === 0) { + // Reset to initial image after all links have been shown + centralImage.src = initialImageSrc; + centralImage.title = initialTitle; + centralLink.href = initialHref; + centralLink.title = initialTitle; + centralLink.setAttribute('title', initialTitle); // Ensure title attribute is updated + } else { + const currentLink = links[currentIndex - 1]; + const newImageSrc = currentLink.querySelector('img').src; + const newHref = currentLink.href; + const newTitle = currentLink.title; + + // Update the central image src and link attributes + centralImage.src = newImageSrc; + centralImage.title = newTitle; + centralLink.href = newHref; + centralLink.title = newTitle; + centralLink.setAttribute('title', newTitle); // Ensure title attribute is updated + + links.forEach((link, index) => { + link.classList.remove('scale'); // Remove scaling from all links + if (index === currentIndex - 1) { + link.classList.add('scale'); // Add scaling to the current link + } + }); + } + + currentIndex = (currentIndex + 1) % (totalLinks + 1); + } + + function animateRotation() { + angle = (angle + rotationSpeed) % 360; // Update rotation angle + updateLinksPosition(); // Update positions of the links + requestAnimationFrame(animateRotation); // Request the next frame + } + + function startAnimation() { + if (!isAnimating) { + // Start the rotation animation + animateRotation(); + + // Display the initial central icon for a set duration, then start the periodic rotation + setTimeout(() => { + rotateCenter(); // Rotate center once after the initial delay + rotationInterval = setInterval(rotateCenter, centerRotationDuration); // Start the periodic rotation + }, initialDisplayDuration); + + isAnimating = true; // Set the flag to true indicating that animation has started + + // Extend visibility of central icon + if (animationTimeout) clearTimeout(animationTimeout); + animationTimeout = setTimeout(() => { + rotateCenter(); // Extend visibility by rotating center once more + }, extendedDisplayDuration); + } + } + + // Listen for click events on navigation links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', (e) => { + if (e.target.getAttribute('href').substring(1) === sectionId) { + document.getElementById(sectionId).classList.add('active'); + startAnimation(); + } + }); + }); + + // Listen for scroll events to trigger the animation when section is in view + window.addEventListener('scroll', () => { + const section = document.getElementById(sectionId); + const sectionPosition = section.getBoundingClientRect(); + const viewportHeight = window.innerHeight || document.documentElement.clientHeight; + + if (sectionPosition.top <= viewportHeight && sectionPosition.bottom >= 0) { + document.getElementById(sectionId).classList.add('active'); + startAnimation(); + } + }); +}); + + diff --git a/02-11-2024/Question.md b/02-11-2024/Question.md new file mode 100644 index 0000000..6ea133c --- /dev/null +++ b/02-11-2024/Question.md @@ -0,0 +1,23 @@ +### **Question: Conduct a SWOT Analysis of a Role or Career Path** + +**Difficulty Level:** ๐ŸŸก Intermediate +**Domain:** Career Development / Professional Growth + +### **Objective:** + +Perform a **SWOT Analysis** (Strengths, Weaknesses, Opportunities, and Threats) for a specific career path. This exercise should identify the core competencies, challenges, potential growth opportunities, and external risks associated with the career. + +### **Requirements:** + +1. **SWOT Analysis Elements**: + + - **Strengths**: Recognize key skills, qualities, and advantages that professionals in this career path typically have. + - **Weaknesses**: Address areas where individuals in this role may face common limitations or challenges. + - **Opportunities**: Highlight trends, industry growth areas, or new technologies that create possibilities for advancement. + - **Threats**: Outline external factors, such as industry changes or increased competition, that could impact the career path. + +2. **Solution Structure**: + + - Summarize each section in **bullet points** for clarity. + - Provide a **brief explanation** of each element with relevant examples where possible. + - Conclude with **recommendations** for how individuals can leverage strengths and opportunities while addressing weaknesses and mitigating threats.