Portfolios

🎨

filename.css

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

/* --------------------
   Global Styles
--------------------- */
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #fafafa;
    color: #333;
    line-height: 1.6;
}

h1, h2 {
    margin: 0;
    font-weight: 600;
}

section {
    padding: 60px 20px;
    max-width: 1000px;
    margin: auto;
}

/* --------------------
   Header / Hero
--------------------- */
.hero {
    text-align: center;
    padding: 100px 20px;
    background: #e3f2fd;
}

.hero h1 {
    font-size: 40px;
    margin-bottom: 10px;
}

.hero p {
    font-size: 18px;
    color: #555;
}

/* --------------------
   About Section
--------------------- */
.about {
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.06);
}

/* --------------------
   Skills
--------------------- */
.skills {
    background: #f5f5f5;
}

.skill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.skill-list span {
    background: white;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    border: 1px solid #ddd;
}

/* --------------------
   Projects
--------------------- */
.projects {
    background: white;
}

.project-box {
    background: #fafafa;
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 20px;
    border: 1px solid #eee;
}

.project-box h3 {
    margin-bottom: 8px;
}

/* --------------------
   Contact
--------------------- */
.contact {
    background: #e8f5e9;
    text-align: center;
}

.contact a {
    display: inline-block;
    padding: 12px 20px;
    margin-top: 15px;
    background: #2e7d32;
    color: white;
    border-radius: 6px;
    text-decoration: none;
}

/* --------------------
   Footer
--------------------- */
footer {
    text-align: center;
    padding: 15px;
    font-size: 14px;
    background: #ddd;
}


/* --------------------
   Responsive
--------------------- */
@media(max-width: 768px) {
    .hero h1 { font-size: 32px; }
    section { padding: 40px 15px; }
}

</style>
</head>
<body>

<!-- HERO SECTION -->
<section class="hero">
    <h1>Your Name</h1>
    <p>Web Developer | Designer | Learner</p>
</section>

<!-- ABOUT SECTION -->
<section class="about">
    <h2>About Me</h2>
    <p>
        Hello! I am a passionate Web Developer with a focus on creating clean, responsive, 
        and user-friendly websites. I enjoy learning new technologies and building projects 
        that solve real-world problems.
    </p>
</section>

<!-- SKILLS -->
<section class="skills">
    <h2>Skills</h2>
    <div class="skill-list">
        <span>HTML</span>
        <span>CSS</span>
        <span>JavaScript</span>
        <span>Bootstrap</span>
        <span>Responsive Design</span>
        <span>Git/GitHub</span>
    </div>
</section>

<!-- PROJECTS -->
<section class="projects">
    <h2>Projects</h2>

    <div class="project-box">
        <h3>Portfolio Website</h3>
        <p>A personal portfolio created using HTML and CSS to showcase my work.</p>
    </div>

    <div class="project-box">
        <h3>Responsive Landing Page</h3>
        <p>A clean landing page layout built using Flexbox and Grid.</p>
    </div>

    <div class="project-box">
        <h3>Basic JavaScript Game</h3>
        <p>A mini project demonstrating basic DOM manipulation and events.</p>
    </div>
</section>

<!-- CONTACT -->
<section class="contact">
    <h2>Contact Me</h2>
    <p>Email me for collaborations or opportunities.</p>
    <a href="mailto:youremail@example.com">Send Email</a>
</section>

<!-- FOOTER -->
<footer>
    © 2025 Your Name | All Rights Reserved
</footer>

</body>
</html>

🎨

filename.css

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

/* UNIVERSAL RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* GLOBAL STYLES */
body {
  font-family: 'Arial', sans-serif;
  background: #f8f9fa;
  color: #333;
  line-height: 1.6;
}

h1, h2, h3 {
  font-weight: 600;
}

section {
  padding: 70px 20px;
  max-width: 1100px;
  margin: auto;
}

/* NAVBAR */
.navbar {
  position: sticky;
  top: 0;
  background: white;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  z-index: 10;
}

.navbar h2 {
  color: #1976d2;
}

.navbar a {
  margin-left: 20px;
  text-decoration: none;
  color: #1976d2;
  font-weight: bold;
}

/* HERO SECTION */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-top: 120px;
}

.hero img {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.hero-text h1 {
  font-size: 42px;
  margin-bottom: 10px;
}

.hero-text p {
  font-size: 18px;
  max-width: 450px;
  color: #555;
}

.hero-text .btn {
  display: inline-block;
  margin-top: 20px;
  background: #1976d2;
  color: white;
  padding: 12px 20px;
  border-radius: 6px;
  text-decoration: none;
}

/* ABOUT */
.about {
  background: white;
  border-radius: 8px;
  padding: 40px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* SKILLS */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.skill {
  background: white;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #ececec;
  text-align: center;
  font-weight: bold;
}

/* PROJECTS */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.project-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 5px 18px rgba(0,0,0,0.08);
  padding: 20px;
  transition: 0.3s;
}

.project-card:hover {
  transform: translateY(-6px);
}

.project-card h3 {
  margin-bottom: 10px;
}

.project-card p {
  color: #666;
}

/* CONTACT */
.contact {
  background: #e3f2fd;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

.contact a {
  display: inline-block;
  margin-top: 20px;
  background: #1976d2;
  color: white;
  padding: 12px 25px;
  border-radius: 6px;
  text-decoration: none;
}

/* FOOTER */
footer {
  text-align: center;
  padding: 15px;
  margin-top: 40px;
  background: #ddd;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    text-align: center;
  }
  .hero img {
    margin-bottom: 20px;
  }
}

</style>
</head>
<body>

<!-- NAVBAR -->
<div class="navbar">
  <h2>Your Name</h2>
  <div>
    <a href="#about">About</a>
    <a href="#skills">Skills</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<!-- HERO SECTION -->
<section class="hero">
  <div class="hero-text">
    <h1>Hello, I'm <span style="color:#1976d2;">Your Name</span></h1>
    <p>I am a Web Developer who loves building clean, modern, and responsive websites using HTML, CSS, and JavaScript.</p>
    <a href="#projects" class="btn">View My Work</a>
  </div>
  <img src="https://via.placeholder.com/260" alt="Profile Image">
</section>

<!-- ABOUT SECTION -->
<section id="about">
  <div class="about">
    <h2>About Me</h2>
    <p>
      I am a passionate developer with experience in front-end technologies. 
      I enjoy solving problems, designing clean interfaces, and creating smooth user experiences. 
      I believe in continuous learning and improving my skills every day.
    </p>
  </div>
</section>

<!-- SKILLS SECTION -->
<section id="skills">
  <h2>Skills</h2>
  <div class="skills-grid">
    <div class="skill">HTML5</div>
    <div class="skill">CSS3</div>
    <div class="skill">JavaScript</div>
    <div class="skill">Responsive Design</div>
    <div class="skill">Bootstrap</div>
    <div class="skill">Git & GitHub</div>
  </div>
</section>

<!-- PROJECTS SECTION -->
<section id="projects">
  <h2>Projects</h2>
  <div class="projects-grid">
    
    <div class="project-card">
      <h3>Portfolio Website</h3>
      <p>A clean and responsive personal portfolio created using HTML & CSS.</p>
    </div>

    <div class="project-card">
      <h3>Landing Page</h3>
      <p>A modern landing page layout using Flexbox & Grid with responsive design.</p>
    </div>

    <div class="project-card">
      <h3>JavaScript Mini App</h3>
      <p>A small dynamic app showcasing DOM events & real interactivity.</p>
    </div>

  </div>
</section>

<!-- CONTACT SECTION -->
<section id="contact">
  <div class="contact">
    <h2>Contact Me</h2>
    <p>If you want to collaborate or discuss a project, feel free to reach out.</p>
    <a href="mailto:youremail@example.com">Send Email</a>
  </div>
</section>

<!-- FOOTER -->
<footer>
  © 2025 Your Name | All Rights Reserved
</footer>

</body>
</html>

🎨

filename.css

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio V2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

/* RESET */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* GLOBAL */
body {
    font-family: "Segoe UI", Arial, sans-serif;
    background: #f4f5f7;
    color: #333;
}

h1, h2, h3 { font-weight: 600; }

section {
    padding: 70px 20px;
    max-width: 1100px;
    margin: auto;
}

/* NAVBAR */
.navbar {
    background: white;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    padding: 12px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar h2 { color: #6a5acd; }

.navbar a {
    margin-left: 20px;
    color: #6a5acd;
    text-decoration: none;
    font-weight: bold;
}

/* HERO SECTION */
.hero {
    margin-top: 40px;
    padding: 80px 30px;
    text-align: center;
    background: linear-gradient(135deg, #6a5acd, #9575cd);
    color: white;
    border-radius: 12px;
}

.hero h1 { font-size: 42px; margin-bottom: 10px; }

.hero p {
    font-size: 18px;
    max-width: 700px;
    margin: 10px auto;
}

/* ABOUT */
.about {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* SKILLS */
.skills {
    text-align: center;
}

.skills-grid {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 18px;
}

.skill {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #ddd;
    transition: 0.3s;
}

.skill:hover {
    transform: translateY(-5px);
    border-color: #6a5acd;
}

/* PROJECTS */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.project-card {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    transition: 0.3s;
}

.project-card:hover {
    transform: translateY(-6px);
}

.project-card h3 {
    margin-bottom: 10px;
    color: #6a5acd;
}

.project-card p { color: #555; }

/* CONTACT */
.contact {
    background: linear-gradient(135deg, #9575cd, #7e57c2);
    border-radius: 12px;
    padding: 50px;
    text-align: center;
    color: white;
    box-shadow: 0 8px 18px rgba(0,0,0,0.1);
}

.contact a {
    display: inline-block;
    margin-top: 20px;
    background: white;
    padding: 12px 25px;
    color: #6a5acd;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
}

/* FOOTER */
footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    background: #ddd;
}

/* RESPONSIVE */
@media(max-width: 900px) {
    .hero h1 { font-size: 34px; }
}

</style>
</head>
<body>

<!-- NAVBAR -->
<div class="navbar">
    <h2>Your Name</h2>
    <div>
        <a href="#about">About</a>
        <a href="#skills">Skills</a>
        <a href="#projects">Projects</a>
        <a href="#contact">Contact</a>
    </div>
</div>

<!-- HERO SECTION -->
<section class="hero">
    <h1>Hello, I’m <strong>Your Name</strong></h1>
    <p>A Passionate Frontend Developer focused on building clean, modern, and responsive web interfaces using HTML, CSS, and JavaScript.</p>
</section>

<!-- ABOUT -->
<section id="about">
    <div class="about">
        <h2>About Me</h2>
        <p style="margin-top: 15px; font-size: 17px; color:#444;">
            I specialize in crafting visually appealing and user-friendly websites. I enjoy turning ideas 
            into functional and beautiful designs using modern web technologies. I continuously explore 
            new tools, techniques, and design patterns to enhance my development workflow.
        </p>
    </div>
</section>

<!-- SKILLS -->
<section id="skills" class="skills">
    <h2>Skills</h2>
    <div class="skills-grid">
        <div class="skill">HTML5</div>
        <div class="skill">CSS3</div>
        <div class="skill">JavaScript</div>
        <div class="skill">Flexbox</div>
        <div class="skill">CSS Grid</div>
        <div class="skill">Git & GitHub</div>
        <div class="skill">Bootstrap</div>
        <div class="skill">Responsive Design</div>
    </div>
</section>

<!-- PROJECTS -->
<section id="projects">
    <h2>Projects</h2>
    <div class="projects-grid">

        <div class="project-card">
            <h3>Responsive Portfolio</h3>
            <p>A modern portfolio design created using semantic HTML, CSS Grid, and Flexbox.</p>
        </div>

        <div class="project-card">
            <h3>Product Landing Page</h3>
            <p>A responsive landing page built with a clean layout, responsive sections, and strong visual hierarchy.</p>
        </div>

        <div class="project-card">
            <h3>JavaScript Mini Project</h3>
            <p>A small interactive app created using fundamental DOM manipulation and CSS styling.</p>
        </div>

    </div>
</section>

<!-- CONTACT -->
<section id="contact">
    <div class="contact">
        <h2>Contact Me</h2>
        <p style="max-width:600px; margin: auto;">
            If you’re interested in working together or have a project idea in mind, feel free to reach out.
        </p>
        <a href="mailto:youremail@example.com">Send Email</a>
    </div>
</section>

<!-- FOOTER -->
<footer>
    © 2025 Your Name | All Rights Reserved
</footer>

</body>
</html>

🎨

filename.css

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advanced Portfolio – Your Name</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
/* =========================
   RESET & GLOBAL
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: #050816;
  color: #f5f5f5;
  line-height: 1.6;
}

/* Color palette variables */
:root {
  --primary: #915eff;
  --secondary: #2f80ed;
  --accent: #00d4ff;
  --bg-dark: #050816;
  --bg-card: #0b1020;
  --text-muted: #a0a0b5;
  --radius-lg: 16px;
  --shadow-soft: 0 18px 40px rgba(0,0,0,0.6);
}

/* Utility classes */
section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 20px;
}

.section-title {
  font-size: 28px;
  margin-bottom: 10px;
}

.section-subtitle {
  color: var(--text-muted);
  font-size: 15px;
  margin-bottom: 30px;
}

/* Global animation keyframes */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* =========================
   NAVBAR
========================= */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px);
  background: linear-gradient(to right, rgba(5,8,22,0.95), rgba(5,8,22,0.85));
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.navbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-logo {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #ffffff;
}

.navbar-menu a {
  margin-left: 18px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 14px;
  position: relative;
  transition: color 0.3s;
}

.navbar-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.3s;
}

.navbar-menu a:hover {
  color: #ffffff;
}

.navbar-menu a:hover::after {
  width: 100%;
}

/* =========================
   HERO SECTION
========================= */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-top: 80px;
  animation: fadeInUp 0.8s ease forwards;
}

.hero-text {
  flex: 1;
}

.hero-tagline {
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.hero-title {
  font-size: 40px;
  margin-bottom: 10px;
}

.hero-title span {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  color: transparent;
}

.hero-subtitle {
  color: var(--text-muted);
  max-width: 420px;
  font-size: 15px;
}

.hero-buttons {
  margin-top: 25px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.btn-primary, .btn-outline {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: 0.3s;
}

.btn-primary {
  border: none;
  color: #050816;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}

.btn-primary:hover {
  box-shadow: 0 0 20px rgba(145,94,255,0.7);
  transform: translateY(-2px);
}

.btn-outline {
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
}

.btn-outline:hover {
  background: rgba(0,212,255,0.1);
}

.hero-visual {
  flex: 1;
  display: flex;
  justify-content: center;
}

.hero-card {
  width: 260px;
  height: 260px;
  border-radius: 30px;
  background: radial-gradient(circle at top, #1e293b, #020617);
  position: relative;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  animation: float 4s ease-in-out infinite;
}

.hero-circle {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, var(--primary), var(--accent), var(--secondary), var(--primary));
  top: -30px;
  right: -20px;
  filter: blur(2px);
}

.hero-inner {
  position: absolute;
  inset: 15px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: radial-gradient(circle at bottom, #020617, rgba(15,23,42,0.9));
}

.hero-name {
  font-size: 18px;
  margin-bottom: 4px;
}

.hero-role {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(148,163,184,0.16);
  margin-bottom: 8px;
}

/* =========================
   ABOUT SECTION
========================= */
.about {
  animation: fadeInUp 0.9s ease forwards;
}

.about-content {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 30px;
  align-items: start;
}

.about-text {
  font-size: 15px;
  color: var(--text-muted);
}

.about-highlights {
  background: rgba(15,23,42,0.9);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  border: 1px solid rgba(148,163,184,0.3);
}

.about-highlights h3 {
  font-size: 16px;
  margin-bottom: 10px;
}

.about-highlights ul {
  list-style: none;
  font-size: 14px;
  color: #e5e7eb;
}

.about-highlights li + li {
  margin-top: 6px;
}

/* =========================
   SKILLS SECTION
========================= */
.skills {
  animation: fadeInUp 0.9s ease forwards;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
}

.skill-card {
  background: rgba(15,23,42,0.9);
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(148,163,184,0.3);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s;
}

.skill-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}

.skill-title {
  font-size: 14px;
  margin-bottom: 6px;
}

.skill-level {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* skill bar */
.skill-bar {
  position: relative;
  width: 100%;
  height: 6px;
  background: #111827;
  border-radius: 999px;
  overflow: hidden;
}

.skill-bar-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--secondary), var(--accent));
  animation: fillBar 1.2s ease forwards;
}

.skill-bar-fill.s80 { width: 80%; }
.skill-bar-fill.s90 { width: 90%; }
.skill-bar-fill.s70 { width: 70%; }
.skill-bar-fill.s60 { width: 60%; }

@keyframes fillBar {
  from { width: 0%; }
  to { width: var(--final-width); }
}

/* =========================
   EXPERIENCE SECTION
========================= */
.experience {
  animation: fadeInUp 1s ease forwards;
}

.timeline {
  position: relative;
  margin-top: 10px;
  padding-left: 22px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--primary), transparent);
}

.timeline-item {
  position: relative;
  margin-bottom: 24px;
}

.timeline-dot {
  position: absolute;
  left: -1px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(0,212,255,0.2);
}

.timeline-content {
  margin-left: 18px;
  background: rgba(15,23,42,0.9);
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(148,163,184,0.4);
}

.timeline-role {
  font-size: 14px;
}

.timeline-company {
  font-size: 13px;
  color: var(--text-muted);
}

.timeline-duration {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* =========================
   PROJECTS SECTION
========================= */
.projects {
  animation: fadeInUp 1s ease forwards;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.project-card {
  background: rgba(15,23,42,0.9);
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.3);
  padding: 16px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  position: relative;
  transition: transform 0.35s, box-shadow 0.35s;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 45px rgba(0,0,0,0.7);
}

.project-badge {
  display: inline-block;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(148,163,184,0.18);
  margin-bottom: 8px;
}

.project-title {
  font-size: 18px;
  margin-bottom: 6px;
}

.project-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
}

.project-tags span {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(15,23,42,0.9);
  border: 1px solid rgba(148,163,184,0.3);
}

/* =========================
   CONTACT SECTION
========================= */
.contact {
  animation: fadeInUp 1s ease forwards;
}

.contact-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items: start;
}

.contact-card {
  padding: 18px 18px;
  background: radial-gradient(circle at top left, rgba(145,94,255,0.5), rgba(5,8,22,1));
  border-radius: var(--radius-lg);
  border: 1px solid rgba(148,163,184,0.3);
  box-shadow: var(--shadow-soft);
}

.contact-card p {
  font-size: 14px;
  color: #e5e7eb;
  margin-bottom: 10px;
}

.contact-info {
  font-size: 14px;
  margin-top: 10px;
}

.contact-info div + div {
  margin-top: 4px;
}

.contact-info span {
  color: var(--text-muted);
}

.contact-form {
  background: rgba(15,23,42,0.95);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(148,163,184,0.3);
  padding: 18px;
}

.contact-form label {
  font-size: 13px;
  display: block;
  margin-bottom: 4px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  border: 1px solid rgba(148,163,184,0.3);
  background: #020617;
  color: #e5e7eb;
  font-size: 13px;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.contact-form button {
  margin-top: 4px;
  width: 100%;
  padding: 10px 0;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, var(--secondary), var(--accent));
  color: #050816;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.contact-form button:hover {
  box-shadow: 0 0 18px rgba(0,212,255,0.8);
}

/* =========================
   FOOTER
========================= */
.footer {
  border-top: 1px solid rgba(148,163,184,0.25);
  padding: 16px 20px 22px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    text-align: center;
  }
  .hero-text, .hero-subtitle {
    max-width: none;
  }
  .hero-buttons {
    justify-content: center;
  }
  .hero-visual {
    order: -1;
  }
  .about-content {
    grid-template-columns: 1fr;
  }
  .contact-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .navbar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .navbar-menu {
    display: flex;
    flex-wrap: wrap;
  }
  .hero-title {
    font-size: 32px;
  }
  section {
    padding: 60px 16px;
  }
}
</style>
</head>
<body>

<!-- NAVBAR -->
<header class="navbar">
  <div class="navbar-inner">
    <div class="navbar-logo">Your Name</div>
    <nav class="navbar-menu">
      <a href="#hero">Home</a>
      <a href="#about">About</a>
      <a href="#skills">Skills</a>
      <a href="#experience">Experience</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </div>
</header>

<!-- HERO -->
<section id="hero" class="hero">
  <div class="hero-text">
    <div class="hero-tagline">Frontend Developer • Trainer • Learner</div>
    <h1 class="hero-title">Hi, I'm <span>Your Name</span></h1>
    <p class="hero-subtitle">
      I design and build elegant, responsive websites using modern HTML, CSS, and JavaScript.
      I focus on clean code, accessible experiences, and performance-first web development.
    </p>
    <div class="hero-buttons">
      <a href="#projects" class="btn-primary">View Projects</a>
      <a href="#contact" class="btn-outline">Contact Me</a>
    </div>
  </div>

  <div class="hero-visual">
    <div class="hero-card">
      <div class="hero-circle"></div>
      <div class="hero-inner">
        <span class="hero-pill">
          <span style="width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;"></span>
          Available for Freelance
        </span>
        <div class="hero-name">Your Name</div>
        <div class="hero-role">Frontend Developer</div>
        <div style="font-size:11px;color:var(--text-muted);margin-top:6px;">
          Building modern UIs, training students, and crafting digital experiences.
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ABOUT -->
<section id="about" class="about">
  <h2 class="section-title">About Me</h2>
  <p class="section-subtitle">A quick introduction about who you are and what you do.</p>

  <div class="about-content">
    <div class="about-text">
      <p>
        I am a frontend developer with a strong interest in building educational, responsive, and
        user-focused websites. Over the years, I have learned to combine clean code with simple
        design to create smooth digital experiences.
      </p>
      <br>
      <p>
        I enjoy mentoring students, writing learning materials, and turning complex topics
        into simple, structured content. My work often includes HTML, CSS, JavaScript, and
        modern layout techniques like Flexbox and Grid.
      </p>
      <br>
      <p>
        When I am not coding, I like exploring new tools, reading documentation, and experimenting
        with new UI patterns that can help learners understand technology better.
      </p>
    </div>

    <div class="about-highlights">
      <h3>Highlights</h3>
      <ul>
        <li>3+ years of experience in web development & training</li>
        <li>Specialized in HTML, CSS, JavaScript, and responsive design</li>
        <li>Experience in creating training modules and course content</li>
        <li>Comfortable working with students, trainers, and teams</li>
      </ul>
    </div>
  </div>
</section>

<!-- SKILLS -->
<section id="skills" class="skills">
  <h2 class="section-title">Skills</h2>
  <p class="section-subtitle">Core technologies and tools that I work with.</p>

  <div class="skills-grid">
    <div class="skill-card">
      <div class="skill-title">HTML5</div>
      <div class="skill-level">Semantic Structure, Forms, Accessibility Basics</div>
      <div class="skill-bar">
        <div class="skill-bar-fill s90" style="--final-width: 90%;"></div>
      </div>
    </div>

    <div class="skill-card">
      <div class="skill-title">CSS3</div>
      <div class="skill-level">Flexbox, Grid, Animations, Responsive Design</div>
      <div class="skill-bar">
        <div class="skill-bar-fill s90" style="--final-width: 90%;"></div>
      </div>
    </div>

    <div class="skill-card">
      <div class="skill-title">JavaScript (Basics)</div>
      <div class="skill-level">DOM Manipulation, Events, Simple Apps</div>
      <div class="skill-bar">
        <div class="skill-bar-fill s70" style="--final-width: 70%;"></div>
      </div>
    </div>

    <div class="skill-card">
      <div class="skill-title">Responsive Design</div>
      <div class="skill-level">Media Queries, Mobile-first Layouts</div>
      <div class="skill-bar">
        <div class="skill-bar-fill s80" style="--final-width: 80%;"></div>
      </div>
    </div>

    <div class="skill-card">
      <div class="skill-title">Training & Content</div>
      <div class="skill-level">Tutorials, Course Structuring, LMS-friendly content</div>
      <div class="skill-bar">
        <div class="skill-bar-fill s80" style="--final-width: 80%;"></div>
      </div>
    </div>

    <div class="skill-card">
      <div class="skill-title">Tools</div>
      <div class="skill-level">Git, GitHub, VS Code, Browser DevTools</div>
      <div class="skill-bar">
        <div class="skill-bar-fill s60" style="--final-width: 60%;"></div>
      </div>
    </div>
  </div>
</section>

<!-- EXPERIENCE -->
<section id="experience" class="experience">
  <h2 class="section-title">Experience</h2>
  <p class="section-subtitle">Roles that helped me grow as a developer and trainer.</p>

  <div class="timeline">
    <div class="timeline-item">
      <div class="timeline-dot"></div>
      <div class="timeline-content">
        <div class="timeline-role">Web Developer & Trainer</div>
        <div class="timeline-company">Organization Name</div>
        <div class="timeline-duration">2021 – Present</div>
        <p style="font-size:13px;margin-top:8px;color:var(--text-muted);">
          Conducted training sessions on HTML, CSS, and basic JavaScript. Created learning materials,
          assignments, and small projects to help students understand core web development concepts.
        </p>
      </div>
    </div>

    <div class="timeline-item">
      <div class="timeline-dot"></div>
      <div class="timeline-content">
        <div class="timeline-role">Frontend Developer</div>
        <div class="timeline-company">Freelance / Projects</div>
        <div class="timeline-duration">2019 – 2021</div>
        <p style="font-size:13px;margin-top:8px;color:var(--text-muted);">
          Worked on small business websites, portfolios, and landing pages. Focused on clean layouts,
          responsive behavior, and making content easy to read and navigate.
        </p>
      </div>
    </div>
  </div>
</section>

<!-- PROJECTS -->
<section id="projects" class="projects">
  <h2 class="section-title">Selected Projects</h2>
  <p class="section-subtitle">A few examples of my recent work and practice projects.</p>

  <div class="projects-grid">

    <div class="project-card">
      <div class="project-badge">Education / Portfolio</div>
      <div class="project-title">Developer Portfolio</div>
      <div class="project-desc">
        A responsive portfolio page built using pure HTML and CSS. Includes animated sections, skill
        bars, and a clean, modern layout focused on readability.
      </div>
      <div class="project-tags">
        <span>HTML</span>
        <span>CSS</span>
        <span>Responsive</span>
      </div>
    </div>

    <div class="project-card">
      <div class="project-badge">Landing Page</div>
      <div class="project-title">Course Landing Page</div>
      <div class="project-desc">
        A simple, structured landing page for a training program, with sections for course details,
        benefits, FAQs, and contact information.
      </div>
      <div class="project-tags">
        <span>Flexbox</span>
        <span>Grid</span>
        <span>UI Design</span>
      </div>
    </div>

    <div class="project-card">
      <div class="project-badge">Mini App</div>
      <div class="project-title">JavaScript Practice App</div>
      <div class="project-desc">
        A small interactive mini app created to practice DOM manipulation and event handling, such as
        a quiz, counter, or to-do list.
      </div>
      <div class="project-tags">
        <span>HTML</span>
        <span>CSS</span>
        <span>JavaScript</span>
      </div>
    </div>

  </div>
</section>

<!-- CONTACT -->
<section id="contact" class="contact">
  <h2 class="section-title">Contact</h2>
  <p class="section-subtitle">Feel free to reach out for projects, collaborations, or training.</p>

  <div class="contact-inner">
    <div class="contact-card">
      <p>
        I am always open to discussing new projects, training opportunities, or collaboration ideas.
        If you think I can help you with a website, a training module, or a frontend task, you can
        contact me using the details below.
      </p>
      <div class="contact-info">
        <div><span>Email:</span> youremail@example.com</div>
        <div><span>Phone:</span> +91-9876543210</div>
        <div><span>Location:</span> Your City, Country</div>
      </div>
    </div>

    <div class="contact-form">
      <form>
        <label for="name">Name</label>
        <input id="name" type="text" placeholder="Your Name">

        <label for="email">Email</label>
        <input id="email" type="email" placeholder="your@email.com">

        <label for="message">Message</label>
        <textarea id="message" rows="4" placeholder="Write your message..."></textarea>

        <button type="button">Send Message (UI Only)</button>
      </form>
    </div>
  </div>
</section>

<!-- FOOTER -->
<footer class="footer">
  © 2025 Your Name. Built with HTML & CSS only.
</footer>

</body>
</html>

🎨

filename.css

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advanced Portfolio V2 - Your Name</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

/* ========================
    GLOBAL RESET
======================== */
* {
  margin: 0; padding: 0;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', sans-serif;
  background: #0d0f18;
  color: #e4e4e4;
  line-height: 1.6;
}

:root {
  --primary: #00eaff;
  --secondary: #007bff;
  --accent: #ff00e6;
  --glass: rgba(255,255,255,0.06);
  --blur: blur(14px);
  --radius: 16px;
  --shadow: 0 0 30px rgba(0,234,255,0.3);
}

/* ========================
    SMOOTH REVEAL ANIMATION
======================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  animation: fadeUp 1s ease forwards;
}

/* ========================
    NAVBAR
======================== */
.navbar {
  position: sticky;
  top: 0;
  backdrop-filter: blur(20px);
  background: rgba(13,15,24,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 16px 20px;
  z-index: 20;
}

.nav-inner {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-inner h2 {
  color: var(--primary);
  letter-spacing: 1px;
  font-weight: 600;
}

.nav-menu a {
  margin-left: 25px;
  text-decoration: none;
  color: #c9c9c9;
  font-weight: 500;
  transition: .3s;
  position: relative;
}

.nav-menu a:hover {
  color: var(--primary);
}

.nav-menu a::after {
  content: "";
  width: 0%;
  height: 2px;
  background: var(--primary);
  position: absolute;
  bottom: -4px;
  left: 0;
  transition: .3s;
}

.nav-menu a:hover::after {
  width: 100%;
}

/* ========================
    HERO SECTION
======================== */
section {
  padding: 90px 20px;
  max-width: 1200px;
  margin: auto;
}

.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}

.hero-left h3 {
  color: var(--accent);
  font-size: 15px;
  letter-spacing: 3px;
}

.hero-left h1 {
  font-size: 50px;
  margin-top: 10px;
}

.hero-left h1 span {
  color: var(--primary);
}

.hero-left p {
  margin-top: 12px;
  color: #bbbbbb;
  max-width: 500px;
}

.hero-btns .btn {
  display: inline-block;
  margin-top: 25px;
  padding: 10px 20px;
  border-radius: 50px;
  text-decoration: none;
  color: #0d0f18;
  background: var(--primary);
  font-weight: bold;
  margin-right: 12px;
  transition: .3s;
}

.hero-btns .btn:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.hero-right {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  position: relative;
  overflow: hidden;
  animation: floatPic 5s infinite ease-in-out;
}

@keyframes floatPic {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.hero-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================
    ABOUT SECTION
======================== */
.about-card {
  background: var(--glass);
  backdrop-filter: var(--blur);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 30px;
  border-radius: var(--radius);
}

.about-card h2 {
  font-size: 28px;
  margin-bottom: 8px;
}

.about-card p {
  margin-top: 8px;
  color: #c6c6c6;
}

/* ========================
    SKILLS
======================== */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 20px;
  margin-top: 20px;
}

.skill-box {
  padding: 18px;
  background: var(--glass);
  border-radius: var(--radius);
  text-align: center;
  border: 1px solid rgba(255,255,255,0.1);
  transition: .3s;
}

.skill-box:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

/* ========================
    EXPERIENCE
======================== */
.timeline {
  margin-top: 30px;
  border-left: 2px dashed rgba(255,255,255,0.2);
  padding-left: 20px;
}

.t-item {
  margin-bottom: 25px;
  position: relative;
}

.t-item::before {
  content: "";
  width: 13px; height: 13px;
  background: var(--primary);
  border-radius: 50%;
  position: absolute;
  left: -29px;
  top: 5px;
}

.t-item h3 {
  font-size: 18px;
  color: var(--primary);
}

.t-item p {
  color: #bbbbbb;
  font-size: 14px;
}

/* ========================
    PROJECTS
======================== */
.projects-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 25px;
}

.project-card {
  background: var(--glass);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  transition: .35s;
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}

.project-card h3 {
  margin-bottom: 6px;
  color: var(--primary);
}

.project-card p {
  color: #c6c6c6;
}

.tags {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tags span {
  background: rgba(255,255,255,0.08);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
}

/* ========================
    CONTACT
======================== */
.contact-box {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 25px;
  background: var(--glass);
  border-radius: var(--radius);
  padding: 30px;
  border: 1px solid rgba(255,255,255,0.1);
}

.contact-details h3 {
  margin-bottom: 8px;
}

.contact-details p {
  margin-bottom: 6px;
  color: #bbbbbb;
}

.contact-form label {
  font-size: 13px;
  color: #c9c9c9;
}

.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-top: 6px;
  margin-bottom: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.3);
  color: #ffffff;
}

.contact-form button {
  width: 100%;
  padding: 10px;
  border-radius: 30px;
  background: var(--primary);
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: .3s;
}

.contact-form button:hover {
  box-shadow: var(--shadow);
}

/* ========================
    FOOTER
======================== */
footer {
  text-align: center;
  padding: 20px;
  margin-top: 40px;
  color: #777;
  font-size: 13px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* ========================
    RESPONSIVE DESIGN
======================== */
@media(max-width: 900px){
  .hero { flex-direction: column; text-align: center; }
}

@media(max-width: 700px){
  .contact-box { grid-template-columns: 1fr; }
}

</style>
</head>
<body>

<!-- NAV -->
<div class="navbar">
  <div class="nav-inner">
    <h2>YourName</h2>
    <div class="nav-menu">
      <a href="#hero">Home</a>
      <a href="#about">About</a>
      <a href="#skills">Skills</a>
      <a href="#experience">Experience</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </div>
  </div>
</div>

<!-- HERO -->
<section id="hero" class="hero reveal">
  <div class="hero-left">
    <h3>Frontend Developer</h3>
    <h1>Hello, I'm <span>Your Name</span></h1>
    <p>I build modern, responsive websites with clean code, smooth animations, and thoughtful design patterns.</p>

    <div class="hero-btns">
      <a href="#projects" class="btn">My Work</a>
      <a href="#contact" class="btn" style="background:#ff00e6;">Hire Me</a>
    </div>
  </div>

  <div class="hero-right">
    <img src="https://via.placeholder.com/300" alt="Profile">
  </div>
</section>

<!-- ABOUT -->
<section id="about" class="reveal">
  <div class="about-card">
    <h2>About Me</h2>
    <p>
      I’m a passionate frontend developer who enjoys creating visually pleasing and highly user-friendly
      interfaces. I specialize in HTML, CSS, and UI/UX design with a strong focus on clean code and responsive layouts.
    </p>
  </div>
</section>

<!-- SKILLS -->
<section id="skills" class="reveal">
  <h2>Skills</h2>
  <p style="color:#bbbbbb;">Technologies I use regularly</p>
  <div class="skills-grid">
    <div class="skill-box">HTML5</div>
    <div class="skill-box">CSS3</div>
    <div class="skill-box">JavaScript</div>
    <div class="skill-box">Responsive Design</div>
    <div class="skill-box">UI/UX Basics</div>
    <div class="skill-box">Git & GitHub</div>
  </div>
</section>

<!-- EXPERIENCE -->
<section id="experience" class="reveal">
  <h2>Experience</h2>
  <p style="color:#bbbbbb;">Professional journey so far</p>
  <div class="timeline">
    <div class="t-item">
      <h3>Frontend Developer</h3>
      <p>XYZ Company — 2023–Present</p>
      <p>Building responsive websites and collaborating with UI/UX designers.</p>
    </div>

    <div class="t-item">
      <h3>Web Development Trainer</h3>
      <p>ABC Institute — 2021–2023</p>
      <p>Trained students in HTML, CSS, JS, and guided beginner projects.</p>
    </div>
  </div>
</section>

<!-- PROJECTS -->
<section id="projects" class="reveal">
  <h2>Projects</h2>
  <p style="color:#bbbbbb;">Some of my recent work</p>

  <div class="projects-grid">

    <div class="project-card">
      <h3>Portfolio Website</h3>
      <p>A beautifully designed portfolio created using modern HTML and CSS.</p>
      <div class="tags">
        <span>HTML</span><span>CSS</span><span>Responsive</span>
      </div>
    </div>

    <div class="project-card">
      <h3>Landing Page</h3>
      <p>Clean landing page with rich UI sections and responsive layout.</p>
      <div class="tags">
        <span>Flexbox</span><span>CSS Grid</span><span>UI Design</span>
      </div>
    </div>

    <div class="project-card">
      <h3>Mini JavaScript App</h3>
      <p>A simple practice project showing DOM events and interactivity.</p>
      <div class="tags">
        <span>JavaScript</span><span>HTML</span><span>CSS</span>
      </div>
    </div>

  </div>
</section>

<!-- CONTACT -->
<section id="contact" class="reveal">
  <h2>Contact</h2>
  <p style="color:#bbbbbb;">Let’s work together on something great</p>

  <div class="contact-box">
    <div class="contact-details">
      <h3>Get in Touch</h3>
      <p>Email: youremail@example.com</p>
      <p>Phone: +91 9999999999</p>
      <p>Location: Your City, Country</p>
    </div>

    <div class="contact-form">
      <label>Name</label>
      <input type="text" placeholder="Your name">

      <label>Email</label>
      <input type="email" placeholder="Your email">

      <label>Message</label>
      <textarea rows="4" placeholder="Your message"></textarea>

      <button>Send Message (UI Only)</button>
    </div>
  </div>
</section>

<!-- FOOTER -->
<footer>
  © 2025 Your Name — All Rights Reserved
</footer>

</body>
</html>

🎨

filename.css

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advanced Light Portfolio - Your Name</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

/* =========================
   RESET & GLOBAL STYLES
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #f5f7fa;
  color: #333;
  line-height: 1.6;
}

:root {
  --primary: #3f7cff;
  --secondary: #00b3ff;
  --light: #ffffff;
  --surface: #fdfdfd;
  --text-muted: #666;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
}

section {
  max-width: 1100px;
  margin: auto;
  padding: 80px 20px;
}

/* =========================
   ANIMATIONS
========================= */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal { animation: fadeUp 1s ease forwards; }

/* =========================
   NAVBAR
========================= */
.navbar {
  background: var(--light);
  padding: 16px 30px;
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.nav-inner {
  max-width: 1200px;
  display: flex;
  margin: auto;
  justify-content: space-between;
  align-items: center;
}

.nav-inner h2 {
  color: var(--primary);
  font-weight: 600;
  letter-spacing: .5px;
}

.nav-menu a {
  margin-left: 22px;
  text-decoration: none;
  color: #444;
  font-weight: 500;
  position: relative;
}

.nav-menu a::after {
  content: "";
  width: 0%;
  height: 2px;
  background: var(--primary);
  position: absolute;
  bottom: -4px;
  left: 0;
  transition: .3s;
}

.nav-menu a:hover::after {
  width: 100%;
}

.nav-menu a:hover {
  color: var(--primary);
}

/* =========================
   HERO SECTION
========================= */
.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
  padding-top: 60px;
}

.hero-text h3 {
  color: var(--secondary);
  letter-spacing: 3px;
  font-size: 14px;
}

.hero-text h1 {
  font-size: 44px;
  margin-top: 10px;
}

.hero-text h1 span {
  color: var(--primary);
}

.hero-text p {
  margin-top: 15px;
  color: var(--text-muted);
  max-width: 500px;
}

.hero-btns a {
  display: inline-block;
  margin-top: 25px;
  padding: 12px 24px;
  border-radius: 50px;
  background: var(--primary);
  color: white;
  font-weight: bold;
  text-decoration: none;
  margin-right: 12px;
  transition: .3s;
}

.hero-btns a:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}

/* profile image card */
.hero-image {
  width: 300px;
  height: 300px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: floatImg 6s infinite ease-in-out;
}

@keyframes floatImg {
  0%,100% { transform: translateY(0);}
  50% { transform: translateY(-16px);}
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   ABOUT SECTION
========================= */
.about-box {
  background: var(--light);
  padding: 40px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.about-box h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

.about-box p {
  color: var(--text-muted);
}

/* =========================
   SKILLS SECTION
========================= */
.skills-grid {
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 20px;
}

.skill-card {
  background: var(--light);
  padding: 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
  transition: .3s;
}

.skill-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 25px rgba(0,0,0,0.12);
}

/* =========================
   EXPERIENCE SECTION
========================= */
.timeline {
  margin-top: 20px;
  border-left: 3px solid #d4d4d4;
  padding-left: 25px;
}

.t-item {
  margin-bottom: 25px;
  position: relative;
}

.t-item::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--primary);
  border-radius: 50%;
  position: absolute;
  left: -32px;
  top: 5px;
  box-shadow: 0 0 8px var(--primary);
}

.t-item h3 {
  color: var(--primary);
  margin-bottom: 4px;
}

/* =========================
   PROJECTS SECTION
========================= */
.projects-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 25px;
}

.project-card {
  background: var(--light);
  padding: 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: .3s;
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 30px rgba(0,0,0,0.15);
}

.project-card h3 {
  color: var(--primary);
}

.tags {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tags span {
  background: #eef3ff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
}

/* =========================
   CONTACT SECTION
========================= */
.contact-box {
  background: var(--light);
  padding: 40px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.contact-details p {
  margin-bottom: 8px;
  color: var(--text-muted);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid #ccc;
  margin-bottom: 12px;
}

.contact-form button {
  width: 100%;
  padding: 12px;
  background: var(--primary);
  border: none;
  border-radius: 50px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: .3s;
}

.contact-form button:hover {
  box-shadow: var(--shadow);
}

/* =========================
   FOOTER
========================= */
footer {
  text-align: center;
  padding: 18px;
  color: var(--text-muted);
  margin-top: 40px;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:900px){
  .hero { flex-direction: column; text-align:center; }
  .contact-box { grid-template-columns: 1fr; }
}

</style>
</head>
<body>

<!-- NAVBAR -->
<div class="navbar">
  <div class="nav-inner">
    <h2>YourName</h2>
    <div class="nav-menu">
      <a href="#hero">Home</a>
      <a href="#about">About</a>
      <a href="#skills">Skills</a>
      <a href="#experience">Experience</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </div>
  </div>
</div>

<!-- HERO -->
<section id="hero" class="hero reveal">
  <div class="hero-text">
    <h3>Web Developer</h3>
    <h1>Hello, I'm <span>Your Name</span></h1>
    <p>I create responsive, modern, and user-friendly websites using clean code and structured design principles.</p>
    <div class="hero-btns">
      <a href="#projects">View Projects</a>
      <a href="#contact" style="background:var(--secondary);">Hire Me</a>
    </div>
  </div>
  <div class="hero-image">
    <img src="https://via.placeholder.com/300" alt="profile photo">
  </div>
</section>

<!-- ABOUT -->
<section id="about" class="reveal">
  <div class="about-box">
    <h2>About Me</h2>
    <p>
      I am a frontend developer passionate about making clean, lightweight and accessible websites.
      I focus on HTML, CSS, and modern UI styling to build fast and professional web interfaces.
    </p>
  </div>
</section>

<!-- SKILLS -->
<section id="skills" class="reveal">
  <h2>Skills</h2>
  <p style="color:var(--text-muted);">Tools & Technologies I work with</p>

  <div class="skills-grid">
    <div class="skill-card">HTML5</div>
    <div class="skill-card">CSS3</div>
    <div class="skill-card">JavaScript</div>
    <div class="skill-card">Responsive Design</div>
    <div class="skill-card">CSS Animation</div>
    <div class="skill-card">GitHub</div>
  </div>
</section>

<!-- EXPERIENCE -->
<section id="experience" class="reveal">
  <h2>Experience</h2>
  <p style="color:var(--text-muted);">My professional journey</p>

  <div class="timeline">
    <div class="t-item">
      <h3>Frontend Developer</h3>
      <p>XYZ Company — 2023–Present</p>
      <p>Worked on building responsive websites & UI components.</p>
    </div>

    <div class="t-item">
      <h3>Web Developer & Trainer</h3>
      <p>ABC Institute — 2021–2023</p>
      <p>Taught HTML, CSS, and created training modules for students.</p>
    </div>
  </div>
</section>

<!-- PROJECTS -->
<section id="projects" class="reveal">
  <h2>Projects</h2>
  <p style="color:var(--text-muted);">A look at some completed work</p>

  <div class="projects-grid">

    <div class="project-card">
      <h3>Modern Portfolio</h3>
      <p>A portfolio made using HTML + CSS only with animations.</p>
      <div class="tags">
        <span>HTML</span><span>CSS</span><span>UI</span>
      </div>
    </div>

    <div class="project-card">
      <h3>Landing Page</h3>
      <p>Clean landing page layout with responsive design.</p>
      <div class="tags">
        <span>Flexbox</span><span>CSS Grid</span><span>Responsive</span>
      </div>
    </div>

    <div class="project-card">
      <h3>Mini App</h3>
      <p>A basic interactive JavaScript project.</p>
      <div class="tags">
        <span>JS</span><span>HTML</span><span>CSS</span>
      </div>
    </div>

  </div>
</section>

<!-- CONTACT -->
<section id="contact" class="reveal">
  <h2>Contact</h2>
  <p style="color:var(--text-muted);">Let's work together</p>

  <div class="contact-box">
    <div class="contact-details">
      <h3>Get in Touch</h3>
      <p>Email: youremail@example.com</p>
      <p>Phone: +91 99999 99999</p>
      <p>Location: Your City, Country</p>
    </div>

    <div class="contact-form">
      <input type="text" placeholder="Your Name">
      <input type="email" placeholder="Your Email">
      <textarea rows="4" placeholder="Your Message"></textarea>
      <button>Send Message (UI Only)</button>
    </div>
  </div>
</section>

<!-- FOOTER -->
<footer>
  © 2025 Your Name — Advanced Portfolio (HTML + CSS only)
</footer>

</body>
</html>