🎨 Free vCard Portfolio Template - HTML/CSS/JS

/* Change these colors to match your style */
:root {
  --main-color: #ffdb70;      /* Yellow accent color */
  --second-color: #ff6b6b;    /* Red accent color */
  --text-color: #2d3748;      /* Dark text */
  --background: #ffffff;       /* White background */
}

/* Make cards lift up when you hover over them */
.card:hover {
  transform: translateY(-5px);  /* Moves up 5 pixels */
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);  /* Adds shadow */
}

/* Arrange portfolio items in a nice grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

// This makes clicking menu links scroll smoothly
document.querySelectorAll('a[href^="#"]').forEach(link => {
  link.addEventListener('click', function (e) {
    e.preventDefault();
    const section = document.querySelector(this.getAttribute('href'));
    if (section) {
      section.scrollIntoView({
        behavior: 'smooth'
      });
    }
  });
});

// Creates typing animation effect
function createTypingEffect() {
  const element = document.querySelector('.typing-text');
  const words = ['Web Developer', 'Designer', 'Freelancer'];
  let wordIndex = 0;
  let letterIndex = 0;
  
  function type() {
    if (letterIndex < words[wordIndex].length) {
      element.textContent += words[wordIndex][letterIndex];
      letterIndex++;
      setTimeout(type, 100);
    } else {
      setTimeout(erase, 2000);
    }
  }
  
  function erase() {
    if (letterIndex > 0) {
      element.textContent = words[wordIndex].substring(0, letterIndex - 1);
      letterIndex--;
      setTimeout(erase, 50);
    } else {
      wordIndex = (wordIndex + 1) % words.length;
      setTimeout(type, 500);
    }
  }
  
  type(); // Start the animation
}
 
// Start when page loads
document.addEventListener('DOMContentLoaded', createTypingEffect);

<!-- Contact Form -->
<form class="contact-form" action="https://formspree.io/your-email" method="POST">
  <div class="form-group">
    <input type="text" name="name" placeholder="Your Name" required>
  </div>
  <div class="form-group">
    <input type="email" name="email" placeholder="Your Email" required>
  </div>
  <div class="form-group">
    <textarea name="message" placeholder="Your Message" rows="5" required></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Send Message</button>
</form>

<!-- SEO Meta Tags -->
<meta name="description" content="Professional portfolio of [Your Name] - Web Developer & Designer">
<meta name="keywords" content="web developer, portfolio, design, frontend">
<meta name="author" content="Your Name">
 
<!-- Open Graph -->
<meta property="og:title" content="Your Name - Portfolio">
<meta property="og:description" content="Professional web developer and designer">
<meta property="og:image" content="assets/images/og-image.jpg">
<meta property="og:url" content="https://yourwebsite.com">
 
<!-- Schema Markup -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Your Name",
  "jobTitle": "Web Developer",
  "url": "https://yourwebsite.com"
}
</script>

// Lazy Loading Images
const lazyImages = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      observer.unobserve(img);
    }
  });
});
 
lazyImages.forEach(img => imageObserver.observe(img));

/* Dark Mode Styles */
[data-theme="dark"] {
  --primary-color: #64ffda;
  --secondary-color: #ff6b9d;
  --text-color: #e2e8f0;
  --bg-color: #1a202c;
  --card-bg: #2d3748;
}
 
/* Dark Mode Toggle */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--primary-color);
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* Animated Gradient Background */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientAnimation 15s ease infinite;
  opacity: 0.1;
}
 
@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

# GitHub Pages
git add .
git commit -m "Deploy portfolio"
git push origin main
 
# Netlify CLI
npm install -g netlify-cli
netlify deploy --prod --dir=.
 
# Surge.sh
npm install -g surge
surge . your-domain.surge.sh

// Check if images exist
const images = document.querySelectorAll('img');
images.forEach(img => {
  img.onerror = function() {
    this.src = 'assets/images/placeholder.jpg';
  };
});