body, html {
width: 100%; /* This sets the width of the and elements to 100% of the parent container's width, which, for the element, is the viewport. */
max-width: 100%; /* This ensures that the and cannot be wider than 100% of the viewport's width, which is useful for preventing horizontal scrolling on devices with smaller screens. */
overflow-x: hidden; /* This property hides any content that overflows the element's box on the x-axis (horizontally). It is useful for preventing unwanted horizontal scroll bars from appearing if the content exceeds the viewport's width. */
}
body {
margin: auto;
font-family: Arial, sans-serif;
overflow-x: hidden; /* Hide horizontal scrollbar */
padding-top: 80px; /* Adjust based on navbar's height to prevent content overlap */
background-color: #333;
}
/*nav-bar style*/
/* Base styles for the navbar */
.navbar {
background-color: #000;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5em;
position: fixed;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
z-index: 10; /* Ensures navbar stays above other content */
}
.navbar .logo, .navbar a {
color: white;
text-align: center;
padding: 14px 16px;
font-size: 1.9em; /* Adjust according to your preference */
position: relative; /* Necessary for the hover effect's absolute positioning */
}
/* Specific to the logo's first letter */
.navbar .logo::first-letter {
color: #009cc4;
}
/* Adjusted for hover effect on links */
.navbar a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background-color: #009cc4;
transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
}
.navbar a:hover::after {
width: 100%;
left: 0;
}
.nav-links {
list-style: none;
margin: 0;
padding: 0;
display: flex; /* This replaces the float:right and provides better alignment and spacing */
align-items: center;
}
.nav-links li {
padding: 0 40px; /* Adjusted padding */
}
.nav-links a {
text-decoration: none;
color: #ffffff;
font-size: 1.5em; /* Ensure consistent font size */
}
/* Responsive adjustments for smaller screens */
@media screen and (max-width: 768px) {
.nav-links {
display: none; /* Hide the nav links on smaller screens */
}
.navbar .logo {
margin: auto; /* Center logo when nav-links are not displayed */
}
}
@media screen and (max-width: 600px) {
.navbar, .navbar .logo, .nav-links li {
display: block;
text-align: center; /* Center-align elements for mobile */
}
.nav-links li {
padding: 10px 0; /* Adjust padding for better mobile layout */
}
}
/*nav-bar style*/
/*Home Content*/
/* Base Styles and Animations */
@keyframes gradientAnimation {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Home Content Section */
.home-content {
display: flex;
align-items: center;
justify-content: space-around;
padding: 50px 10%;
background-image: url('MainBackground.jpg');
background-size: cover; /* Changed to 'cover' for better background image handling */
color: white;
min-height: 100vh;
}
/* Text Content */
.text-content {
max-width: 50%;
margin-right: 5%;
}
.text-content h1, .text-content p {
color: #fff;
margin: 20px 0;
}
.text-content h1 {
font-size: 4.5em;
}
.text-content h1 span {
color: #009cc4;
}
.text-content p {
font-size: 30px;
}
/* Image Container */
.image-container img {
border-radius: 50%;
max-width: 300px;
border: 4px solid white;
animation: fadeInUp 1s both 1s;
}
/* Download Button */
.download-btn {
display: inline-block;
padding: 10px 20px;
background-color: #000;
color: #fff;
text-decoration: none;
border: 2px solid #009cc4;
border-radius: 20px;
transition: background-color 0.3s ease, color 0.3s ease;
}
.download-btn:hover {
background-color: #009cc4;
color: #000;
}
/* Unified Fade-in Animation for Text and Image */
.text-content, .image-container img {
animation: fadeInUp 1s both 0.5s;
}
/* Responsive adjustments */
@media screen and (max-width: 768px) {
.home-content {
flex-direction: column; /* Stack text and image vertically */
padding: 20px; /* Reduce padding on smaller screens */
text-align: center; /* Center-align the text */
}
.text-content {
max-width: 100%; /* Allow text to fill the container */
margin-right: 0; /* Remove the margin on the right */
}
.text-content h1 {
font-size: 2.5em; /* Reduce font size for smaller screens */
}
.text-content p {
font-size: 20px; /* Adjust paragraph font size for readability */
}
.image-container {
margin-top: 20px; /* Add space above the image */
}
.image-container img {
max-width: 250px; /* Optionally adjust the image size */
}
}
/* About Me Content Section */
.about-me {
display: flex;
align-items: center;
justify-content: space-around;
padding: 50px 15%;
background-image: url('AdobeStock_427123279.jpeg');
background-size: cover; /* Adjusted for better background handling */
min-height: 100vh;
animation: ease-in 3s;
}
.image-container2 img {
border-radius: 30%;
border: 4px solid white;
}
.about-me-text {
margin: 70px;
border: 2px solid #000;
padding: 20px; /* Adds some space between the content and the border */
background-color: rgba(52, 24, 99, 0.5);
border-radius: 15px;
}
.about-me-text h1 {
font-size: 4.5em;
color: #fff;
margin: 0;
}
.about-me-text p {
color: #fff;
line-height: 1.8;
}
/* Responsive adjustments for the About Me section */
@media screen and (max-width: 768px) {
.about-me {
flex-direction: column; /* Stack elements vertically on smaller screens */
padding: 30px 5%; /* Reduce padding for smaller screens */
}
.image-container2, .about-me-text {
margin: 20px 0; /* Adjust margin for vertical stacking */
}
.about-me-text h1 {
font-size: 3em; /* Reduce the font size for smaller screens */
}
.about-me-text p {
font-size: 1em; /* Adjust the font size for better readability */
}
}
@media screen and (max-width: 480px) {
.about-me-text h1 {
font-size: 2.5em; /* Further reduce the font size for very small screens */
}
.about-me-text p {
font-size: 0.9em; /* Slightly reduce the font size for better readability */
}
.image-container2 img {
max-width: 200px; /* Reduce the image size for very small screens */
}
}
/* Education Section Title */
#education {
display: block;
text-align: center;
font-size: 3.5em;
color: #ffffff;
width: 100%;
margin: 0 auto 30px;
}
/* Main Education Section Styles */
.education {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 20px 5%;
background: linear-gradient(145deg, #081b29, #4b6cb7);
background-size: cover;
color: white;
animation: gradientShift 15s ease infinite;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.5);
margin: 20px auto;
max-width: 800px;
overflow: hidden;
border: 2px solid #ffffff22;
}
/* Styles for Degrees and Certifications Sections */
.degrees, .certifications {
margin: 20px;
border: 2px solid #000;
padding: 20px;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
border-radius: 15px;
width: calc(50% - 40px);
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
transition: transform 0.5s ease, background-color 0.5s ease;
}
.degrees h2, .certifications h2 {
font-size: 2.5em;
text-decoration: underline;
color: #fff;
}
/* Styles for list items and links */
.degrees ul, .certifications ul {
list-style-type: none;
padding: 0;
width: 100%;
text-align: center;
}
.degrees ul li, .certifications li {
margin: 10px 0;
}
.certifications a, .degrees a {
color: #fff;
text-decoration: none;
margin: 5px 0;
}
/* Hover Effects */
.degrees:hover, .certifications:hover {
transform: scale(1.05);
background-color: rgba(255, 255, 255, 0.2);
border-color: #ffffff55;
}
.certifications li a:hover, .degrees ul li:hover {
color: #009cc4;
}
/* Keyframes for the background animation */
@keyframes gradientShift {
0%, 100% {
background-position: 100% 0;
}
50% {
background-position: 0% 100%;
}
}
/* Responsive Adjustments */
@media screen and (max-width: 1024px) {
.degrees, .certifications {
width: 100%;
}
}
/* Base styles for the Experience section with original color enhancements */
.Experience {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 20px;
background: linear-gradient(145deg, #081b29, #4b6cb7); /* Original gradient colors */
background-size: 200% 200%;
color: #fff;
text-align: center;
animation: gradientShift 15s ease infinite;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.5);
margin: 20px auto;
max-width: 800px;
overflow: hidden;
border: 2px solid #ffffff22;
}
/* Keyframes for the background animation */
@keyframes gradientShift {
0%, 100% {
background-position: 100% 0;
}
50% {
background-position: 0% 100%;
}
}
.Experience h1 {
font-size: 3rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 40px;
color: #fff; /* Reverted to original white color for consistency */
}
.Experience div {
margin: 20px 0;
padding: 25px;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
border-radius: 15px;
transition: all 0.5s ease;
border: 1px solid #ffffff33;
}
.Experience div:hover {
transform: scale(1.05);
background-color: rgba(255, 255, 255, 0.2);
border-color: #ffffff55;
}
.Experience h2 {
font-size: 2rem;
margin-bottom: 10px;
color: #fff; /* Maintaining the white color for headings */
}
.Experience h5 {
font-size: 1.4rem;
font-weight: 300;
color: #fff; /* Consistent white color for the dates */
}
/* Responsive adjustments */
@media screen and (max-width: 768px) {
.Experience {
padding: 20px 10px;
}
.Experience h1 {
font-size: 2.2rem;
}
.Experience h2 {
font-size: 1.6rem;
}
.Experience h5 {
font-size: 1.2rem;
}
}
/*Matrix code*/
canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* Ensures canvas is behind other content */
}
/* Update existing section styles to ensure they appear above the canvas */
.education, .Experience {
position: relative;
z-index: 1; /* Ensures these sections appear above the canvas */
}
/* Skills */
/* Animation/CSS for the skills section */
.skills-expertise {
background: linear-gradient(to right, #c2c5c7, #0d2d42); /* Adjusted gradient direction */
background-size: 200% 200%; /* Enlarge background to allow for movement */
color: white; /* White text for better contrast */
animation: gradientAnimation 15s ease infinite; /* Apply the animation */
padding: 40px 5%; /* Adequate padding around the section */
color: #333; /* Dark color for text for better readability */
text-align: left; /* Align text to the left for a clean layout */
}
.skills-expertise h2 {
text-align: center; /* Center-align the section heading */
margin-bottom: 30px; /* Space below the section heading */
color: #ffffff; /* A strong shade of blue for the heading for emphasis */
font-size: 50px;
}
.skill {
margin-bottom: 20px; /* Space between each skill category */
}
.skill p {
margin: 0 0 10px 0; /* Space above and below the paragraph for clarity */
font-size: 18px; /* Slightly larger font size for visibility */
font-weight: bold; /* Bold font weight for emphasis */
color: #ececec;
}
.skill-bar {
background-color: #d0e2f2; /* A very light blue, almost gray, for the skill bar background */
border-radius: 5px; /* Rounded corners for the skill bar */
overflow: hidden; /* Ensures the skill level bar does not overflow */
height: 25px; /* Height of the skill bar for visibility */
}
.skill-level {
width: 0%; /* Start with no fill */
display: block;
height: 100%; /* Ensure it fills the container */
border-radius: 5px; /* Rounded corners on the skill level bar */
transition: width 2s ease; /* Smooth transition for the bar loading */
text-align: right; /* Align the text to the right */
padding-right: 5px; /* Padding inside the skill level bar */
color: white; /* White text color for readability */
line-height: 25px; /* Align text vertically */
}
/* Assigning unique colors to each skill bar based on proficiency */
.skill:nth-of-type(1) .skill-level { background-color: #007bff; } /* SIEM Tools - Blue */
.skill:nth-of-type(2) .skill-level { background-color: #ff5722; } /* Hacking Tools - Deep Orange */
.skill:nth-of-type(3) .skill-level { background-color: #28a745; } /* Windows Tools - Green */
.skill:nth-of-type(4) .skill-level { background-color: #17a2b8; } /* Frameworks - Cyan */
.skill:nth-of-type(5) .skill-level { background-color: #ffc107; } /* Vulnerability Tools - Amber */
.skill:nth-of-type(6) .skill-level { background-color: #dc3545; } /* Programming Tools - Red */
/*Contact*/
#contact {
background-color: #000000;
padding: 30px 0;
text-align: center;
}
#contact h2 {
color: #ffffff;
font-size: 50px;
}
.contact-links {
margin-top: 20px;
}
.contact-links a {
display: inline-block;
margin: 0 10px;
padding: 10px 20px;
border-radius: 30px;
background-color: #007bff;
color: #fff;
text-decoration: none;
transition: background-color 0.3s ease;
font-size: 16px;
font-weight: bold;
}
.contact-links a:hover {
background-color: #0056b3;
color: #fff; /* Adjust text color on hover if necessary */
}
.contact-links a i {
margin-right: 10px;
}
/* Adjust the size of social icons if necessary */
.contact-links a i.fa {
font-size: 20px;
}
/* Footer */
.site-footer {
background-color: #000000; /* Dark blue background */
color: white; /* White text color for contrast */
padding: 20px 5%; /* Padding for spacing */
text-align: center; /* Center-align the content */
}
.footer-content p {
margin: 0 0 10px 0; /* Adjust margins as needed */
}
.social-links {
margin-top: 10px;
}
.social-links a {
color: white; /* Ensures links are white for visibility */
margin: 0 10px; /* Space out the social links */
text-decoration: none; /* Removes underline from links */
transition: color 0.3s ease; /* Smooth transition for hover effect */
}
.social-links a:hover {
color: #a1cbef; /* Light blue color on hover for a subtle effect */
}