acesdit · Tejas-Santosh-Nalawade · Oct 22, 2025 · Oct 22, 2025
diff --git a/Domains/Frontend/MiniProjects/Portfolio/READme.md b/Domains/Frontend/MiniProjects/Portfolio/READme.md
@@ -0,0 +1,27 @@
+**Contributor** honey-khatri
+
+
+Welcome to my personal portfolio website! This project showcases my skills, projects, and passion for web development, UI/UX design, and coding. It's built to be clean, responsive, and accessible — just like the kind of work I love to create.
+
+---
+
+## 🚀 Features
+
+- 🎨 Clean and modern layout
+- 📱 Fully responsive design (mobile-friendly)
+- 🧠 Interactive sections for projects, skills, and contact
+- 🌐 SEO-friendly meta tags and accessibility features
+- 🖼️ Visual previews and hover effects
+- 🧩 Modular code structure for easy updates
+
+---
+
+## 🛠️ Tech Stack
+
+- **HTML5** & **CSS3**
+- **JavaScript** (Vanilla or Framework — specify if using React, Vue, etc.)
+- **Responsive Design** with Flexbox/Grid
+- **Git** & **GitHub** for version control
+
+---
+
diff --git a/Domains/Frontend/MiniProjects/Portfolio/index.html b/Domains/Frontend/MiniProjects/Portfolio/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Portfolio Maker</title>
+  <link rel="stylesheet" href="style.css" />
+  <script defer src="script.js"></script>
+</head>
+<body>
+  <h1>🌟 Portfolio Maker</h1>
+  <form id="portfolioForm">
+    <label>Name: <input type="text" id="name" required /></label>
+    <label>Bio: <textarea id="bio" required></textarea></label>
+    <label>Skills (comma-separated): <input type="text" id="skills" required /></label>
+    <label>Projects (one per line): <textarea id="projects" required></textarea></label>
+    <label>Email: <input type="email" id="email" required /></label>
+    <label>GitHub URL: <input type="url" id="github" required /></label>
+    <button type="submit">Generate Portfolio</button>
+  </form>
+
+  <hr />
+  <h2>🔍 Live Preview</h2>
+  <div id="preview" class="preview-box"></div>
+</body>
+</html>
diff --git a/Domains/Frontend/MiniProjects/Portfolio/script.js b/Domains/Frontend/MiniProjects/Portfolio/script.js
@@ -0,0 +1,24 @@
+document.getElementById('portfolioForm').addEventListener('submit', function (e) {
+  e.preventDefault();
+
+  const name = document.getElementById('name').value;
+  const bio = document.getElementById('bio').value;
+  const skills = document.getElementById('skills').value.split(',').map(s => s.trim());
+  const projects = document.getElementById('projects').value.split('\n').map(p => p.trim());
+  const email = document.getElementById('email').value;
+  const github = document.getElementById('github').value;
+
+  const previewHTML = `
+    <h2>${name}</h2>
+    <p>${bio}</p>
+    <h3>Skills</h3>
+    <ul>${skills.map(skill => `<li>${skill}</li>`).join('')}</ul>
+    <h3>Projects</h3>
+    <ul>${projects.map(project => `<li>${project}</li>`).join('')}</ul>
+    <h3>Contact</h3>
+    <p>Email: <a href="mailto:${email}">${email}</a></p>
+    <p>GitHub: <a href="${github}" target="_blank">${github}</a></p>
+  `;
+
+  document.getElementById('preview').innerHTML = previewHTML;
+});
diff --git a/Domains/Frontend/MiniProjects/Portfolio/style.css b/Domains/Frontend/MiniProjects/Portfolio/style.css
@@ -0,0 +1,130 @@
+/* Base Reset */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Poppins', sans-serif;
+  background: linear-gradient(to right, #fdfbfb, #ebedee);
+  color: #333;
+  padding: 2rem;
+}
+
+/* Headings */
+h1 {
+  text-align: center;
+  font-size: 2.8rem;
+  color: #3f51b5;
+  margin-bottom: 2rem;
+  font-weight: 600;
+}
+
+h2 {
+  font-size: 2rem;
+  color: #7b1fa2;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+/* Form Container */
+form {
+  background: white;
+  padding: 2rem;
+  border-radius: 16px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  max-width: 900px;
+  margin: auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+}
+
+form label {
+  display: flex;
+  flex-direction: column;
+  font-weight: 500;
+  color: #444;
+}
+
+form textarea {
+  grid-column: span 2;
+}
+
+input, textarea {
+  padding: 0.75rem 1rem;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 12px;
+  margin-top: 0.5rem;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+input:focus, textarea:focus {
+  border-color: #3f51b5;
+  box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.2);
+  outline: none;
+}
+
+/* Button */
+button {
+  grid-column: span 2;
+  padding: 0.9rem 1.4rem;
+  background: #3f51b5;
+  color: white;
+  border: none;
+  border-radius: 12px;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+
+button:hover {
+  background: #303f9f;
+}
+
+/* Preview Box */
+.preview-box {
+  background: white;
+  padding: 2rem;
+  border-radius: 16px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  max-width: 900px;
+  margin: 2rem auto;
+}
+
+.preview-box ul {
+  padding-left: 1.5rem;
+  margin-top: 0.5rem;
+}
+
+.preview-box a {
+  color: #3f51b5;
+  text-decoration: none;
+}
+
+.preview-box a:hover {
+  text-decoration: underline;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  form {
+    grid-template-columns: 1fr;
+  }
+
+  button {
+    grid-column: span 1;
+  }
+
+  h1 {
+    font-size: 2.2rem;
+  }
+
+  h2 {
+    font-size: 1.6rem;
+  }
+}