💡 Full-Stack Website Prompt: Interactive Resume Builder with Multi-Template SupportBuild a fully functional, responsive, cleanly designed resume builder website using pure HTML, CSS, and JavaScript (no external frameworks unless absolutely necessary). The web app should allow users to input their resume data through a form, view a live preview of the resume in real-time, and dynamically switch between multiple resume templates based on four provided white resume screenshots.🧱 Website Architecture OverviewSplit the layout into two primary sections:🔧 Left Panel — Resume Data Input Form📄 Right Panel — Real-Time Resume Preview (with Template Switching)Structure files as:index.html (main structure)style.css (centralized styling)script.js (for dynamic DOM handling)/assets (for fonts, icons, default images)🔧 PART 1: Resume Input Form (Left Panel)Design a collapsible left sidebar or full-height panel with input fields for every section of the resume. This form should be scrollable and grouped into expandable sections.🔘 1.1 Personal InformationFull NameJob TitleEmail AddressPhone NumberLocation (City, State, Country)LinkedIn URLGitHub URLPortfolio/Website URLProfile Picture Upload (optional)🧾 1.2 About Me / SummaryTextarea (supports multiple lines)Character count limit (e.g., 300 characters)👨‍💻 1.3 Work Experience (Dynamic Entries)Job TitleCompany NameLocationStart Date – End Date (or toggle for “Present”)Description / Responsibilities (bullet list — add/remove points dynamically)Allow user to add multiple job experiences.🎓 1.4 Education (Dynamic Entries)DegreeSchool/UniversityLocationStart Date – End DateDescription / HighlightsSupport multiple education entries.🛠 1.5 Skills (Grouped Tags)Text input for skillsCategory-based tagging (e.g., "Programming", "Tools", "Soft Skills")Display as styled tags/chips📁 1.6 Projects (Dynamic)Project TitleDescriptionTech StackGitHub/Live Link🏅 1.7 Certifications / Achievements (Optional)Certification TitleIssuerDate🌐 1.8 Languages / Awards / HobbiesAdd/remove from predefined dropdown or manual input📄 PART 2: Resume Live Preview (Right Panel)As the user fills the form, display a real-time resume preview in the right panel using one of the selected templates.Initial Template: Default to Template 1Use div containers for each template preview (template-1, template-2, template-3, template-4)Hide/show templates dynamically using JS (display: none/block)Templates must mirror the 4 uploaded screenshot designs. Each has a different structure:📐 Template Layout Descriptions💼 Template 1: Sidebar LayoutLeft sidebar with contact, skills, photoRight content for summary, experience, education🧾 Template 2: Full WidthClean top header with name/titleSections stacked verticallyNo sidebar🎓 Template 3: Academic LayoutPrioritizes educationUses classic serif fontsMinimalistic🧑‍🎨 Template 4: Modern WhiteTwo-columnSubtle grey bordersEqual focus on all sectionsEnsure fonts, spacing, margins, and typographic hierarchy change per template.🎛️ Top Navigation BarSite Logo + Title (e.g., “Smart Resume Builder”)Template Switcher Dropdown“Template 1”, “Template 2”, “Template 3”, “Template 4”“Export to PDF” Button (optional placeholder with tooltip “Coming soon”)“Reset Form” Button🎨 UI/UX DetailsUse only white/light theme (no dark mode)Font Suggestions:Sans-serif for modern (Inter, Helvetica, Poppins)Serif for academic (Georgia, Times)Consistent color scheme:Black/Grey text on White backgroundLight accents (Blue for links, Gray for labels)Responsive:Stack form above preview on mobileKeep preview scrollable independentlySmooth animations (fade in/out templates)Fixed height preview area (A4-like container)🧠 Functionality & LogicJS should dynamically bind form inputs to preview fields using IDs or data-attributesFor skills, loop through array and generate styled span tagsExperience/education/projects should be added/removed dynamically via JSTemplate switch should:Hide all preview divsShow selected templateMaintain filled content across all templates📦 Bonus Features (Optional for Future Expansion)Save resume data to localStorageAllow downloading JSON of form dataAdd themes/colors selectorDrag-and-drop section orderingUser authentication to save/share resumes✅ Acceptance CriteriaWebsite loads fast, responsive on mobile and desktopAll form fields correctly reflect in previewResume updates live as user typesAll 4 templates are usable and switchable without data lossClean, accessible HTML/CSS structureNo external libraries unless discussed