buildHtml
baseUrl https://portfolioscroll.pub
metaTags
editButton /edit.html
title John Doe | Portfolio
style.css
header
 class hero
 nav
  div JD
   class logo
  div
   class nav-links
   a About
    href #about
   a Work
    href #work
   a Contact
    href #contact
 div
  class hero-content
  h1 John Doe
  p Creative Developer & Designer
  a View My Work
   class primary-button
   href #work
main
 section
  id about
  class about
  h2 About Me
  div
   class about-content
   div
    class about-text
    p I'm a passionate developer with 5+ years of experience creating beautiful, functional digital experiences. I specialize in front-end development, UI/UX design, and creative coding.
    p When I'm not coding, you can find me hiking, photography, or experimenting in the kitchen.
   div
    class skills
    h3 Skills
    div
     class skill-tags
     span HTML/CSS
     span JavaScript
     span UI Design
     span Responsive Design
     span Creative Coding
 section
  id work
  class work
  h2 My Work
  div
   class project-grid
   div
    class project-card
    div
     class project-image
    h3 E-Commerce Platform
    p A modern e-commerce solution with custom CMS
    a View Project
     class secondary-button
     href #
   div
    class project-card
    div
     class project-image
    h3 Portfolio Template
    p Clean, responsive portfolio template
    a View Project
     class secondary-button
     href #
   div
    class project-card
    div
     class project-image
    h3 Weather App
    p Real-time weather application with animations
    a View Project
     class secondary-button
     href #
   div
    class project-card
    div
     class project-image
    h3 Interactive Art
    p Generative art piece using canvas
    a View Project
     class secondary-button
     href #
 section
  id contact
  class contact
  h2 Get In Touch
  div
   class contact-content
   p Have a project in mind or want to collaborate? I'd love to hear from you!
   form
    class contact-form
    div
     class form-group
     label Name
     input
      type text
      name name
      required
    div
     class form-group
     label Email
     input
      type email
      name email
      required
    div
     class form-group
     label Message
     textarea
      name message
      required
    button
     type submit
     class primary-button
     Send Message
footer
 div
  class footer-content
  div
   class social-links
   a Twitter
    href #
   a GitHub
    href #
   a LinkedIn
    href #
   a Dribbble
    href #
  p Thanks for visiting!

script.js