STUDENT'S PORTFOLIO

on

 <!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KaFu Sir Portfolio</title>
<style>
/* General Styles */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Comic Sans MS', cursive, sans-serif; }
body { line-height:1.6; color:#fff; background-color:#001f3f; scroll-behavior:smooth; }
section { opacity:0; transform: translateY(50px); transition: all 1s ease; }
section.visible { opacity:1; transform: translateY(0); }

/* Navbar */
header { position:fixed; width:100%; background: rgba(0,31,63,0.95); color:#fff; top:0; z-index:1000; backdrop-filter:blur(5px);}
nav { display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem;}
nav .logo { font-size:1.5rem; font-weight:bold; color:#ff7e5f; }
nav ul { display:flex; list-style:none; }
nav ul li { margin-left:1.5rem; }
nav ul li a { text-decoration:none; color:#fff; font-weight:bold; transition:0.3s; }
nav ul li a:hover { color:#ff7e5f; }
.menu-toggle { display:none; font-size:1.8rem; cursor:pointer; }

/* Home Section */
.home-section { height:100vh; display:flex; justify-content:center; align-items:center; text-align:center; padding:0 2rem; position:relative; overflow:hidden;}
.home-content h1 span { color:#ff7e5f; text-shadow:0 0 20px rgba(255,255,255,0.7);}
.home-section .btn { display:inline-block; margin-top:1rem; padding:0.8rem 2rem; background:#ff7e5f; color:#fff; border-radius:30px; text-decoration:none; font-weight:bold; transition:0.3s; box-shadow:0 0 5px #ff7e5f,0 0 10px #ff7e5f,0 0 20px #ff7e5f;}
.home-section .btn:hover { box-shadow:0 0 10px #ff7e5f,0 0 20px #ff7e5f,0 0 40px #ff7e5f; transform: translateY(-5px); }

/* Animated Text */
.animated-text { color:#fff; }

/* About Section */
.about-section { padding:6rem 2rem; text-align:center; }
.about-section h2 { margin-bottom:2rem; color:#ff7e5f; }
.about-content { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2rem; }
.about-content .about-text { max-width:500px; text-align:left; }
.about-content .about-img img { border-radius:15px; max-width:250px; transition: transform 0.5s, box-shadow 0.5s; }
.about-content .about-img img:hover { transform: scale(1.05) rotate(2deg); box-shadow:0 0 20px #00ffff; }

/* Projects Section */
.projects-section { padding:6rem 2rem; text-align:center; }
.projects-section h2 { margin-bottom:2rem; color:#ff7e5f; }
.projects-container { display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; }
.project-card {
    background:#002b5c; border-radius:15px; width:300px; padding:0; position:relative; overflow:hidden;
    transition: transform 0.5s;
    box-shadow: 0 0 10px #00ffff,0 0 20px #00ffff,0 0 30px #00ffff inset;
}
.project-card img { width:100%; height:200px; object-fit:cover; display:block; transition: transform 0.5s, box-shadow 0.5s; }
.project-card:hover img { transform: scale(1.05); box-shadow:0 0 20px #00ffff; }
.project-card h3, .project-card p { color:#fff; margin:1rem; position:relative; z-index:1; }
.project-card::before {
    content:"";
    position:absolute; top:0; left:0; width:100%; height:100%;
    border: 2px solid #00ffff; border-radius:15px;
    box-shadow:0 0 10px #00ffff,0 0 20px #00ffff,0 0 30px #00ffff; opacity:0; transition:0.5s;
}
.project-card:hover::before { opacity:1; animation: neonBorder 1.5s infinite; }
@keyframes neonBorder {0% {box-shadow:0 0 5px #ba1815,0 0 10px #85580b,0 0 15px #00ffff;}50% {box-shadow:0 0 20px #00ffff,0 0 40px #00ffff,0 0 60px #00ffff;}100% {box-shadow:0 0 5px #00ffff,0 0 10px #00ffff,0 0 15px #00ffff;} }
.project-card:hover { transform: translateY(-10px) scale(1.05); }

/* Contact Section */
.contact-section { padding:6rem 2rem; text-align:center; }
.contact-info p { margin:0.5rem 0; }

/* Footer */
footer { background-color:#001f3f; color:#fff; text-align:center; padding:1rem 2rem; }

/* Responsive */
@media(max-width:768px){
    .about-content { flex-direction:column; }
    nav ul { flex-direction:column; background-color:#001f3f; position:absolute; top:60px; right:0; width:200px; display:none; }
    nav ul.active { display:flex; }
    nav ul li { margin:1rem 0; }
    .menu-toggle { display:block; }
}
</style>
</head>
<body>

<!-- Navbar -->
<header>
<nav>
    <div class="logo">KaFu Sir</div>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
    <div class="menu-toggle">☰</div>
</nav>
</header>

<!-- Home Section -->
<section id="home" class="home-section">
<div class="home-content">
    <h1 class="animated-text">Hello, I'm <span>KaFu Sir</span></h1>
    <p>A passionate student and web developer creating awesome projects.</p>
    <a href="#projects" class="btn">View My Work</a>
</div>
</section>

<!-- About Section -->
<section id="about" class="about-section">
<h2 class="animated-text">About Me</h2>
<div class="about-content">
    <div class="about-text">
        <p>I'm a dedicated student interested in web development and design. I love creating interactive and responsive websites using HTML, CSS, and JavaScript.</p>
        <p>Skills: HTML, CSS, JavaScript, Responsive Design, Problem Solving</p>
    </div>
    <div class="about-img">
        <img src="https://via.placeholder.com/250" alt="KaFu Sir">
    </div>
</div>
</section>

<!-- Projects Section -->
<section id="projects" class="projects-section">
<h2 class="animated-text">My Projects</h2>
<div class="projects-container">
    <div class="project-card">
        <img src="https://via.placeholder.com/300x200" alt="Project 1">
        <h3>Project One</h3>
        <p>Website design and development using HTML & CSS.</p>
    </div>
    <div class="project-card">
        <img src="https://via.placeholder.com/300x200" alt="Project 2">
        <h3>Project Two</h3>
        <p>A responsive portfolio site for a student or professional.</p>
    </div>
    <div class="project-card">
        <img src="https://via.placeholder.com/300x200" alt="Project 3">
        <h3>Project Three</h3>
        <p>Interactive web app with clean and modern UI.</p>
    </div>
</div>
</section>

<!-- Contact Section -->
<section id="contact" class="contact-section">
<h2 class="animated-text">Contact Me</h2>
<p>Feel free to reach out via email or connect on social media!</p>
<div class="contact-info">
    <p>Email: kafusir@example.com</p>
    <p>Phone: +977-98XXXXXXX</p>
</div>
</section>

<!-- Footer -->
<footer>
<p>&copy; 2026 KaFu Sir. All rights reserved.</p>
</footer>

<script>
// Responsive menu toggle
const menuToggle = document.querySelector('.menu-toggle');
const navUl = document.querySelector('nav ul');
menuToggle.addEventListener('click', () => { navUl.classList.toggle('active'); });

// Scroll fade-in effect
const sections = document.querySelectorAll('section');
window.addEventListener('scroll', () => {
    const triggerBottom = window.innerHeight / 5 * 4;
    sections.forEach(section => {
        const sectionTop = section.getBoundingClientRect().top;
        if(sectionTop < triggerBottom) { section.classList.add('visible'); }
    });
});
</script>

</body>
</html>

Comments

Post a Comment