{"id":20356548,"url":"https://github.com/madhurimarawat/portfolio-website","last_synced_at":"2026-04-28T16:36:39.343Z","repository":{"id":246922285,"uuid":"822937642","full_name":"madhurimarawat/Portfolio-Website","owner":"madhurimarawat","description":"This portfolio showcases my work with creative emoji elements, a harmonious blend of professional colors, and a dedicated section for career highlights, presenting my technical skills.","archived":false,"fork":false,"pushed_at":"2026-04-18T09:46:35.000Z","size":100339,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-18T10:18:40.056Z","etag":null,"topics":["about-me","bootstrap","creative","css","designer","digital-resume","education","hobbies","html","html-resume","interests","internships","javascript","portfolio-website","professional-portfolio","profilesection","projects","skills","social-links","user-interface"],"latest_commit_sha":null,"homepage":"https://madhurimarawat.github.io/Portfolio-Website/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/madhurimarawat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-07-02T06:02:08.000Z","updated_at":"2026-04-18T09:46:39.000Z","dependencies_parsed_at":"2024-08-01T18:49:05.150Z","dependency_job_id":"6a680e11-70d5-4d46-8347-d9f5e56ec803","html_url":"https://github.com/madhurimarawat/Portfolio-Website","commit_stats":null,"previous_names":["madhurimarawat/portfolio-website"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/madhurimarawat/Portfolio-Website","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madhurimarawat%2FPortfolio-Website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madhurimarawat%2FPortfolio-Website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madhurimarawat%2FPortfolio-Website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madhurimarawat%2FPortfolio-Website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/madhurimarawat","download_url":"https://codeload.github.com/madhurimarawat/Portfolio-Website/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madhurimarawat%2FPortfolio-Website/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32390050,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T14:34:11.604Z","status":"ssl_error","status_checked_at":"2026-04-28T14:32:37.009Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["about-me","bootstrap","creative","css","designer","digital-resume","education","hobbies","html","html-resume","interests","internships","javascript","portfolio-website","professional-portfolio","profilesection","projects","skills","social-links","user-interface"],"created_at":"2024-11-14T23:16:59.990Z","updated_at":"2026-04-28T16:36:39.338Z","avatar_url":"https://github.com/madhurimarawat.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Portfolio-Website\nThis portfolio showcases my work with creative emoji elements, a harmonious blend of professional colors, and a dedicated section for career highlights, presenting my technical skills.\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/madhurimarawat/Portfolio-Website/blob/main/How_To_Customize.md\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/Sections-10%2B-f5a3d1?style=for-the-badge\u0026labelColor=80e5e7\" /\u003e\n\u003cimg src=\"https://img.shields.io/badge/Components-2%2B-a9d3f5?style=for-the-badge\u0026labelColor=ffe680\" /\u003e\n\u003cimg src=\"https://img.shields.io/badge/Themes-4%2B-f7a8a3?style=for-the-badge\u0026labelColor=f5a3d1\" /\u003e\n\u003cimg src=\"https://img.shields.io/badge/Modes-Light%20%7C%20Dark-80e5e7?style=for-the-badge\u0026labelColor=a9d3f5\" /\u003e\n\u003cimg src=\"https://img.shields.io/badge/Responsive-Yes-ffe680?style=for-the-badge\u0026labelColor=f7a8a3\" /\u003e\n\u003cimg src=\"https://img.shields.io/badge/UI-Card%20Based-f5a3d1?style=for-the-badge\u0026labelColor=80e5e7\" /\u003e\n\u003cimg src=\"https://img.shields.io/badge/Design-Clean%20%26%20Modern-a9d3f5?style=for-the-badge\u0026labelColor=ffe680\" /\u003e\n\u003cimg src=\"https://img.shields.io/badge/Type-Modular-80e5e7?style=for-the-badge\u0026labelColor=f5a3d1\" /\u003e\n\u003cimg src=\"https://img.shields.io/badge/Made%20By-Madhurima%20Rawat-f7a8a3?style=for-the-badge\u0026labelColor=a9d3f5\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003e [!TIP]\n\u003e 🚀 Make this portfolio truly yours in 2 steps:\n\u003e\n\u003e 🛠️ Step 1: Customize it → [How_To_Customize.md](./How_To_Customize.md)  \n\u003e 🌐 Step 2: Deploy it → [How_To_Deploy.md](./How_To_Deploy.md)\n\u003e\n\u003e ✨ Build → Customize → Deploy → Share\n\n\u003ch2\u003eWebsite Design\u003c/h2\u003e\n\n\u003ca href = \"https://madhurimarawat.github.io/Portfolio-Website/\"\u003e![Portfolio Website Snapshot 1](website_snapshots/website_1.png)\u003c/a\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href = \"https://madhurimarawat.github.io/Portfolio-Website/\"\u003e\u003cimg src=\"website_snapshots/website_2.png\" \n    title=\"Portfolio Website Snapshot 2\"  alt=\"Portfolio Website Snapshot 2\" height=\"350px\"\u003e\u003c/a\u003e\u003c/div\u003e\n\n\u003ca href = \"https://madhurimarawat.github.io/Portfolio-Website/\"\u003e![Portfolio Website Snapshot 3](website_snapshots/website_3.png)\u003c/a\u003e\n\n\u003ca href = \"https://madhurimarawat.github.io/Portfolio-Website/\"\u003e\u003cimg src =\"website_snapshots/Social_Icons_Animation.gif\" width = \"100%\" title = \"Portfolio Website Social Links Section\" alt = \"Portfolio Website Social Links Section\"\u003e\u003c/a\u003e\n\n\u003ca href = \"https://madhurimarawat.github.io/Portfolio-Website/\"\u003e\u003cimg src =\"https://github.com/user-attachments/assets/87d676c9-ef78-40a8-9f03-528f871ec44c\" width = \"100%\" title = \"Portfolio Website Themes Section\" alt = \"Portfolio Website Themes Section\"\u003e\u003c/a\u003e\n\n\u003cp align='center'\u003e\n🅳🅰🆁🅺 🅼🅾🅳🅴 🌙🖤 \u003c/p\u003e\n\n\u003ca href = \"https://madhurimarawat.github.io/Portfolio-Website/\"\u003e\u003cimg src =\"website_snapshots/home-page-dark-mode.gif\" width = \"100%\" title = \"Portfolio Website Dark Mode\" alt = \"Portfolio Website Dark Mode\"\u003e\u003c/a\u003e\n\n\u003ca href = \"https://madhurimarawat.github.io/Portfolio-Website/\"\u003e![Portfolio Website Snapshot 5](website_snapshots/website_5.png)\u003c/a\u003e\n\n\u003ca href = \"https://madhurimarawat.github.io/Portfolio-Website/\"\u003e![Career Highlights Snapshot](website_snapshots/website_6.png)\u003c/a\u003e\n\n\u003ca href = \"https://madhurimarawat.github.io/Portfolio-Website/\"\u003e\u003cimg src =\"https://github.com/user-attachments/assets/4c985b45-1a93-4c7e-b25e-44de70adca58\" width = \"100%\" title = \"Career Highlights Social Links\" alt = \"Career Highlights Social Links\"\u003e\u003c/a\u003e\n\n\u003ca href = \"https://madhurimarawat.github.io/Portfolio-Website/\"\u003e\u003cimg src =\"https://github.com/user-attachments/assets/c5fecb28-0c98-4f6b-bb12-b75b731fe563\" width = \"100%\" title = \"Career Highlights Themes Section\" alt = \"Career Highlights Themes Section\"\u003e\u003c/a\u003e\n\n\u003cp align='center'\u003e\n🅳🅰🆁🅺 🅼🅾🅳🅴 🌙🖤 \u003c/p\u003e\n\n\u003ca href = \"https://madhurimarawat.github.io/Portfolio-Website/\"\u003e\u003cimg src =\"website_snapshots/career-highlights-dark-mode.gif\" width = \"100%\" title = \"Career Highlights Website Dark Mode\" alt = \"Career Highlights Website Dark Mode\"\u003e\u003c/a\u003e\n\n## Technology Used 💻\n\n### 🛠 \u0026nbsp;Languages and Tools :\n\u003cp\u003e\n\u003cimg src=\"https://github.com/devicons/devicon/blob/master/icons/css3/css3-plain-wordmark.svg\"  title=\"CSS\" alt=\"CSS\" width=\"40\" height=\"40\"/\u003e\u0026nbsp;\u0026nbsp;\n\u003cimg src=\"https://github.com/devicons/devicon/blob/master/icons/html5/html5-original.svg\" title=\"HTML\" alt=\"HTML\" width=\"40\" height=\"40\"/\u003e\u0026nbsp;\u0026nbsp;\n\u003cimg src=\"https://github.com/devicons/devicon/blob/master/icons/javascript/javascript-original.svg\" title=\"JavaScript\" alt=\"JavaScript\" width=\"40\" height=\"40\"/\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003cimg src=\"https://github.com/devicons/devicon/blob/master/icons/bootstrap/bootstrap-plain-wordmark.svg\"  title=\"Bootstrap\" alt=\"Bootstrap\" width=\"40\" height=\"40\"/\u003e\u0026nbsp;\n\u003c/p\u003e\n\n## Description\n\n- This portfolio showcases a creative blend of emojis to enhance visual appeal and expressiveness.\n- The design features a harmonious blend of professional colors for a polished, attractive look.\n- A dedicated section highlights career achievements, making it easy to see professional milestones.\n- The website is user-friendly, with an intuitive interface that is simple to navigate.\n- Responsive design ensures the portfolio looks great and functions well on all devices and screen sizes.\n- Added a new dropdown for dynamically changing website colors with options for Autumn, Summer, Rainy, and Winter. Upon selection, the website color changes instantly. Refreshing the website restores it to its default color scheme.\n- Added a dynamic wheel animation for the social links section, where each link rotates into the center sequentially. The animation loops continuously, reversing direction after every three links. The central icon and title update with each link. Additionally, I’ve placed the social links logo on the main page and corresponding Font Awesome icons on the career highlights page.\n\n## Directory Structure\n\n```bash\n📁 Portfolio-Website/\n├── index.html                 # 🏠 Main landing page of the portfolio website\n├── career-highlights.html     # 🏆 Page dedicated to career highlights and achievements\n│\n├── 📁 css/                    # 💅 Stylesheets\n│   ├── index.css              # 🎨 Stylesheet for index.html\n│   └── career-highlights.css  # 🏅 Stylesheet for career-highlights.html\n│\n├── 📁 js/                     # 📜 JavaScript files\n│   ├── index.js               # 🎛️ Script for dynamic color changes and navbar adjustments\n│   ├── career-highlights.js   # 👁️‍🗨️ Script for controlling color modes on highlights page\n│   └── section-add.js         # 🧩 Script to dynamically load modular sections into index.html\n│\n├── 📁 images/                 # 🖼️ All images used in the website (logos, project thumbnails, etc.)\n│\n├── 📁 components/             # 🧱 Reusable components (like header.html, footer.html, slider-carousel.html)\n│   ├── header.html            # 🔝 Navigation bar and header section\n│   ├── footer.html            # 🔻 Footer section with social/contact info\n│   └── slider-carousel.html   # 🎞️ Animated slider carousel for landing section\n│\n├── 📁 sections/               # 📦 All content sections loaded dynamically (About, Projects, etc.)\n│   ├── about-me.html          # 👩‍💻 About Me section\n│   ├── education.html         # 🎓 Academic background and degrees\n│   ├── skills.html            # 🛠️ Technical and soft skills list\n│   ├── certifications.html    # 📑 Certifications and credentials\n│   ├── experience.html        # 💼 Work experience and internships\n│   ├── projects.html          # 🧪 Project showcases with descriptions\n│   ├── social-links.html      # 🎡 Section with animated social media wheel\n│   ├── blogs-links.html       # ✍️ Blog post links or guest articles\n│   ├── hobbies-and-interests.html # 🎨 Hobbies, interests, and creative pursuits\n│   └── thank-you.html         # 🙏 Closing message or thank-you note\n│\n├── LICENSE                    # 📜 MIT License\n├── README.md                  # 📘 Documentation file for repository overview, usage, and setup\n```\n\n### Files and Folders\n\n- **index.html**: Main landing page of the portfolio website.\n- **career-highlights.html**: Page dedicated to career highlights and achievements.\n- **css/index.css**: Stylesheet for index.html.\n- **css/career-highlights.css**: Stylesheet for career-highlights.html.\n- **js/index.js**: Script to dynamically change the primary color of the website.\n- **js/career-highlights.js**: Script to manage the visibility of the color switcher dropdown for the career highlights page.\n- **images/**: Folder containing all images used in the website.\n- **LICENSE**: MIT License file.\n- **README.md**: Documentation file for the repository.\n\n---\n\n## Mode of Execution Used  \u003cimg src=\"https://th.bing.com/th?id=OSAAS.67CE744F3AF9AB3181DA21630627453B\u0026w=80\u0026h=80\u0026o=6\u0026dpr=2\u0026pid=5.1\" title=\"Notepad++\" alt=\"Notepad++\" width=\"40\" height=\"40\"\u003e \u003c/a\u003e \u0026nbsp;\u003cimg src=\"https://cdn.freebiesupply.com/logos/large/2x/netlify-logo-png-transparent.png\" title=\"Netlify\" alt=\"Netlify\" width=\"40\" height=\"40\"\u003e\n\u003ch2\u003eNotepad++\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eTo begin, visit the official website \u0026nbsp; \u003ca href=\"https://notepad-plus-plus.org/downloads/\"\u003e\u003cimg src=\"https://th.bing.com/th?id=OSAAS.67CE744F3AF9AB3181DA21630627453B\u0026w=80\u0026h=80\u0026o=6\u0026dpr=2\u0026pid=5.1\" title=\"Notepad++\" alt=\"Notepad++\" width=\"40\" height=\"40\"\u003e \u003c/a\u003e   \u003cbr\u003e\u003cbr\u003e\u003c/li\u003e\n\u003cli\u003eDownload according to the platform being used like Linux, MacOs or Windows.\u003cbr\u003e\u003cbr\u003e\n\u003cli\u003e Follow the setup wizard.\u003cbr\u003e\u003cbr\u003e\u003c/li\u003e\n\u003cli\u003e After setup, we can write code in HTML and also in other languages.\u003cbr\u003e\u003cbr\u003e\u003c/li\u003e\n\u003cli\u003eTo see the output of HTML code open document in any browser.\u003cbr\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n## Hosting With Netlify\n\n1. Visit the official website of Netlify : \u003ca href=\"https://www.netlify.com/\"\u003e\u003cimg src=\"https://cdn.freebiesupply.com/logos/large/2x/netlify-logo-png-transparent.png\" title=\"Netlify\" alt=\"Netlify\" width=\"40\" height=\"40\"\u003e\u003c/a\u003e\n\u003cbr\u003e\u003cbr\u003e\n2. Now make an account with GitHub.\u003cbr\u003e\u003cbr\u003e\n3. Now add all the code in Github repository.\u003cbr\u003e\u003cbr\u003e\n4. Go to netlify and there is an option for new deployment.\u003cbr\u003e\u003cbr\u003e\n5. Link with your Github repository name and make sure you have the index.html file for homepage. If you name your file as index it will directly access it else you have to specify the path.\u003cbr\u003e\u003cbr\u003e\n6. We can also do manual deployment of our website by uploading in netlify manual uploads.\u003cbr\u003e\u003cbr\u003e\n7. If everything went well our website will be deployed on web and you can share the link and access the app from all browsers.\u003cbr\u003e\u003cbr\u003e\n8. Now netlify only supports static website. It does not have a server and it does not support websites with server requirement.\u003cbr\u003e\u003cbr\u003e\n9. We can upload HTML, CSS and JS files in netlify.\n\n## Hosting With GitHub Pages\n\n1. Visit the official website of GitHub Pages: \u003ca href=\"https://pages.github.com/\"\u003e\u003cimg src=\"https://github.com/madhurimarawat/GitHub-Repository-Lister/blob/main/GitHub%20Logo.png\" title=\"GitHub Pages\" alt=\"GitHub Pages\" width=\"40\" height=\"40\"\u003e\u003c/a\u003e\n\u003cbr\u003e\u003cbr\u003e\n2. Make sure you have a GitHub account. If not, create one at [GitHub](https://github.com/).\u003cbr\u003e\u003cbr\u003e\n3. Create a new repository on GitHub and upload your project files (index.html, CSS, JS, etc.).\u003cbr\u003e\u003cbr\u003e\n4. Go to the repository settings by clicking on the \"Settings\" tab.\u003cbr\u003e\u003cbr\u003e\n5. Scroll down to the \"Pages\" section in the settings.\u003cbr\u003e\u003cbr\u003e\n6. Under \"Source,\" select the branch you want to use for GitHub Pages (usually \"main\" or \"master\").\u003cbr\u003e\u003cbr\u003e\n7. If your index.html file is in the root directory of the repository, select the root as the source folder. Otherwise, select the appropriate folder where your index.html is located.\u003cbr\u003e\u003cbr\u003e\n8. Click \"Save\" to publish your site.\u003cbr\u003e\u003cbr\u003e\n9. GitHub Pages will provide a link to your live site. You can share this link and access your site from any browser.\u003cbr\u003e\u003cbr\u003e\n10. GitHub Pages also supports Jekyll, a static site generator, if you want to use it for more advanced site features.\u003cbr\u003e\n\nBy following these steps, you can host your static website using GitHub Pages and Netlify. Both platforms provide easy-to-use interfaces and are great for deploying static websites.\n\n---\n\n## Website Link\n\n\u003cp\u003eI have hosted this Website using \u003ca href=\"https://madhurima-rawat-portfolio.netlify.app/\"\u003eNetlify\u003c/a\u003e  and  \u003ca href = \"https://madhurimarawat.github.io/Portfolio-Website/\"\u003eGithub Pages\u003c/a\u003e. Click on the Link to have a look at my Website.\u003c/p\u003e\n\n---\n## Additional Resources \n\n- For more Frontend Development codes, visit my repository: [Website-Frontend-Development](https://github.com/madhurimarawat/Website-Frontend-Developement).\n\n- The [NameBlock-Designer](https://github.com/madhurimarawat/NameBlock-Designer) project contains the tool I used to create my name in blocks and make it transparent using [Remove.bg](https://www.remove.bg/). This tool generates a transparent PNG image from the given text, where the letters are initially white. If you want the letters to be transparent as well, you can use any background removal tool like Remove.bg for further customization. You can explore and use the NameBlock-Designer tool here: [NameBlock-Designer Live](https://madhurimarawat.github.io/NameBlock-Designer/).\n\n---\n\n## Thanks for Visiting 😄\n\n- Drop a 🌟 if you find this repository useful.\u003cbr\u003e\u003cbr\u003e\n- If you have any doubts or suggestions, feel free to reach me.\u003cbr\u003e\u003cbr\u003e\n📫 How to reach me:  \u0026nbsp; [![Linkedin Badge](https://img.shields.io/badge/-madhurima-blue?style=flat\u0026logo=Linkedin\u0026logoColor=white)](https://www.linkedin.com/in/madhurima-rawat/) \u0026nbsp; \u0026nbsp;\n\u003ca href =\"mailto:rawatmadhurima4@gmail.com\"\u003e\u003cimg src=\"https://github.com/madhurimarawat/Machine-Learning-Using-Python/assets/105432776/b6a0873a-e961-42c0-8fbf-ab65828c961a\" height=35 width=30 title=\"Mail Illustration\" alt=\"Mail Illustration📫\" \u003e \u003c/a\u003e\u003cbr\u003e\u003cbr\u003e\n- **Contribute and Discuss:** Feel free to open \u003ca href= \"https://github.com/madhurimarawat/Portfolio-Website/issues\"\u003eissues 🐛\u003c/a\u003e, submit \u003ca href = \"https://github.com/madhurimarawat/Portfolio-Website/pulls\"\u003epull requests 🛠️\u003c/a\u003e, or start \u003ca href = \"https://github.com/madhurimarawat/Portfolio-Website/discussions\"\u003ediscussions 💬\u003c/a\u003e to help improve this repository!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadhurimarawat%2Fportfolio-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmadhurimarawat%2Fportfolio-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadhurimarawat%2Fportfolio-website/lists"}