the UI is great and I loved it. But can you do something like the alignment of texts is not good like i need perfect cut of texts balances via justify alignment and remove that ViT transformer , reimplemented attention is all you need, things from the notable project section
f52b40f verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Ajhesh Basnet - AI & Data Science</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <style> | |
| /* Paper Reincarnation Section */ | |
| .paper-reincarnation { | |
| padding: 100px 0; | |
| background: #fff; | |
| border-top: 1px solid #e0e0e0; | |
| border-bottom: 1px solid #e0e0e0; | |
| } | |
| .reincarnation-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .reincarnation-item { | |
| background: #f8f8f8; | |
| border: 1px solid #e0e0e0; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .reincarnation-header { | |
| padding: 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .reincarnation-header:hover { | |
| background: #f0f0f0; | |
| } | |
| .reincarnation-header h3 { | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin: 0; | |
| } | |
| .reincarnation-header i { | |
| transition: transform 0.3s ease; | |
| } | |
| .reincarnation-item.active .reincarnation-header i { | |
| transform: rotate(180deg); | |
| } | |
| .reincarnation-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease; | |
| padding: 0 20px; | |
| border-top: 1px solid transparent; | |
| } | |
| .reincarnation-item.active .reincarnation-content { | |
| max-height: 500px; | |
| padding: 20px; | |
| border-top: 1px solid #e0e0e0; | |
| } | |
| .reincarnation-content p { | |
| margin-bottom: 15px; | |
| font-size: 14px; | |
| color: #555; | |
| line-height: 1.6; | |
| } | |
| .repo-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| font-size: 14px; | |
| color: #000; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| } | |
| .repo-link:hover { | |
| color: #555; | |
| text-decoration: underline; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Georgia', 'Times New Roman', serif; | |
| line-height: 1.6; | |
| color: #000; | |
| background-color: #fff; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| .container { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| padding: 0 40px; | |
| } | |
| section { | |
| padding: 120px 0; | |
| } | |
| /* Fade-in animations */ | |
| .fade-in { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.8s ease-out; | |
| } | |
| .fade-in.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .slide-in-left { | |
| opacity: 0; | |
| transform: translateX(-50px); | |
| transition: all 0.8s ease-out; | |
| } | |
| .slide-in-left.visible { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| .slide-in-right { | |
| opacity: 0; | |
| transform: translateX(50px); | |
| transition: all 0.8s ease-out; | |
| } | |
| .slide-in-right.visible { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| .scale-in { | |
| opacity: 0; | |
| transform: scale(0.8); | |
| transition: all 0.8s ease-out; | |
| } | |
| .scale-in.visible { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| /* Header */ | |
| header { | |
| border-bottom: 1px solid #e0e0e0; | |
| padding: 20px 0; | |
| background: rgba(255, 255, 255, 0.95); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| backdrop-filter: blur(10px); | |
| transition: all 0.3s ease; | |
| } | |
| header.scrolled { | |
| box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .nav-links { | |
| display: flex; | |
| list-style: none; | |
| gap: 30px; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .logo { | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: #000; | |
| text-decoration: none; | |
| letter-spacing: 1px; | |
| transition: transform 0.3s ease; | |
| } | |
| .logo:hover { | |
| transform: scale(1.05); | |
| } | |
| .nav-links { | |
| display: flex; | |
| list-style: none; | |
| gap: 40px; | |
| } | |
| .nav-links a { | |
| color: #000; | |
| text-decoration: none; | |
| font-size: 14px; | |
| font-weight: 400; | |
| transition: all 0.3s ease; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| position: relative; | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: #000; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .nav-links a:hover { | |
| color: #666; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| padding: 140px 0 100px; | |
| text-align: center; | |
| border-bottom: 1px solid #e0e0e0; | |
| position: relative; | |
| overflow: hidden; | |
| display: flex; | |
| align-items: center; | |
| min-height: 80vh; | |
| } | |
| .hero .container { | |
| width: 100%; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); | |
| animation: shimmer 3s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { | |
| left: -100%; | |
| } | |
| 100% { | |
| left: 100%; | |
| } | |
| } | |
| .hero h1 { | |
| font-size: 52px; | |
| font-weight: 400; | |
| margin-bottom: 24px; | |
| letter-spacing: 1px; | |
| line-height: 1.2; | |
| animation: fadeInUp 1s ease-out 0.5s both; | |
| max-width: 800px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .hero .subtitle { | |
| font-size: 16px; | |
| color: #666; | |
| margin-bottom: 30px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| animation: fadeInUp 1s ease-out 0.3s both; | |
| } | |
| .hero .description { | |
| font-size: 18px; | |
| color: #333; | |
| max-width: 600px; | |
| margin: 0 auto 40px; | |
| line-height: 1.7; | |
| animation: fadeInUp 1s ease-out 0.7s both; | |
| text-align: justify; | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| gap: 20px; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| animation: fadeInUp 1s ease-out 0.9s both; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .cta-button { | |
| display: inline-block; | |
| padding: 15px 30px; | |
| background: #000; | |
| color: #fff; | |
| text-decoration: none; | |
| font-size: 14px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| transition: all 0.3s ease; | |
| border: 2px solid #000; | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 50px; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); | |
| } | |
| .cta-button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); | |
| transition: left 0.5s ease; | |
| } | |
| .cta-button:hover::before { | |
| left: 100%; | |
| } | |
| .cta-button:hover { | |
| background: #fff; | |
| color: #000; | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); | |
| } | |
| .resume-btn { | |
| background: #fff; | |
| color: #000; | |
| border: 2px solid #000; | |
| } | |
| .resume-btn:hover { | |
| background: #000; | |
| color: #fff; | |
| } | |
| /* Skills Section */ | |
| .skills { | |
| padding: 100px 0; | |
| background: #f8f8f8; | |
| } | |
| section h2 { | |
| font-size: 40px; | |
| font-weight: 400; | |
| margin-bottom: 80px; | |
| text-align: center; | |
| letter-spacing: 0.5px; | |
| position: relative; | |
| } | |
| section h2::after { | |
| content: ''; | |
| display: block; | |
| width: 80px; | |
| height: 2px; | |
| background: #000; | |
| margin: 20px auto 0; | |
| } | |
| .skills-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 30px; | |
| margin: 0 auto; | |
| max-width: 900px; | |
| } | |
| .skill-item { | |
| text-align: center; | |
| padding: 30px 20px; | |
| background: #fff; | |
| border: 1px solid #e0e0e0; | |
| transition: all 0.4s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .skill-item::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent); | |
| transition: left 0.5s ease; | |
| } | |
| .skill-item:hover::before { | |
| left: 100%; | |
| } | |
| .skill-item:hover { | |
| transform: translateY(-10px) scale(1.02); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| border-color: #000; | |
| } | |
| .skill-item h3 { | |
| font-size: 16px; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| transition: color 0.3s ease; | |
| } | |
| .skill-item:hover h3 { | |
| color: #000; | |
| } | |
| .skill-item p { | |
| font-size: 14px; | |
| color: #666; | |
| line-height: 1.5; | |
| transition: color 0.3s ease; | |
| } | |
| .skill-item:hover p { | |
| color: #333; | |
| } | |
| /* Projects Section */ | |
| .projects { | |
| padding: 100px 0; | |
| background: #f8f8f8; | |
| } | |
| .projects-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| margin: 0 auto; | |
| max-width: 1100px; | |
| } | |
| .project-item { | |
| text-align: center; | |
| padding: 30px; | |
| background: #fff; | |
| border: 1px solid #e0e0e0; | |
| transition: all 0.4s ease; | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 8px; | |
| } | |
| .project-item::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent); | |
| transition: left 0.5s ease; | |
| } | |
| .project-item:hover::before { | |
| left: 100%; | |
| } | |
| .project-item:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); | |
| border-color: #000; | |
| } | |
| .project-item h3 { | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin-bottom: 15px; | |
| color: #000; | |
| } | |
| .project-item p { | |
| font-size: 15px; | |
| color: #666; | |
| line-height: 1.6; | |
| } | |
| /* Resume Section */ | |
| .resume { | |
| padding: 100px 0; | |
| text-align: center; | |
| border-bottom: 1px solid #e0e0e0; | |
| } | |
| .resume h2 { | |
| font-size: 36px; | |
| font-weight: 400; | |
| margin-bottom: 40px; | |
| letter-spacing: 1px; | |
| } | |
| .resume-content { | |
| max-width: 700px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| .resume p { | |
| font-size: 18px; | |
| color: #333; | |
| margin-bottom: 40px; | |
| line-height: 1.8; | |
| text-align: center; | |
| max-width: 650px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-bottom: 40px; | |
| } | |
| .resume-buttons { | |
| display: flex; | |
| gap: 20px; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .resume-btn { | |
| display: inline-block; | |
| padding: 15px 30px; | |
| background: #000; | |
| color: #fff; | |
| text-decoration: none; | |
| font-size: 14px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| transition: all 0.3s ease; | |
| border: 2px solid #000; | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 50px; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); | |
| } | |
| .resume-btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); | |
| transition: left 0.5s ease; | |
| } | |
| .resume-btn:hover::before { | |
| left: 100%; | |
| } | |
| .resume-btn:hover { | |
| background: #fff; | |
| color: #000; | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); | |
| } | |
| .resume-btn.secondary { | |
| background: #fff; | |
| color: #000; | |
| } | |
| .resume-btn.secondary:hover { | |
| background: #000; | |
| color: #fff; | |
| } | |
| /* Contact Section */ | |
| .contact { | |
| padding: 100px 0; | |
| text-align: center; | |
| } | |
| .contact h2 { | |
| font-size: 36px; | |
| font-weight: 400; | |
| margin-bottom: 40px; | |
| letter-spacing: 1px; | |
| } | |
| .contact p { | |
| font-size: 18px; | |
| color: #333; | |
| margin-bottom: 40px; | |
| line-height: 1.8; | |
| text-align: center; | |
| max-width: 650px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-bottom: 40px; | |
| } | |
| .contact-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 20px; | |
| margin-top: 60px; | |
| flex-wrap: wrap; | |
| max-width: 800px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .contact-links a { | |
| color: #000; | |
| text-decoration: none; | |
| font-size: 14px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| padding: 12px 24px; | |
| border: 1px solid #000; | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 50px; | |
| background: transparent; | |
| z-index: 1; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .contact-links a::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: #000; | |
| transform: scaleX(0); | |
| transform-origin: right; | |
| transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| z-index: -1; | |
| border-radius: 50px; | |
| } | |
| .contact-links a:hover::before { | |
| transform: scaleX(1); | |
| transform-origin: left; | |
| } | |
| .contact-links a:hover { | |
| color: #fff; | |
| transform: translateY(-5px) scale(1.05); | |
| box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2); | |
| } | |
| .contact-links a i { | |
| transition: transform 0.3s ease; | |
| } | |
| .contact-links a:hover i { | |
| transform: rotate(10deg) scale(1.2); | |
| } | |
| /* Footer */ | |
| footer { | |
| border-top: 1px solid #e0e0e0; | |
| padding: 40px 0; | |
| text-align: center; | |
| background: #f8f8f8; | |
| } | |
| footer p { | |
| font-size: 14px; | |
| color: #666; | |
| letter-spacing: 0.5px; | |
| } | |
| /* Scroll Progress Bar */ | |
| .progress-bar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 0%; | |
| height: 3px; | |
| background: linear-gradient(90deg, #000, #666); | |
| z-index: 1000; | |
| transition: width 0.3s ease; | |
| } | |
| /* Floating Elements */ | |
| .floating-element { | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| background: rgba(0, 0, 0, 0.05); | |
| border-radius: 50%; | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .floating-element:nth-child(1) { | |
| top: 10%; | |
| left: 10%; | |
| animation-delay: 0s; | |
| } | |
| .floating-element:nth-child(2) { | |
| top: 20%; | |
| right: 10%; | |
| animation-delay: 2s; | |
| } | |
| .floating-element:nth-child(3) { | |
| bottom: 10%; | |
| left: 20%; | |
| animation-delay: 4s; | |
| } | |
| @keyframes float { | |
| 0%, | |
| 100% { | |
| transform: translateY(0px); | |
| } | |
| 50% { | |
| transform: translateY(-20px); | |
| } | |
| } | |
| /* Back to Top Button */ | |
| .back-to-top { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| width: 40px; | |
| height: 40px; | |
| background: rgba(0, 0, 0, 0.8); | |
| color: white; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: all 0.3s ease; | |
| z-index: 999; | |
| } | |
| .back-to-top.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .back-to-top:hover { | |
| background: #000; | |
| transform: translateY(-5px) scale(1.1); | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| gap: 20px; | |
| } | |
| .hero { | |
| padding: 80px 0; | |
| min-height: 70vh; | |
| } | |
| .hero h1 { | |
| font-size: 36px; | |
| } | |
| .hero .description { | |
| font-size: 16px; | |
| padding: 0 10px; | |
| } | |
| .about h2, | |
| .skills h2, | |
| .resume h2, | |
| .contact h2 { | |
| font-size: 28px; | |
| } | |
| .about p, | |
| .resume p, | |
| .contact p { | |
| font-size: 16px; | |
| padding: 0 10px; | |
| } | |
| .hero-buttons { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .resume-buttons { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .skills-grid { | |
| grid-template-columns: 1fr; | |
| gap: 20px; | |
| } | |
| .contact-links { | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Progress Bar --> | |
| <div class="progress-bar" id="progressBar"></div> | |
| <!-- Floating Elements --> | |
| <div class="floating-element"></div> | |
| <div class="floating-element"></div> | |
| <div class="floating-element"></div> | |
| <header id="header"> | |
| <nav class="container"> | |
| <ul class="nav-links"> | |
| <li><a href="#skills">Skills</a></li> | |
| <li><a href="#projects">Projects</a></li> | |
| <li><a href="#resume">Resume</a></li> | |
| <li><a href="paper-reincarnations.html">Paper Reincarnations</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <section class="hero"> | |
| <div class="container"> | |
| <div class="subtitle">AI & Data Science Enthusiast</div> | |
| <h1>Ajhesh Basnet</h1> | |
| <p class="description" style="text-align: justify;"> | |
| Hi! I am Ajhesh Basnet, a passionate Artificial Intelligence and Data Science professional dedicated to developing innovative solutions. My expertise spans Deep Neural Networks, Large Dataset processing, with specialized focus on Computer Vision, Natural Language Processing, and MLOps implementations. | |
| </p> | |
| <div class="hero-buttons"> | |
| <a href="#contact" class="cta-button">Get In Touch</a> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="skills" id="skills"> | |
| <div class="container"> | |
| <h2 class="fade-in">Areas of Focus</h2> | |
| <div class="skills-grid"> | |
| <div class="skill-item scale-in" style="animation-delay: 0.1s;"> | |
| <h3>Machine Learning</h3> | |
| <p>Classical ML models, Deep Neural Networks and Model Optimization</p> | |
| </div> | |
| <div class="skill-item scale-in" style="animation-delay: 0.2s;"> | |
| <h3>Computer Vision</h3> | |
| <p>Image Processing and Visual Recognition Systems</p> | |
| </div> | |
| <div class="skill-item scale-in" style="animation-delay: 0.3s;"> | |
| <h3>Natural Language Processing</h3> | |
| <p>Text Analysis and Language Understanding</p> | |
| </div> | |
| <div class="skill-item scale-in" style="animation-delay: 0.4s;"> | |
| <h3>Data Science</h3> | |
| <p>Extracting Meaningful Insights from Structured and Unstructured Data</p> | |
| </div> | |
| <div class="skill-item scale-in" style="animation-delay: 0.5s;"> | |
| <h3>MLOps</h3> | |
| <p>Model deployment, monitoring, and CI/CD pipelines for machine learning systems</p> | |
| </div> | |
| <div class="skill-item scale-in" style="animation-delay: 0.6s;"> | |
| <h3>Backend Development</h3> | |
| <p>Building scalable APIs and services to support AI/ML applications</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="projects" id="projects"> | |
| <div class="container"> | |
| <h2 class="fade-in">Notable Projects</h2> | |
| <div class="projects-grid"> | |
| <div class="project-item scale-in" style="animation-delay: 0.1s;"> | |
| <h3>Vision Transformer (ViT) – From Scratch Implementation of "An Image is Worth 16x16 Words" | |
| </h3> | |
| <p>Implemented core ViT architecture including patch embedding, positional encoding, and multi-head | |
| attention using PyTorch. Modular design tested on image classification tasks.</p> | |
| </div> | |
| <div class="project-item scale-in" style="animation-delay: 0.2s;"> | |
| <h3>Re-implemented Transformer Model (Attention Is All You Need) for English to Nepali Translation | |
| </h3> | |
| <p>Re-implemented the Transformer architecture in PyTorch for English–Nepali translation, achieving | |
| a BLEU score of ~29— comparable to the original paper’s 28.4 on English–French, using fewer | |
| configurations. | |
| </p> | |
| </div> | |
| <div class="project-item scale-in" style="animation-delay: 0.3s;"> | |
| <h3>Low Level Language's Sentiment Classification</h3> | |
| <p>Fine-tuned XLM-RoBERTa-3B for 5 class sentiment classification on Nepali text using LoRA, | |
| reaching roughly 79% accuracy with balanced training.</p> | |
| </div> | |
| <div class="project-item scale-in" style="animation-delay: 0.4s;"> | |
| <h3>RAG-Based Nepali Chatbot enriched with tools calling</h3> | |
| <p>Built retrieval-augmented generation chatbot using LLaMA-7B, vector search for domain-specific | |
| queries with contextual responses.</p> | |
| </div> | |
| <div class="project-item scale-in" style="animation-delay: 0.5s;"> | |
| <h3>SMS Spam-Ham Detection</h3> | |
| <p>Developed binary classifier using TF-IDF and Random Forest achieving 93% accuracy with full | |
| preprocessing pipeline.</p> | |
| </div> | |
| <div class="project-item scale-in" style="animation-delay: 0.6s;"> | |
| <h3>Medical Assistant from Prescriptions</h3> | |
| <p>Extracted structured health information using OCR and NER, providing rule-based medical guidance. | |
| </p> | |
| </div> | |
| <div class="project-item scale-in" style="animation-delay: 0.7s;"> | |
| <h3>Exercise Repetition Counter</h3> | |
| <p>Used Mediapipe to track human pose landmarks and count repetitions based on joint movement logic | |
| with OpenCV for real-time visual overlay and user guidance.</p> | |
| </div> | |
| <div class="project-item scale-in" style="animation-delay: 0.8s;"> | |
| <h3>Real-Time License Plate Recognition and Alert System</h3> | |
| <p>Developed a real-time license plate recognition system using a YOLO-based pipeline and OCR, | |
| connected to a backend database to detect flagged vehicles and trigger alerts instantly upon | |
| match.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="resume" id="resume"> | |
| <div class="container"> | |
| <h2 class="fade-in">Resume</h2> | |
| <div class="resume-content"> | |
| <p class="fade-in" style="text-align: justify;"> | |
| My professional journey combines rigorous academic training with hands-on project experience. The resume provides detailed insights into my qualifications, technical competencies, and notable achievements in the field of AI and data science. | |
| </p> | |
| <div class="resume-buttons fade-in"> | |
| <a href="updated_resume.pdf" class="resume-btn" target="_blank">View Resume</a> | |
| <a href="updated_resume.pdf" class="resume-btn secondary" download>Download PDF</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="contact" id="contact"> | |
| <div class="container"> | |
| <h2 class="fade-in">Contact</h2> | |
| <p class="fade-in" style="text-align: justify;">Connect with me through these professional channels for collaborations or discussions:</p> | |
| <div class="contact-links fade-in"> | |
| <a href="mailto:ajhesh@example.com"><i class="fas fa-envelope"></i> Email</a> | |
| <a href="https://www.linkedin.com/in/ajhesh-basnet-656564291/" target="_blank"><i | |
| class="fab fa-linkedin"></i> LinkedIn</a> | |
| <a href="https://github.com/ajheshbasnet" target="_blank"><i class="fab fa-github"></i> GitHub</a> | |
| <a href="https://X.com/ajheshbasnet" target="_blank"><i class="fab fa-twitter"></i> Twitter</a> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <div class="container"> | |
| <p style="text-align: center;">© 2025 Ajhesh Basnet. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Paper Reincarnation toggle functionality | |
| document.querySelectorAll('.reincarnation-header').forEach(header => { | |
| header.addEventListener('click', () => { | |
| const item = header.parentElement; | |
| item.classList.toggle('active'); | |
| // Close other open items | |
| document.querySelectorAll('.reincarnation-item').forEach(otherItem => { | |
| if (otherItem !== item && otherItem.classList.contains('active')) { | |
| otherItem.classList.remove('active'); | |
| } | |
| }); | |
| }); | |
| }); | |
| // Scroll Progress Bar | |
| window.addEventListener('scroll', () => { | |
| const scrollTop = window.pageYOffset; | |
| const docHeight = document.body.scrollHeight - window.innerHeight; | |
| const scrollPercent = (scrollTop / docHeight) * 100; | |
| document.getElementById('progressBar').style.width = scrollPercent + '%'; | |
| }); | |
| // Header scroll effect | |
| window.addEventListener('scroll', () => { | |
| const header = document.getElementById('header'); | |
| if (window.scrollY > 100) { | |
| header.classList.add('scrolled'); | |
| } else { | |
| header.classList.remove('scrolled'); | |
| } | |
| }); | |
| // Intersection Observer for animations | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| } | |
| }); | |
| }, observerOptions); | |
| // Observe all elements with animation classes | |
| document.querySelectorAll('.fade-in, .slide-in-left, .slide-in-right, .scale-in').forEach(el => { | |
| observer.observe(el); | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Parallax effect for floating elements | |
| window.addEventListener('scroll', () => { | |
| const scrolled = window.pageYOffset; | |
| const parallaxElements = document.querySelectorAll('.floating-element'); | |
| parallaxElements.forEach((element, index) => { | |
| const speed = 0.5 + (index * 0.2); | |
| element.style.transform = `translateY(${scrolled * speed}px)`; | |
| }); | |
| }); | |
| // Back to Top Button | |
| const backToTopButton = document.getElementById('backToTop'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.add('visible'); | |
| } else { | |
| backToTopButton.classList.remove('visible'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Add stagger animation to skill items | |
| const skillItems = document.querySelectorAll('.skill-item'); | |
| skillItems.forEach((item, index) => { | |
| item.style.transitionDelay = `${index * 0.1}s`; | |
| }); | |
| // Cursor trail effect | |
| const cursor = document.createElement('div'); | |
| cursor.style.cssText = ` | |
| position: fixed; | |
| width: 20px; | |
| height: 20px; | |
| background: rgba(0, 0, 0, 0.1); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| z-index: 9999; | |
| transition: all 0.3s ease; | |
| mix-blend-mode: difference; | |
| `; | |
| document.body.appendChild(cursor); | |
| document.addEventListener('mousemove', (e) => { | |
| cursor.style.left = e.clientX - 10 + 'px'; | |
| cursor.style.top = e.clientY - 10 + 'px'; | |
| }); | |
| // Enhance cursor on hover | |
| document.querySelectorAll('a, button, .skill-item').forEach(element => { | |
| element.addEventListener('mouseenter', () => { | |
| cursor.style.transform = 'scale(2)'; | |
| cursor.style.background = 'rgba(0, 0, 0, 0.2)'; | |
| }); | |
| element.addEventListener('mouseleave', () => { | |
| cursor.style.transform = 'scale(1)'; | |
| cursor.style.background = 'rgba(0, 0, 0, 0.1)'; | |
| }); | |
| }); | |
| </script> | |
| <!-- Back to Top Button --> | |
| <div class="back-to-top" id="backToTop"> | |
| <i class="fas fa-arrow-up"></i> | |
| </div> | |
| </body> | |
| </html> |