No Title

Author: 4e772d0ca7

September 12, 2025

Original Version

This is a historical version of a paste. View archive

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Krishna's Portfolio</title>
<meta name="description" content="Portfolio of Krishna - Web Developer, Python Developer, and AI/ML Enthusiast.">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: rgb(0, 0, 33); color: white; font-family: 'Poppins', sans-serif; line-height: 1.6; }
html { scroll-behavior: smooth; }
/* Navigation */
nav { display: flex; justify-content: space-between; align-items: center; height: 80px; background-color: rgb(18, 18, 62); padding: 0 5%; position: sticky; top: 0; z-index: 1000; }
nav .left { font-size: 1.5rem; font-weight: 600; }
nav .right ul { display: flex; list-style: none; }
nav .right ul li { margin: 0 15px; }
nav .right ul li a { text-decoration: none; color: white; transition: color 0.3s; }
nav .right ul li a:hover { color: rgb(153, 153, 226); }
/* Hamburger */
.hamburger { display: none; flex-direction: column; cursor: pointer; z-index: 1100; }
.hamburger div { width: 25px; height: 3px; background: white; margin: 4px 0; transition: 0.4s; }

/* Transform hamburger into X */
.hamburger.active div:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active div:nth-child(2) { opacity: 0; }
.hamburger.active div:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.nav-links { display: flex; }
.nav-links.active { display: block; flex-direction: column; text-align: center; background: rgb(18, 18, 62); position: absolute; top: 80px; left: 0; width: 100%; padding: 20px 0; }
.nav-links li { margin: 15px 0; }
/* Hero */
.firstsection { display: flex; justify-content: space-around; align-items: center; padding: 80px 5%; flex-wrap: wrap; min-height: 80vh; }
.leftsection { font-size: 2.5rem; flex-basis: 50%; }
.btn {
padding: 10px 20px;
margin: 20px 10px 0 0;
border: 2px solid rgb(170, 107, 228);
background: transparent;
color: white;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
display: inline-block;
text-decoration: none;
font-size: 1rem;
font-weight: 600;
}
.btn:hover { background: rgb(170, 107, 228); box-shadow: 0 0 10px rgb(170, 107, 228); color: white; }
.rightsection img { width: 80%; max-width: 300px; border-radius: 50%; box-shadow: 0 5px 15px rgba(170, 107, 228, 0.4); }
.purple { color: rgb(170, 107, 228); }
/* Section Titles */
section { padding: 60px 0; text-align: center; }
h2 { font-size: 2.2rem; margin-bottom: 20px; color: rgb(170, 107, 228); }
/* About */
#about { background: rgb(18, 18, 62); padding: 50px 10%; }
/* Skills */
#skills .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 20px; max-width: 800px; margin: auto; }
.skill-card { background: rgb(18, 18, 62); padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); transition: 0.3s; }
.skill-card:hover { transform: translateY(-5px); box-shadow: 0 6px 14px rgba(0,0,0,0.4); }
/* Projects */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 1100px; margin: auto; }
.project-card { background: rgb(18, 18, 62); padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); transition: 0.3s; }
.project-card:hover { transform: translateY(-10px); box-shadow: 0 8px 16px rgba(0,0,0,0.4); }
.project-card img { width: 100%; border-radius: 5px; margin-bottom: 15px; }
.project-links a { text-decoration: none; color: rgb(170, 107, 228); margin: 0 10px; font-weight: 600; }
/* Contact */
#contact { background: rgb(18, 18, 62); }
.contact-info { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; font-size: 1.1rem; }
.contact-info a { color: white; text-decoration: none; }
.contact-info a:hover { color: rgb(170, 107, 228); }
/* Footer */
footer { text-align: center; padding: 20px; background: rgb(18, 18, 62); border-top: 1px solid rgba(255,255,255,0.1); }
/* Responsive */
@media (max-width: 768px) {
.firstsection { flex-direction: column; text-align: center; }
.leftsection { font-size: 2rem; margin-bottom: 30px; }
.nav-links { display: none; flex-direction: column; }
.hamburger { display: flex; }
}
</style>
</head>
<body>

<nav>
<div class="left">Krishna's Portfolio</div>
<div class="right">
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="hamburger">
<div></div>
<div></div>
<div></div>
</div>
</div>
</nav>

<section class="firstsection" id="home">
<div class="leftsection" data-aos="fade-right">
Hi, my name is <span class="purple">Krishna</span>
<div>I am a passionate <span id="element"></span></div>
<div>
<a href="resume.pdf" download class="btn">Download Resume</a>
<a href="https://github.com/Krish-321" target="_blank" class="btn">Visit GitHub</a>
</div>
</div>
<div class="rightsection" data-aos="fade-left">
<img src="your-photo.jpg" alt="Krishna Profile Picture">
</div>
</section>

<section id="about" data-aos="fade-up">
<h2>About Me</h2>
<p>
I am a dedicated Web Developer with a strong focus on creating clean and efficient web applications.
I love working on both front-end and back-end projects, with growing expertise in AI and ML. My goal
is to build user-friendly, scalable, and impactful solutions.
</p>
</section>

<section id="skills" data-aos="fade-up">
<h2>My Skills</h2>
<div class="skills-grid">
<div class="skill-card">HTML</div>
<div class="skill-card">CSS</div>
<div class="skill-card">JavaScript</div>
<div class="skill-card">Python</div>
<div class="skill-card">Machine Learning</div>
<div class="skill-card">C++</div>
</div>
</section>

<section id="projects" data-aos="fade-up">
<h2>My Projects</h2>
<div class="projects-grid">
<div class="project-card">
<img src="https://via.placeholder.com/300x200" alt="Fake News Detection">
<h3>Fake News Detection</h3>
<p>Built an ML model using Python and NLP to classify news as real or fake.</p>
<div class="project-links">
<a href="#">Live Demo</a>
<a href="https://github.com/Krish-321/fake-news-detection" target="_blank">GitHub</a>
</div>
</div>
<div class="project-card">
<img src="https://via.placeholder.com/300x200" alt="Portfolio Website">
<h3>Portfolio Website</h3>
<p>This responsive portfolio is designed using HTML, CSS, and JavaScript.</p>
<div class="project-links">
<a href="#">Live Demo</a>
<a href="https://github.com/Krish-321/portfolio" target="_blank">GitHub</a>
</div>
</div>
<div class="project-card">
<img src="https://via.placeholder.com/300x200" alt="Tic Tac Toe Game">
<h3>Tic Tac Toe Game</h3>
<p>A fun web game built with JavaScript, featuring Easy, Medium, and Hard modes.</p>
<div class="project-links">
<a href="#">Live Demo</a>
<a href="https://github.com/Krish-321/tic-tac-toe" target="_blank">GitHub</a>
</div>
</div>
</div>
</section>

<section id="contact" data-aos="fade-up">
<h2>Get in Touch</h2>
<div class="contact-info">
<a href="mailto:sahujikrishna2004@gmail.com">📧 sahujikrishna2004@gmail.com</a>
<a href="https://www.linkedin.com/in/krishna-sahu-18ab72269" target="_blank">💼 LinkedIn</a>
<a href="https://github.com/Krish-321" target="_blank">💻 GitHub</a>
</div>
</section>

<footer>
<p>© 2025 Krishna's Portfolio | All Rights Reserved.</p>
</footer>

<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
var typed = new Typed('#element', {
strings: ['Web Developer', 'AI & ML Enthusiast', 'Python Developer'],
typeSpeed: 50,
backSpeed: 30,
loop: true
});
// Hamburger menu toggle with animation
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active');
navLinks.classList.toggle('active');
});
</script>
</body>
</html>