From 9470c8504610b13f339d8b21ae7b79e64a4f781a Mon Sep 17 00:00:00 2001 From: honey-khatri Date: Wed, 22 Oct 2025 18:51:30 +0530 Subject: [PATCH] added portfolio --- .../Frontend/MiniProjects/Portfolio/READme.md | 27 ++++ .../MiniProjects/Portfolio/index.html | 26 ++++ .../Frontend/MiniProjects/Portfolio/script.js | 24 ++++ .../Frontend/MiniProjects/Portfolio/style.css | 130 ++++++++++++++++++ 4 files changed, 207 insertions(+) create mode 100644 Domains/Frontend/MiniProjects/Portfolio/READme.md create mode 100644 Domains/Frontend/MiniProjects/Portfolio/index.html create mode 100644 Domains/Frontend/MiniProjects/Portfolio/script.js create mode 100644 Domains/Frontend/MiniProjects/Portfolio/style.css diff --git a/Domains/Frontend/MiniProjects/Portfolio/READme.md b/Domains/Frontend/MiniProjects/Portfolio/READme.md new file mode 100644 index 00000000..b31185d1 --- /dev/null +++ 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 new file mode 100644 index 00000000..7f8bdbfd --- /dev/null +++ b/Domains/Frontend/MiniProjects/Portfolio/index.html @@ -0,0 +1,26 @@ + + + + + + Portfolio Maker + + + + +

🌟 Portfolio Maker

+
+ + + + + + + +
+ +
+

🔍 Live Preview

+
+ + \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/Portfolio/script.js b/Domains/Frontend/MiniProjects/Portfolio/script.js new file mode 100644 index 00000000..586a58ae --- /dev/null +++ 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 = ` +

${name}

+

${bio}

+

Skills

+ +

Projects

+ +

Contact

+

Email: ${email}

+

GitHub: ${github}

+ `; + + document.getElementById('preview').innerHTML = previewHTML; +}); \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/Portfolio/style.css b/Domains/Frontend/MiniProjects/Portfolio/style.css new file mode 100644 index 00000000..a54a3f04 --- /dev/null +++ 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; + } +} \ No newline at end of file