-
-
-
-
Btech
-
computer science
-
- Pursuing Btech degree under kerala technical university . College M Dasan Institute of technology ulliyer kozhikode. Curently in 3rd Year.
+
+
+
+
Rithin Lehan
+
Full Stack Developer
+
+ Passionate software developer with expertise in .NET, Angular, React
+ Native, and cloud technologies. Currently working onsite in Qatar,
+ building scalable solutions and driving digital innovation.
-
-
-
HSE
-
St Joseph Boys HSS CLT
-
completed 12th from St joseph boys HSS in computer science branch. 84% in Higher secondary examination
-
-
-
Skills
-
Python
-
Created various projects using python libraries such as open-cv , scapy and more. And also works on several open source APIs. Created whatsapp and telegram bot.
-
-
-
Skills
-
Ethical Hacking
-
Have a great experience in using various linux distros like debian etc. Worked on Acunetix , metasploit , wireshark and more professional tools.
-
-
-
Skills
-
Backend devolopment
-
Php larvel framework . mysql and mariadb . Crteated a chatting website using php .
-
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
-
+
+
+
diff --git a/resume.html b/resume.html
new file mode 100644
index 0000000..beac619
--- /dev/null
+++ b/resume.html
@@ -0,0 +1,112 @@
+
+
+
+
+
+
Rithin Lehan - Resume
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Resume Preview
+
If the PDF doesn't load properly, you can:
+
+
+
+
+
+
+
+
+
+
+
diff --git a/resume.js b/resume.js
new file mode 100644
index 0000000..779a050
--- /dev/null
+++ b/resume.js
@@ -0,0 +1,143 @@
+$(document).ready(function () {
+ const pdfViewer = $("#pdf-viewer");
+ const loading = $("#loading");
+ const fallback = $("#pdf-fallback");
+
+ // Handle PDF loading
+ pdfViewer.on("load", function () {
+ loading.hide();
+ pdfViewer.show();
+ console.log("PDF loaded successfully");
+ });
+
+ pdfViewer.on("error", function () {
+ loading.hide();
+ fallback.show();
+ console.log("PDF failed to load, showing fallback");
+ });
+
+ // Timeout fallback if PDF doesn't load within 10 seconds
+ setTimeout(function () {
+ if (pdfViewer.is(":hidden") && loading.is(":visible")) {
+ loading.hide();
+ fallback.show();
+ console.log("PDF loading timeout, showing fallback");
+ }
+ }, 10000);
+
+ // Back to top button
+ $(window).scroll(function () {
+ if ($(window).scrollTop() > 300) {
+ $("#backToTop").addClass("visible");
+ } else {
+ $("#backToTop").removeClass("visible");
+ }
+ });
+
+ $("#backToTop").click(function () {
+ $("html, body").animate({ scrollTop: 0 }, 300);
+ });
+});
+
+// Print function
+function printResume() {
+ window.print();
+}
+
+// Share function
+function shareResume() {
+ if (navigator.share) {
+ navigator
+ .share({
+ title: "Rithin Lehan - Resume",
+ text: "Check out my resume - Full Stack .NET Developer",
+ url: window.location.href,
+ })
+ .then(() => {
+ console.log("Resume shared successfully");
+ })
+ .catch((error) => {
+ console.log("Error sharing resume:", error);
+ fallbackShare();
+ });
+ } else {
+ fallbackShare();
+ }
+}
+
+function fallbackShare() {
+ // Copy URL to clipboard
+ navigator.clipboard
+ .writeText(window.location.href)
+ .then(() => {
+ alert("Resume URL copied to clipboard!");
+ })
+ .catch(() => {
+ // Fallback for older browsers
+ const textArea = document.createElement("textarea");
+ textArea.value = window.location.href;
+ document.body.appendChild(textArea);
+ textArea.select();
+ document.execCommand("copy");
+ document.body.removeChild(textArea);
+ alert("Resume URL copied to clipboard!");
+ });
+}
+
+// Fullscreen function
+function toggleFullscreen() {
+ const pdfViewer = document.getElementById("pdf-viewer");
+
+ if (!document.fullscreenElement) {
+ if (pdfViewer.requestFullscreen) {
+ pdfViewer.requestFullscreen();
+ } else if (pdfViewer.mozRequestFullScreen) {
+ pdfViewer.mozRequestFullScreen();
+ } else if (pdfViewer.webkitRequestFullscreen) {
+ pdfViewer.webkitRequestFullscreen();
+ } else if (pdfViewer.msRequestFullscreen) {
+ pdfViewer.msRequestFullscreen();
+ }
+ } else {
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen();
+ } else if (document.webkitExitFullscreen) {
+ document.webkitExitFullscreen();
+ } else if (document.msExitFullscreen) {
+ document.msExitFullscreen();
+ }
+ }
+}
+
+// Alternative PDF loading method if embed fails
+function loadPDFAlternative() {
+ const container = document.querySelector(".pdf-container");
+ const iframe = document.createElement("iframe");
+ iframe.src = "rithin.pdf";
+ iframe.className = "pdf-viewer";
+ iframe.style.display = "block";
+
+ // Replace the embed with iframe
+ const embed = document.getElementById("pdf-viewer");
+ container.replaceChild(iframe, embed);
+
+ document.getElementById("loading").style.display = "none";
+}
+
+// Try alternative loading method if main method fails
+window.addEventListener("load", function () {
+ setTimeout(function () {
+ const loading = document.getElementById("loading");
+ const pdfViewer = document.getElementById("pdf-viewer");
+
+ if (
+ loading.style.display !== "none" &&
+ pdfViewer.style.display === "none"
+ ) {
+ console.log("Trying alternative PDF loading method...");
+ loadPDFAlternative();
+ }
+ }, 8000);
+});
\ No newline at end of file
diff --git a/rithin.pdf b/rithin.pdf
new file mode 100644
index 0000000..3562036
Binary files /dev/null and b/rithin.pdf differ
diff --git a/script.js b/script.js
index b3bc8c0..8f3a469 100644
--- a/script.js
+++ b/script.js
@@ -1,35 +1,157 @@
-$(document).ready(function(){
-
- $('#menu').click(function(){
- $(this).toggleClass('fa-times');
- $('header').toggleClass('toggle');
+$(document).ready(function () {
+ // Mobile menu toggle
+ $("#mobile-menu").click(function () {
+ $(".nav-links").toggleClass("active");
});
- $(window).on('scroll load',function(){
+ // Navbar scroll effect
+ $(window).scroll(function () {
+ if ($(window).scrollTop() > 50) {
+ $("#navbar").addClass("scrolled");
+ } else {
+ $("#navbar").removeClass("scrolled");
+ }
- $('#menu').removeClass('fa-times');
- $('header').removeClass('toggle');
+ // Update active nav link
+ let scrollPos = $(window).scrollTop() + 100;
+ $(".nav-links a").each(function () {
+ let href = $(this).attr("href");
+ if (href.startsWith("#")) {
+ let section = $(href);
+ if (section.length) {
+ let sectionTop = section.offset().top;
+ let sectionBottom = sectionTop + section.outerHeight();
- if($(window).scrollTop() > 0){
- $('.top').show();
- }else{
- $('.top').hide();
- }
+ if (scrollPos >= sectionTop && scrollPos < sectionBottom) {
+ $(".nav-links a").removeClass("active");
+ $(this).addClass("active");
+ }
+ }
+ }
+ });
+ // Fade in animation
+ $(".fade-in").each(function () {
+ let elementTop = $(this).offset().top;
+ let windowBottom = $(window).scrollTop() + $(window).height() - 100;
+
+ if (elementTop < windowBottom) {
+ $(this).addClass("visible");
+ }
+ });
+
+ // Scroll progress indicator
+ const scrollTop = $(window).scrollTop();
+ const docHeight = $(document).height() - $(window).height();
+ const scrollPercent = (scrollTop / docHeight) * 100;
+ $(".scroll-progress").css("width", scrollPercent + "%");
});
- $('a[href*="#"]').on('click',function(e){
+ // Smooth scrolling
+ $('a[href^="#"]').on("click", function (e) {
e.preventDefault();
- $('html, body').animate({
+ let target = this.hash;
+ let $target = $(target);
+
+ if ($target.length) {
+ $("html, body").animate(
+ {
+ scrollTop: $target.offset().top - 80,
+ },
+ 600,
+ "swing"
+ );
+ }
+ });
+
+ // Create floating particles
+ function createParticles() {
+ const particlesContainer = $(".particles");
+ const particleCount = 50;
- scrollTop : $($(this).attr('href')).offset().top,
+ for (let i = 0; i < particleCount; i++) {
+ const particle = $('
');
+ particle.css({
+ left: Math.random() * 100 + "%",
+ top: Math.random() * 100 + "%",
+ animationDelay: Math.random() * 6 + "s",
+ animationDuration: Math.random() * 3 + 3 + "s",
+ });
+ particlesContainer.append(particle);
+ }
+ }
- },
- 500,
- 'linear'
- );
+ // Initialize particles
+ createParticles();
- });
+ // Contact form submission
+ // $("form").on("submit", function (e) {
+ // e.preventDefault();
+
+ // // Get form data
+ // const formData = {
+ // name: $('input[name="name"]').val(),
+ // email: $('input[name="email"]').val(),
+ // subject: $('input[name="subject"]').val(),
+ // message: $('textarea[name="message"]').val(),
+ // };
+ // // Simple validation
+ // if (!formData.name || !formData.email || !formData.message) {
+ // alert("Please fill in all required fields.");
+ // return;
+ // }
+
+ // // Simulate form submission
+ // const submitBtn = $(this).find('button[type="submit"]');
+ // const originalText = submitBtn.text();
+
+ // submitBtn.text("Sending...").prop("disabled", true);
+
+ // // Simulate API call
+ // setTimeout(() => {
+ // alert("Thank you for your message! I'll get back to you soon.");
+ // this.reset();
+ // submitBtn.text(originalText).prop("disabled", false);
+ // }, 2000);
+ // });
+
+ // Trigger initial fade-in animation
+ setTimeout(() => {
+ $(".fade-in").each(function () {
+ let elementTop = $(this).offset().top;
+ let windowBottom = $(window).scrollTop() + $(window).height();
+
+ if (elementTop < windowBottom) {
+ $(this).addClass("visible");
+ }
+ });
+ }, 100);
+
+ // Add typing effect to hero title
+ function typeWriter(element, text, speed = 100) {
+ let i = 0;
+ element.text("");
+
+ function type() {
+ if (i < text.length) {
+ element.text(element.text() + text.charAt(i));
+ i++;
+ setTimeout(type, speed);
+ }
+ }
+ type();
+ }
+
+ // Initialize typing effect after a short delay
+ setTimeout(() => {
+ typeWriter($(".hero-title"), "Rithin Lehan", 150);
+ }, 1000);
+
+ // Add scroll progress indicator
+ $("body").prepend(
+ '
'
+ );
});
+
diff --git a/style.css b/style.css
index 2d9a562..5bd042b 100644
--- a/style.css
+++ b/style.css
@@ -1,464 +1,1008 @@
-@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600&display=swap');
+:root {
+ --primary-color: #00d4ff;
+ --secondary-color: #0099cc;
+ --accent-color: #ff6b35;
+ --bg-dark: #0a0a0a;
+ --bg-card: #1a1a1a;
+ --bg-hover: #2a2a2a;
+ --text-primary: #ffffff;
+ --text-secondary: #b0b0b0;
+ --text-muted: #888888;
+ --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+ --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.3);
+}
-:root{
- --yellow:#13c1e4;
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
}
-*{
- font-family: 'Nunito', sans-serif;
- margin:0; padding:0;
- box-sizing: border-box;
- text-decoration: none;
- outline: none; border:none;
- text-transform: capitalize;
- transition: all .2s linear;
+html {
+ scroll-behavior: smooth;
+ font-size: 62.5%;
}
-*::selection{
- background:var(--yellow);
- color:rgb(9, 1, 42);
+body {
+ font-family: "Inter", sans-serif;
+ background: var(--bg-dark);
+ color: var(--text-primary);
+ line-height: 1.6;
+ overflow-x: hidden;
}
-html{
- font-size: 62.5%;
- overflow-x: hidden;
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+ width: 8px;
}
-html::-webkit-scrollbar{
- width:1.4rem;
+::-webkit-scrollbar-track {
+ background: var(--bg-dark);
}
-html::-webkit-scrollbar-track{
- background:rgb(0, 10, 36);
+::-webkit-scrollbar-thumb {
+ background: var(--primary-color);
+ border-radius: 4px;
}
-html::-webkit-scrollbar-thumb{
- background:var(--yellow);
+/* Header */
+.header {
+ background: var(--bg-card);
+ padding: 2rem 0;
+ box-shadow: var(--shadow-lg);
+ position: sticky;
+ top: 0;
+ z-index: 1000;
}
-body{
- background:#111;
- overflow-x: hidden;
- padding-left: 35rem;
+.header-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 2rem;
}
-section{
- min-height: 100vh;
- padding:1rem;
+.logo {
+ font-size: 2.4rem;
+ font-weight: 700;
+ color: var(--primary-color);
+ text-decoration: none;
}
-.btn{
- padding:.7rem 3rem;
- background:#333;
- color:#fff;
- cursor: pointer;
- margin-top: 1rem;
- font-size: 2rem;
- border-radius: 5rem;
+.header-actions {
+ display: flex;
+ gap: 2rem;
+ align-items: center;
}
-.btn i{
- padding:0 .5rem;
- font-size: 1.8rem;
+.btn {
+ padding: 1.2rem 2.4rem;
+ border: none;
+ border-radius: 50px;
+ font-size: 1.4rem;
+ font-weight: 600;
+ text-decoration: none;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.8rem;
}
-.btn:hover{
- background:var(--yellow);
+.btn-primary {
+ background: var(--gradient-3);
+ color: white;
+ box-shadow: var(--shadow-lg);
}
-.heading{
- text-align: center;
- margin:0 6rem;
- font-size: 4rem;
- padding:1rem;
- border-bottom: .1rem solid #fff4;
- color:#fff;
+.btn-secondary {
+ background: transparent;
+ color: var(--primary-color);
+ border: 2px solid var(--primary-color);
}
-.heading span{
- color:var(--yellow);
+.btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);
}
-header{
- position: fixed;
- top:0; left:0;
- z-index: 1000;
- height:100%;
- width:35rem;
- background:#1a1a1a;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-flow: column;
- text-align: center;
+.btn-secondary:hover {
+ background: var(--primary-color);
+ color: white;
}
-header .user img{
- height:17rem;
- width:17rem;
- border-radius: 50%;
- object-fit: cover;
- margin-bottom: 1rem;
- border:.7rem solid var(--yellow);
+/* Main Content */
+.main-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 4rem 2rem;
}
-header .user .name{
- font-size: 3.5rem;
- color:#fff;
+.resume-header {
+ text-align: center;
+ margin-bottom: 4rem;
}
-header .user .post{
- font-size: 2rem;
- color:#eee;
+.resume-title {
+ font-size: 3.6rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
+ background: linear-gradient(
+ 135deg,
+ var(--primary-color) 0%,
+ var(--accent-color) 100%
+ );
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
}
-header .navbar{
- width:100%;
+.resume-subtitle {
+ font-size: 1.8rem;
+ color: var(--text-secondary);
+ margin-bottom: 2rem;
}
-header .navbar ul{
- list-style: none;
- padding:1rem 3rem;
+.resume-actions {
+ display: flex;
+ gap: 2rem;
+ justify-content: center;
+ flex-wrap: wrap;
+ margin-bottom: 4rem;
}
+/* PDF Viewer Container */
+.pdf-container {
+ background: var(--bg-card);
+ border-radius: 20px;
+ padding: 2rem;
+ box-shadow: var(--shadow-lg);
+ border: 1px solid rgba(0, 212, 255, 0.1);
+}
-header .navbar ul li a{
- display: block;
- padding:1rem;
- margin:1.5rem 0;
- background:#333;
- color:#fff;
- font-size: 2rem;
- border-radius: 5rem;
+.pdf-viewer {
+ width: 100%;
+ height: 80vh;
+ border: none;
+ border-radius: 15px;
+ background: white;
}
-header .navbar ul li a:hover{
- background:var(--yellow);
+.pdf-fallback {
+ display: none;
+ text-align: center;
+ padding: 4rem;
+ color: var(--text-secondary);
}
-#menu{
- position: fixed;
- top:2rem; right:2rem;
- background:#333;
- color:#fff;
- cursor: pointer;
- font-size: 2.5rem;
- padding:1rem 1.5rem;
- z-index: 1000;
- display: none;
+.pdf-fallback h3 {
+ font-size: 2.4rem;
+ margin-bottom: 2rem;
+ color: var(--primary-color);
+}
+
+.pdf-fallback p {
+ font-size: 1.6rem;
+ margin-bottom: 3rem;
}
-.home{
- display: flex;
+/* Mobile-specific download button */
+.mobile-download {
+ display: none;
+}
+
+@media (max-width: 768px) {
+ .mobile-download {
+ display: inline-flex;
+ }
+ .pdf-viewer {
+ display: none !important;
+ }
+ .pdf-fallback {
+ display: block;
+ }
+}
+
+/* Loading Spinner */
+.loading-spinner {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 200px;
+}
+
+.spinner {
+ width: 50px;
+ height: 50px;
+ border: 4px solid rgba(0, 212, 255, 0.1);
+ border-left: 4px solid var(--primary-color);
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+/* Back to Top Button */
+.back-to-top {
+ position: fixed;
+ bottom: 2rem;
+ right: 2rem;
+ width: 50px;
+ height: 50px;
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ border-radius: 50%;
+ font-size: 2rem;
+ cursor: pointer;
+ opacity: 0;
+ visibility: hidden;
+ transition: all 0.3s ease;
+ z-index: 1000;
+}
+
+.back-to-top.visible {
+ opacity: 1;
+ visibility: visible;
+}
+
+.back-to-top:hover {
+ transform: translateY(-3px);
+ box-shadow: var(--shadow-lg);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+ html {
+ font-size: 55%;
+ }
+
+ .header-container {
+ flex-direction: column;
+ gap: 2rem;
+ text-align: center;
+ }
+
+ .header-actions {
+ flex-direction: column;
+ width: 100%;
+ }
+
+ .resume-actions {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .btn {
+ width: 100%;
+ max-width: 300px;
justify-content: center;
- flex-flow: column;
- padding:0 15rem;
+ }
+
+ .pdf-viewer {
+ height: 60vh;
+ }
}
-.home h3{
- font-size: 2.5rem;
- color:#fff;
+@media (max-width: 480px) {
+ html {
+ font-size: 50%;
+ }
+
+ .main-content {
+ padding: 2rem 1rem;
+ }
+
+ .pdf-container {
+ padding: 1rem;
+ }
}
-.home h1{
- font-size:5rem;
- color:#fff;
+/* Print Styles */
+@media print {
+ .header,
+ .resume-header,
+ .resume-actions,
+ .back-to-top {
+ display: none;
+ }
+
+ .pdf-container {
+ box-shadow: none;
+ border: none;
+ background: white;
+ }
+}
+
+/* Animated Background */
+.animated-bg {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+ background: radial-gradient(
+ circle at 20% 80%,
+ rgba(0, 212, 255, 0.1) 0%,
+ transparent 50%
+ ),
+ radial-gradient(
+ circle at 80% 20%,
+ rgba(255, 107, 53, 0.1) 0%,
+ transparent 50%
+ ),
+ radial-gradient(
+ circle at 40% 40%,
+ rgba(102, 126, 234, 0.1) 0%,
+ transparent 50%
+ );
+}
+
+.particles {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+.particle {
+ position: absolute;
+ width: 2px;
+ height: 2px;
+ background: var(--primary-color);
+ opacity: 0.5;
+ animation: float 6s ease-in-out infinite;
+}
+
+@keyframes float {
+ 0%,
+ 100% {
+ transform: translateY(0px) rotate(0deg);
+ }
+ 50% {
+ transform: translateY(-20px) rotate(180deg);
+ }
+}
+
+/* Navigation */
+nav {
+ position: fixed;
+ top: 0;
+ width: 100%;
+ background: rgba(26, 26, 26, 0.9);
+ backdrop-filter: blur(10px);
+ z-index: 1000;
+ padding: 1rem 0;
+ transition: all 0.3s ease;
+}
+
+nav.scrolled {
+ background: rgba(10, 10, 10, 0.95);
+ box-shadow: var(--shadow-lg);
+}
+
+.nav-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 2rem;
+}
+
+.logo {
+ font-size: 2.4rem;
+ font-weight: 700;
+ color: var(--primary-color);
+ text-decoration: none;
+}
+
+.nav-links {
+ display: flex;
+ list-style: none;
+ gap: 2rem;
+}
+
+.nav-links a {
+ color: var(--text-secondary);
+ text-decoration: none;
+ font-size: 1.6rem;
+ font-weight: 500;
+ transition: all 0.3s ease;
+ position: relative;
+}
+
+.nav-links a:hover,
+.nav-links a.active {
+ color: var(--primary-color);
+}
+
+.nav-links a::after {
+ content: "";
+ position: absolute;
+ bottom: -5px;
+ left: 0;
+ width: 0;
+ height: 2px;
+ background: var(--primary-color);
+ transition: width 0.3s ease;
+}
+
+.nav-links a:hover::after,
+.nav-links a.active::after {
+ width: 100%;
+}
+
+.mobile-menu {
+ display: none;
+ background: none;
+ border: none;
+ color: var(--text-primary);
+ font-size: 2.4rem;
+ cursor: pointer;
}
-.home h1 span{
- color:var(--yellow);
+/* Hero Section */
+.hero {
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: 8rem 2rem;
+ position: relative;
}
-.home p{
- font-size:2rem;
- color:#eee;
- padding: 1rem 0;
+.hero-content {
+ max-width: 800px;
+ z-index: 2;
+}
+
+.hero-title {
+ font-size: clamp(3rem, 8vw, 6rem);
+ font-weight: 700;
+ margin-bottom: 2rem;
+ background: linear-gradient(
+ 135deg,
+ var(--primary-color) 0%,
+ var(--accent-color) 100%
+ );
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ animation: fadeInUp 1s ease-out;
}
-.about .row{
- display: flex;
- align-items: center;
- justify-content: center;
- flex-wrap: wrap;
- padding:1rem 0;
+.hero-subtitle {
+ font-size: 2.4rem;
+ color: var(--text-secondary);
+ margin-bottom: 1rem;
+ font-weight: 300;
+ animation: fadeInUp 1s ease-out 0.2s both;
}
-.about .row .info{
- flex:1 1 48rem;
- padding:2rem 1rem;
- padding-left: 6rem;
+.hero-description {
+ font-size: 1.8rem;
+ color: var(--text-muted);
+ margin-bottom: 3rem;
+ max-width: 600px;
+ margin-left: auto;
+ margin-right: auto;
+ animation: fadeInUp 1s ease-out 0.4s both;
}
-.about .row .info h3{
- font-size: 2rem;
- color:var(--yellow);
- padding:1rem 0;
- font-weight: normal;
+.cta-buttons {
+ display: flex;
+ gap: 2rem;
+ justify-content: center;
+ flex-wrap: wrap;
+ animation: fadeInUp 1s ease-out 0.6s both;
}
-.about .row .info h3 span{
- color:#eee;
- padding:0 .5rem;
+.btn {
+ padding: 1.5rem 3rem;
+ border: none;
+ border-radius: 50px;
+ font-size: 1.6rem;
+ font-weight: 600;
+ text-decoration: none;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
}
-.about .row .counter{
- flex:1 1 48rem;
- display: flex;
- justify-content: center;
- flex-wrap: wrap;
+.btn-primary {
+ background: var(--gradient-3);
+ color: white;
+ box-shadow: var(--shadow-lg);
}
-.about .row .counter .box{
- width:20rem;
- background:#222;
- text-align: center;
- padding: 2rem;
- margin:2rem;
+.btn-secondary {
+ background: transparent;
+ color: var(--primary-color);
+ border: 2px solid var(--primary-color);
}
-.about .row .counter .box span{
- font-size: 4rem;
- color:var(--yellow);
+.btn:hover {
+ transform: translateY(-3px);
+ box-shadow: var(--shadow-xl);
}
-.about .row .counter .box h3{
- font-size: 2rem;
- color:#fff;
+.btn-secondary:hover {
+ background: var(--primary-color);
+ color: white;
}
-.education .box-container{
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-wrap: wrap;
- padding:1rem 0;
- padding-left: 3rem;
+/* Sections */
+.section {
+ padding: 10rem 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
}
-.education .box-container .box{
- width:27rem;
- margin:4rem 1rem;
- padding-left: 4rem;
- border-left: .2rem solid #fff;
- position: relative;
+.section-title {
+ font-size: 4rem;
+ text-align: center;
+ margin-bottom: 6rem;
+ position: relative;
}
-.education .box-container .box span{
- font-size: 1.3rem;
- background:#222;
- color:#fff;
- border-radius: 5rem;
- padding:.5rem 2.5rem;
+.section-title::after {
+ content: "";
+ position: absolute;
+ bottom: -1rem;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 100px;
+ height: 4px;
+ background: var(--gradient-3);
+ border-radius: 2px;
}
-.education .box-container .box h3{
- font-size: 2rem;
- color:#fff;
- padding-top: 1.5rem;
+/* About Section */
+.about-content {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 6rem;
+ align-items: center;
}
-.education .box-container .box p{
- font-size: 1.4rem;
- color:#eee;
- padding: 1rem 0;
+.about-text {
+ font-size: 1.8rem;
+ line-height: 1.8;
+ color: var(--text-secondary);
}
-.education .box-container .box i{
- position: absolute;
- top:-1.5rem; left:-2.5rem;
- height:5rem;
- width: 5rem;
- border-radius: 50%;
- line-height: 5rem;
- text-align: center;
- font-size: 2rem;
- color:#fff;
- background:var(--yellow);
+.about-stats {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 3rem;
}
-.portfolio .box-container{
- display: flex;
- align-items: center;
- justify-content: center;
- flex-wrap: wrap;
- padding:2rem 0;
+.stat-card {
+ background: var(--bg-card);
+ padding: 3rem 2rem;
+ border-radius: 20px;
+ border: 1px solid rgba(0, 212, 255, 0.1);
+ transition: all 0.3s ease;
+ text-align: center;
}
-.portfolio .box-container .box{
- height: 20rem;
- width:26rem;
- border-radius: 1rem;
- margin:2rem;
- overflow: hidden;
- cursor: pointer;
+.stat-card:hover {
+ transform: translateY(-5px);
+ border-color: var(--primary-color);
+ box-shadow: var(--shadow-lg);
}
-.portfolio .box-container .box img{
- height:100%;
- width:100%;
- object-fit: cover;
+.stat-number {
+ font-size: 3rem;
+ font-weight: 700;
+ color: var(--primary-color);
+ display: block;
}
-.portfolio .box-container .box:hover img{
- transform: scale(1.2);
+.stat-label {
+ font-size: 1.4rem;
+ color: var(--text-muted);
+ margin-top: 1rem;
}
-.contact .row{
- display: flex;
- align-items: center;
- justify-content: center;
- flex-wrap: wrap;
+/* Skills Section */
+.skills-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 3rem;
}
-.contact .row .content{
- flex:1 1 30rem;
- padding:4rem;
- padding-bottom: 0;
+.skill-category {
+ background: var(--bg-card);
+ padding: 3rem;
+ border-radius: 20px;
+ border: 1px solid rgba(0, 212, 255, 0.1);
+ transition: all 0.3s ease;
}
-.contact .row form{
- flex:1 1 45rem;
- padding:2rem;
- margin:2rem;
- margin-bottom: 4rem;
+.skill-category:hover {
+ transform: translateY(-5px);
+ border-color: var(--primary-color);
+ box-shadow: var(--shadow-lg);
}
-.contact .row form .box{
- padding:1.5rem;
- margin:1rem 0;
- background:#3333;
- color:#fff;
- text-transform: none;
- font-size: 1.7rem;
- width:100%;
+.skill-category h3 {
+ font-size: 2.2rem;
+ color: var(--primary-color);
+ margin-bottom: 2rem;
+ display: flex;
+ align-items: center;
+ gap: 1rem;
}
-.contact .row form .box::placeholder{
- text-transform: capitalize;
+.skill-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
}
-.contact .row form .message{
- height: 15rem;
- resize: none;
+.skill-tag {
+ padding: 0.8rem 1.6rem;
+ background: rgba(0, 212, 255, 0.1);
+ border: 1px solid rgba(0, 212, 255, 0.3);
+ border-radius: 25px;
+ font-size: 1.4rem;
+ color: var(--text-secondary);
+ transition: all 0.3s ease;
}
-.contact .row .content .title{
- text-transform: uppercase;
- color:#fff;
- font-size: 3rem;
- padding-bottom: 2rem;
+.skill-tag:hover {
+ background: rgba(0, 212, 255, 0.2);
+ color: var(--primary-color);
+ transform: translateY(-2px);
}
-.contact .row .content .info h3{
- display: flex;
- align-items: center;
- font-size: 2rem;
- color:#eee;
- padding:1rem 0;
- font-weight: normal;
+/* Experience Section */
+.experience-timeline {
+ position: relative;
+ padding-left: 3rem;
}
-.contact .row .content .info h3 i{
- padding-right: 1rem;
- color:var(--yellow);
+.experience-timeline::before {
+ content: "";
+ position: absolute;
+ left: 2rem;
+ top: 0;
+ height: 100%;
+ width: 2px;
+ background: var(--gradient-3);
}
-.top{
- position: fixed;
- bottom:7.5rem; right: 2rem;
- z-index: 100;
- display: none;
+.experience-item {
+ position: relative;
+ margin-bottom: 4rem;
+ background: var(--bg-card);
+ padding: 3rem;
+ border-radius: 20px;
+ border-left: 4px solid var(--primary-color);
+ transition: all 0.3s ease;
}
-a {
- color: inherit;
- text-decoration: none;
+.experience-item:hover {
+ transform: translateX(1rem);
+ box-shadow: var(--shadow-lg);
}
+.experience-item::before {
+ content: "";
+ position: absolute;
+ left: -3.5rem;
+ top: 3rem;
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ background: var(--primary-color);
+ border: 3px solid var(--bg-dark);
+}
+.experience-period {
+ color: var(--primary-color);
+ font-size: 1.4rem;
+ font-weight: 600;
+ margin-bottom: 0.5rem;
+}
+.experience-title {
+ font-size: 2.2rem;
+ font-weight: 600;
+ margin-bottom: 0.5rem;
+}
+.experience-company {
+ color: var(--text-muted);
+ font-size: 1.6rem;
+ margin-bottom: 1rem;
+}
+.experience-description {
+ font-size: 1.6rem;
+ color: var(--text-secondary);
+ line-height: 1.6;
+}
+/* Contact Section */
+.contact-content {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 6rem;
+}
+.contact-info {
+ display: flex;
+ flex-direction: column;
+ gap: 3rem;
+}
+.contact-item {
+ display: flex;
+ align-items: center;
+ gap: 2rem;
+ padding: 2rem;
+ background: var(--bg-card);
+ border-radius: 15px;
+ border: 1px solid rgba(0, 212, 255, 0.1);
+ transition: all 0.3s ease;
+ font-size: 12px;
+}
+.contact-item:hover {
+ border-color: var(--primary-color);
+ transform: translateY(-3px);
+}
+.contact-icon {
+ width: 50px;
+ height: 50px;
+ background: var(--gradient-3);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 2rem;
+ color: white;
+}
+.social-links {
+ display: flex;
+ gap: 2rem;
+ margin-top: 2rem;
+}
+.social-link {
+ width: 50px;
+ height: 50px;
+ background: var(--bg-card);
+ border: 1px solid rgba(0, 212, 255, 0.1);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--text-secondary);
+ font-size: 2rem;
+ transition: all 0.3s ease;
+}
+.social-link:hover {
+ background: var(--primary-color);
+ color: white;
+ transform: translateY(-3px);
+}
+/* Animations */
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.fade-in {
+ opacity: 0;
+ transform: translateY(30px);
+ transition: all 0.6s ease;
+}
+.fade-in.visible {
+ opacity: 1;
+ transform: translateY(0);
+}
+/* Responsive Design */
+@media (max-width: 768px) {
+ html {
+ font-size: 55%;
+ }
+ .nav-links {
+ display: none;
+ }
-/* media queries */
+ .mobile-menu {
+ display: block;
+ }
-@media (max-width:1200px){
+ .about-content,
+ .contact-content {
+ grid-template-columns: 1fr;
+ gap: 4rem;
+ }
- html{
- font-size: 55%;
- }
+ .about-stats {
+ grid-template-columns: 1fr;
+ }
- .home{
- padding:1rem 4rem;
- }
+ .cta-buttons {
+ flex-direction: column;
+ align-items: center;
+ }
+ .section {
+ padding: 6rem 2rem;
+ }
}
-@media (max-width:991px){
+@media (max-width: 480px) {
+ html {
+ font-size: 50%;
+ }
+
+ .skills-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .experience-timeline {
+ padding-left: 0;
+ }
+
+ .experience-timeline::before {
+ display: none;
+ }
+
+ .experience-item::before {
+ display: none;
+ }
- header{
- left:-120%;
- }
+ .experience-item {
+ border-left: none;
+ border-top: 4px solid var(--primary-color);
+ }
+}
- #menu{
- display: block;
- }
+.form-group {
+ margin-bottom: 2rem;
+}
- header.toggle{
- left:0%;
- }
+.form-group input,
+.form-group textarea {
+ width: 100%;
+ padding: 1.5rem;
+ background: var(--bg-card);
+ border: 1px solid rgba(0, 212, 255, 0.1);
+ border-radius: 10px;
+ color: var(--text-primary);
+ font-size: 1.6rem;
+ transition: all 0.3s ease;
+ font-family: "Inter", sans-serif;
+}
- body{
- padding:0;
- }
+.form-group input:focus,
+.form-group textarea:focus {
+ outline: none;
+ border-color: var(--primary-color);
+ box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
+}
+.form-group input::placeholder,
+.form-group textarea::placeholder {
+ color: var(--text-muted);
}
-@media (max-width:768px){
+@media (max-width: 768px) {
+ .nav-links {
+ position: fixed;
+ top: 70px;
+ right: -100%;
+ width: 100%;
+ height: calc(100vh - 70px);
+ background: rgba(10, 10, 10, 0.98);
+ backdrop-filter: blur(10px);
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ padding-top: 4rem;
+ transition: right 0.3s ease;
+ }
- html{
- font-size: 50%;
- }
-
- }
+ .nav-links.active {
+ right: 0;
+ }
-@media (max-width:400px){
+ .nav-links li {
+ margin: 1rem 0;
+ }
- header{
- width: 100vw;
- }
+ .nav-links a {
+ font-size: 2rem;
+ }
+}
- .heading{
- margin:0 3rem;
- }
+.skill-category:nth-child(1) {
+ animation-delay: 0.1s;
+}
+.skill-category:nth-child(2) {
+ animation-delay: 0.2s;
+}
+.skill-category:nth-child(3) {
+ animation-delay: 0.3s;
+}
+.skill-category:nth-child(4) {
+ animation-delay: 0.4s;
+}
+.skill-category:nth-child(5) {
+ animation-delay: 0.5s;
+}
+.skill-category:nth-child(6) {
+ animation-delay: 0.6s;
+}
- .about .row .counter .box{
- width: 100%;
- }
-
- .education .box-container .box{
- width:100%;
- }
+.experience-item:nth-child(1) {
+ animation-delay: 0.1s;
+}
+.experience-item:nth-child(2) {
+ animation-delay: 0.3s;
+}
+.experience-item:nth-child(3) {
+ animation-delay: 0.5s;
+}
- .portfolio .box-container .box{
- width:100%;
- }
+/* Loading animation for buttons */
+.btn:disabled {
+ opacity: 0.7;
+ cursor: not-allowed;
+}
- .contact .row form{
- margin:3rem 0;
- }
+/* Hover effects for skill tags */
+.skill-tag {
+ cursor: default;
+ user-select: none;
+}
- }
\ No newline at end of file
+/* Enhanced scroll indicator */
+.scroll-indicator {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ background: rgba(0, 212, 255, 0.2);
+ z-index: 9999;
+}
+
+.scroll-progress {
+ height: 100%;
+ background: var(--gradient-3);
+ width: 0;
+ transition: width 0.1s ease;
+}
-