+
+
+
+
🏆 GitHub Achievements 🏆
+
+
+
Github
+
+
+
+
🏅 Displaying Achievements 🏅
+
Displaying achievements on your profile is completely optional; by default, they can be seen by anyone viewing your public profile.
+
You can opt out from having achievements displayed on your profile by going to your profile settings.
+
+
📃 Achievement List 📃
+
+
+
+
+ | Badge |
+ Name |
+ How to get |
+ Needed amount |
+
+
+
+
+  |
+ Heart On Your Sleeve |
+ (??? |
+
+
+
+
+ | DEFAULT |
+ BRONZE |
+ SILVER |
+ GOLD |
+
+
+
+
+ |
+  |
+  |
+  |
+
+
+ | (?) |
+ (?) |
+ (?) |
+ (?) |
+
+
+
+ |
+
+
+  |
+ Open Sourcerer |
+ (??? |
+
+
+
+
+ | DEFAULT |
+ BRONZE |
+ SILVER |
+ GOLD |
+
+
+
+
+ |
+  |
+  |
+  |
+
+
+ | (?) |
+ (?) |
+ (?) |
+ (?) |
+
+
+
+ |
+
+
+  |
+ Starstruck |
+ Created a repository that has many stars |
+
+
+
+
+ | DEFAULT |
+ BRONZE |
+ SILVER |
+ GOLD |
+
+
+
+
+ |
+  |
+  |
+  |
+
+
+ | 16 |
+ 128 |
+ 512 |
+ 4096 |
+
+
+
+ |
+
+
+  |
+ Quickdraw |
+ Gitty up!
(closed an issue / pull request within 5 minutes of opening) |
+
+
+
+
+ | DEFAULT |
+
+
+
+
+ |
+
+
+ | 1 |
+
+
+
+ |
+
+
+  |
+ Pair Extraordinaire |
+ Coauthored commits on merged pull request |
+
+
+
+
+ | DEFAULT |
+ BRONZE |
+ SILVER |
+ GOLD |
+
+
+
+
+ |
+  |
+  |
+  |
+
+
+ | 1 |
+ 10 |
+ 24 |
+ 48 |
+
+
+
+ |
+
+
+  |
+ Pull Shark |
+ Opened a pull request that has been merged |
+
+
+
+
+ | DEFAULT |
+ BRONZE |
+ SILVER |
+ GOLD |
+
+
+
+
+ |
+  |
+  |
+  |
+
+
+ | 2 |
+ 16 |
+ 128 |
+ 1024 |
+
+
+
+ |
+
+
+  |
+ Galaxy Brain |
+ Answered a discussion
(got an accepted answer) |
+
+
+
+
+ | DEFAULT |
+ BRONZE |
+ SILVER |
+ GOLD |
+
+
+
+
+ |
+  |
+  |
+  |
+
+
+ | 2 |
+ 8 |
+ 16 |
+ 32 |
+
+
+
+ |
+
+
+  |
+ YOLO |
+ Merged a pull request without a review |
+
+
+
+
+ | DEFAULT |
+
+
+
+
+ |
+
+
+ | 1 |
+
+
+
+ |
+
+
+  |
+ Public Sponsor |
+ Sponsored an open source contributor through GitHub Sponsors |
+
+
+
+
+ | DEFAULT |
+
+
+
+
+ |
+
+
+ | 1 |
+
+
+
+ |
+
+
+
+
+
+
👋 Achievement Skin Tone 👋
+
Some achievements' appearance depends on your Emoji Skin Tone Preference.
+
You can change your preferred Skin Tone by going to appearance settings.
+
+
+
+
+
+
+
+
Starstruck
+
+
+
+
+
+
+
👋
+
👋🏻
+
👋🏼
+
👋🏽
+
👋🏾
+
👋🏿
+
+
+
+
+
+
+
+
Quickdraw
+
+
+
+
+
+
+
👋
+
👋🏻
+
👋🏼
+
👋🏽
+
👋🏾
+
👋🏿
+
+
+
+
+
+
+
+
+
+
+
+
✨ Highlights Badges ✨
+
+
+
+
+ | Badge |
+ Name |
+ How to get |
+
+
+
+
+
+ 
+ 
+ |
+ Pro |
+ Use GitHub Pro |
+
+
+
+ 
+ 
+ |
+ Developer Program Member |
+ Be a registered member of the GitHub Developer Program |
+
+
+
+ 
+ 
+ |
+ Security Bug Bounty Hunter |
+ Helped out hunting down security vulnerabilities at GitHub Security |
+
+
+
+ 
+ 
+ |
+ GitHub Campus Expert |
+ Participate in the GitHub Campus Program |
+
+
+
+ 
+ 
+ |
+ Security advisory credit |
+ Have your security advisory submitted to the GitHub Advisory Database accepted |
+
+
+
+
❌ Badges no longer earnable ❌
+
+
+
+ | Badge |
+ Name |
+ How to get |
+ Needed Amount |
+
+
+
+
+  |
+ Mars 2020 Contributor |
+ Contributed code to a repository used in the Mars 2020 Helicopter Mission |
+
+
+
+
+ | DEFAULT |
+
+
+
+
+ |
+
+
+ | 1 |
+
+
+
+ |
+
+
+  |
+ Arctic Code Vault Contributor |
+ Contributed code to a repository in the 2020 GitHub Archive Program |
+
+
+
+
+ | DEFAULT |
+
+
+
+
+ |
+
+
+ | 1 |
+
+
+
+ |
+
+
+
+
ℹ️ More Information ℹ️
+
+
You can find more information about GitHub Badges under this link.
+
+
+
+
+
+
+
+
Github-Badge
+
Blog
diff --git a/styles.css b/styles.css
index b4a5b426..9d14b0b9 100644
--- a/styles.css
+++ b/styles.css
@@ -531,4 +531,678 @@ body.dark-mode .side-icons .icons:hover{
body.dark-mode .side-icons a{
color: white !important;
+}
+
+
+
+
+body {
+ font-family: "Roboto", sans-serif;
+ background-color: #f0f0f0;
+ color: #333;
+ margin: 0;
+ padding: 0;
+ transition: background-color 0.3s ease, color 0.3s ease;
+ }
+
+ .container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 20px;
+ text-align: center;
+ }
+
+ .main-heading {
+ margin-bottom: 40px;
+ }
+
+ .tags {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+ margin-bottom: 20px;
+ }
+
+ .tag {
+ display: inline-block;
+ margin: 5px;
+ padding: 10px 15px;
+ background-color: #fff;
+ border: 1px solid #ddd;
+ border-radius: 20px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ }
+ .tag:hover{
+ background-color: #ebebeb;
+
+ }
+ .search-bar {
+ margin-bottom: 20px;
+ }
+
+ .search-input {
+ width: 50%;
+ padding: 15px;
+ font-size: 16px;
+ border: 2px solid #ddd;
+ border-radius: 25px;
+ box-shadow: none;
+ transition: border-color 0.3s ease, box-shadow 0.3s ease;
+ }
+
+ .search-input:hover,
+ .search-input:focus {
+ border-color: #aaa;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+ }
+
+ .profiles {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ @keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+ }
+
+ .profile {
+ background-color: #fff;
+ border: 1px solid #ddd;
+ border-radius: 10px;
+ margin: 10px;
+ width: 250px;
+ padding: 15px;
+ margin-top: 30;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+ animation: fadeIn 0.5s ease-out;
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+ }
+
+ .profile:hover {
+ transform: scale(1.05);
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .profile img {
+ max-width: 100%;
+ border-radius: 10px;
+ }
+
+ .profile p {
+ color: #333;
+ }
+
+ .grey-banner {
+ background-color: #333333;
+ color: white;
+ padding: 10px 15px;
+ border-bottom-left-radius: 10px;
+ font-size: 0.8em;
+ font-weight: 500;
+ width: 200px;
+ text-align: center;
+ display: inline-block;
+ margin: 20px auto;
+ cursor: pointer;
+ }
+ .grey-banner:hover {
+ scale: 1.06;
+ transition: all 0.2s;
+ }
+ /* Dark Mode Styles */
+ body.dark-mode {
+ background-color: #000000;
+ color: #f0f0f0;
+ }
+
+ body.dark-mode .tag {
+ background-color: #555;
+ border-color: #444;
+ color: #fff;
+ }
+ body.dark-mode .tag:hover{
+ background-color: #3f3f3f;
+ }
+ body.dark-mode .search-input {
+ background-color: #555;
+ border-color: #444;
+ color: #fff;
+ }
+
+ body.dark-mode .profile {
+ background-color: #444;
+ border-color: #555;
+ }
+
+ body.dark-mode .profile p {
+ color: #f0f0f0;
+ }
+
+ /* Switch Label */
+ .toggle-switch label {
+ position: relative;
+ top: 0px;
+ left: 7px;
+ width: 55px; /* Adjust width to fit switch button and icons */
+ height: 30px; /* Adjust height if needed */
+ background-color: #ccc;
+ border-radius: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 5px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ transition: background-color 0.5s ease;
+ }
+
+ /* Switch Button */
+ .switch-button {
+ position: absolute;
+ top: 2px;
+ left: 3px;
+ width: 27px;
+ height: 27px;
+ background-color: #fff;
+ border-radius: 50%;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+ transition: transform 0.5s ease, background-color 0.5s ease;
+ }
+
+ /* Icon Styles */
+ .sun-icon,
+ .moon-icon {
+ user-select: none;
+ font-size: 25px;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ transition: opacity 0.5s ease, color 0.5s ease;
+ }
+
+ /* Sun Icon */
+ .sun-icon {
+ color: #f39c12;
+ left: 1px; /* Position from the left edge */
+ opacity: 1; /* Initially visible */
+ }
+
+ /* Moon Icon */
+ .moon-icon {
+ color: #bdc3c7;
+ right: 1px; /* Position from the right edge */
+ opacity: 0; /* Initially hidden */
+ }
+
+ /* Hide the checkbox itself */
+ #theme-toggle {
+ opacity: 0;
+ position: absolute;
+ width: 0;
+ height: 0;
+ }
+
+
+ /* Checkbox Checked State */
+ #theme-toggle:checked + label {
+ background-color: #555;
+ }
+
+ #theme-toggle:checked + label .sun-icon {
+ opacity: 0; /* Hide sun icon when checked */
+ }
+
+ #theme-toggle:checked + label .moon-icon {
+ opacity: 1; /* Show moon icon when checked */
+ }
+
+ #theme-toggle:checked + label .switch-button {
+ transform: translateX(30px); /* Adjust to fit switch width */
+ background-color: black;
+ }
+
+ body.dark-mode .toggle-label {
+ color: #f0f0f0;
+ }
+
+ .navbar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 20px;
+ background-color: #fff;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ }
+
+ .navbar-left {
+ display: flex;
+ align-items: center;
+ }
+
+ .navbar-icon {
+ width: 30px;
+ height: 30px;
+ margin-right: 10px;
+ }
+
+ .navbar-text {
+ font-size: 18px;
+ font-weight: bold;
+ }
+
+ .navbar-right {
+ display: flex;
+ align-items: center;
+ }
+
+ .navbar-link {
+ text-decoration: none;
+ color: #333;
+ font-size: 16px;
+ padding: 5px 10px;
+ border-radius: 5px;
+ transition: background-color 0.3s ease;
+ margin-right: 15px;
+ }
+
+ .navbar-link:hover {
+ background-color: #c5c5c5;
+ }
+
+ .toggle-switch {
+ margin-left: 5px;
+ }
+
+ /* Dark mode adjustments */
+ body.dark-mode .navbar {
+ background-color: #333;
+ color: #f0f0f0;
+ }
+
+ body.dark-mode .navbar-link {
+ color: #f0f0f0;
+ }
+
+ body.dark-mode .navbar-link:hover {
+ background-color: #555;
+ }
+
+ .footer-2 {
+ background-color: #fff;
+ margin-top: 80px;
+ }
+
+ .footer-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 1rem;
+ }
+
+ .footer-content {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ padding: 2rem 0;
+ }
+
+ .footer-info {
+ flex: 0 1 200px;
+ margin-top: 2rem;
+ margin-right: 2rem;
+ }
+
+ .footer-links {
+ flex: 1 1 auto;
+ display: flex;
+ justify-content: flex-start;
+ max-width: 500px;
+ gap: 50px;
+ }
+
+ .footer-description {
+ flex: 1 1 300px;
+ max-width: 400px;
+ }
+
+ .footer-logo {
+ max-width: 100%;
+ height: auto;
+ cursor: pointer;
+ }
+
+ .footer-section {
+ margin-right: 3rem;
+ }
+
+ .footer-heading {
+ font-size: 1.125rem;
+ font-weight: bold;
+ text-transform: uppercase;
+ margin-bottom: 1rem;
+ }
+
+ .footer-link {
+ display: block;
+ color: #000;
+ text-decoration: none;
+ margin-bottom: 0.5rem;
+ }
+
+ .footer-link:hover {
+ text-decoration: underline;
+ }
+
+ .footer-description h5 {
+ font-size: 1rem;
+ font-weight: normal;
+ margin-bottom: 1rem;
+ }
+
+ .footer-link:hover{
+ display: inline-block;
+ text-decoration: underline;
+ }
+
+ .footer-description h5 {
+ font-size: 1rem;
+ font-weight: normal;
+ margin-bottom: 1rem;
+ }
+
+ .footer-button {
+ display: inline-block;
+ background-color: #000;
+ color: #fff;
+ padding: 0.5rem 1rem;
+ border-radius: 0.25rem;
+ text-decoration: none;
+ transition: background-color 0.3s;
+ }
+
+ .footer-button:hover {
+ background-color: #333;
+ }
+
+ .footer-bottom {
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ padding: 1rem 0;
+ }
+
+ .footer-copyright {
+ text-align: center;
+ font-size: 0.875rem;
+ }
+
+ /* Dark mode styles */
+ body.dark-mode .footer-2 {
+ background: #333;
+ }
+
+ body.dark-mode .footer-link{
+ color: #fff;
+ }
+
+ body.dark-mode .footer-info img{
+ filter: brightness(0) invert(1) ;
+ }
+
+ body.dark-mode .footer-button {
+ background-color: #fff;
+ color: #000;
+ }
+
+ body.dark-mode .footer-button:hover {
+ background-color: #e0e0e0;
+ }
+
+ /* Responsive adjustments */
+@media (max-width: 768px) {
+ .footer-content {
+ flex-direction: column;
+ }
+.footer-links{
+ gap: 0px !important;
+}
+ .footer-info, .footer-links, .footer-description {
+ width: 100%;
+ margin-bottom: 2rem;
+ }
+
+ .footer-links {
+ flex-direction: column;
+ margin-bottom: 10px !important;
+ }
+
+
+ .footer-section {
+ margin-right: 0;
+ /* margin-bottom: 1rem; */
+ }
+ .footer-heading{margin-top: 25px !important;}
+ .footer-info{
+ flex: 0 1;
+ margin-bottom: 10px;
+ }.footer-description{
+ flex: 1 1;
+ margin-bottom: 0px !important;
+ }
+
+}
+
+.img-container {
+ height: 250px; /* Set the height of the container */
+ width: 100%; /* Adjust width if necessary */
+ overflow: hidden;
+ position: relative;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+}
+
+.img-container::-webkit-scrollbar {
+ width: 0;
+ height: 0;
+}
+
+.scroll-on-hover {
+ height: 250px;
+ width: 100%;
+ overflow: hidden;
+ position: relative;
+}
+
+.scroll-on-hover img {
+ transition: transform 0.75s ease-in-out;
+}
+
+/* Base styles */
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ color: #333;
+ margin: 0;
+ padding: 0;
+ line-height: 1.6;
+}
+
+.wrapper {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+ background: #fff;
+ border-radius: 8px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.title {
+ text-align: center;
+ font-size: 3em;
+ font-weight: bold;
+ color: #f67621;
+ margin-bottom: 20px;
+ text-decoration: underline;
+ text-underline-offset: 8px;
+}
+
+/* Chrono component styles */
+.chrono {
+ margin: 0 auto;
+ width: 100%;
+}
+
+.event-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.event {
+ background-color: #f67621;
+ color: white;
+ border-radius: 8px;
+ margin: 20px 0;
+ padding: 20px;
+ max-width: 600px;
+ text-align: center;
+}
+
+.event img {
+ width: 100%;
+ max-width: 600px;
+ height: auto;
+ border-radius: 8px;
+}
+
+.event figcaption {
+ font-size: 2em;
+ font-weight: bold;
+ margin-top: 10px;
+}
+
+.event p {
+ font-size: 1em;
+ margin: 10px 0;
+}
+
+.event .link {
+ color: #fff;
+ font-size: 1.2em;
+ font-weight: bold;
+ text-decoration: none;
+ border-bottom: 2px solid #fff;
+}
+
+.event .link:hover {
+ text-decoration: underline;
+}
+
+/* Dark mode styles */
+body.theme-dark {
+ background-color: #121212;
+ color: #e0e0e0;
+}
+
+body.theme-dark .wrapper {
+ background: #1e1e1e;
+}
+
+body.theme-dark .title {
+ color: #f67621;
+}
+
+body.theme-dark .event {
+ background-color: #474747;
+}
+
+body.theme-dark .event .link {
+ color: #f67621;
+ border-bottom: 2px solid #f67621;
+}
+
+body.theme-dark .container{
+ background-color: black !important;
+}
+body.theme-dark .center {
+ background-color: black !important;
+}
+/* Light Mode Styles */
+.darkmodeimg {
+ display: none;
+}
+
+/* Dark Mode Styles */
+.dark-mode .darkmodeimg {
+ display: block !important;
+}
+.lightmodeimg{
+ display: block;
+}
+.dark-mode .lightmodeimg {
+ display: none !important;
+}
+.dark-mode .container h1,.dark-mode .container h2{
+ color: white !important;
+}
+.table-container {
+ width: 100% !important; /* Set width to 90% of the viewport width */
+ overflow-x: auto; /* Enable horizontal scrolling */
+ margin: 0 auto; /* Center the container */
+}
+
+.header, .row {
+ display: flex;
+
+ flex-wrap: wrap; /* Prevent wrapping */
+}
+
+.cell {
+ flex: auto; /* Allow cells to expand and fill the row */
+ padding: 8px;
+ border: 1px solid #ddd; /* Add border */
+ text-align: left; /* Align text to the left */
+ /* min-width: 100px; */
+}
+
+.header {
+ background-color: #f2f2f2; /* Light gray background for header */
+ font-weight: bold;
+}
+
+.inner-table {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+}
+
+.inner-table .header, .inner-table .rows {
+ display: flex;
+ flex-wrap: wrap; /* Prevent wrapping */
+}
+
+.inner-table .header .cell {
+ flex: auto !important;
+ background-color: #f2f2f2; /* Light gray background for inner table header */
+}
+
+.inner-table .rows {
+ overflow-x: auto; /* Allow horizontal scrolling */
+}
+
+.inner-table .row {
+ display: flex;
+ flex-wrap: nowrap; /* Prevent wrapping */
+}
+
+.inner-table .row .cell {
+ flex: 1;
+ border: 1px solid #ddd; /* Add border */
+}
+.dark-mode .header,.dark-mode .cell{
+ background-color: black !important;
}
\ No newline at end of file
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+