From ae5a0d34a528fca425e965dce1b249502530b9ec Mon Sep 17 00:00:00 2001 From: Ninad Dhote Date: Tue, 28 Oct 2025 18:00:50 +0530 Subject: [PATCH] New Portfolio Generating Website --- public/Day-215:portfolio_Generator/index.html | 61 +++++++ public/Day-215:portfolio_Generator/script.js | 32 ++++ public/Day-215:portfolio_Generator/style.css | 151 ++++++++++++++++++ 3 files changed, 244 insertions(+) create mode 100644 public/Day-215:portfolio_Generator/index.html create mode 100644 public/Day-215:portfolio_Generator/script.js create mode 100644 public/Day-215:portfolio_Generator/style.css diff --git a/public/Day-215:portfolio_Generator/index.html b/public/Day-215:portfolio_Generator/index.html new file mode 100644 index 00000000..24727079 --- /dev/null +++ b/public/Day-215:portfolio_Generator/index.html @@ -0,0 +1,61 @@ + + + + + + Portfolio Builder + + + +
+
+

💼 Portfolio Builder

+

Create your personal portfolio in minutes!

+ +
+
+

👤 Personal Info

+ + + + +
+ +
+

🎓 Education

+ +
+ +
+

🧠 Skills

+ +
+ +
+

🚀 Projects

+ +
+ +
+

💬 About You

+ +
+ + +
+ + +
+
+ + + + + + diff --git a/public/Day-215:portfolio_Generator/script.js b/public/Day-215:portfolio_Generator/script.js new file mode 100644 index 00000000..c3a4606e --- /dev/null +++ b/public/Day-215:portfolio_Generator/script.js @@ -0,0 +1,32 @@ +function generatePortfolio() { + const name = document.getElementById("name").value; + const email = document.getElementById("email").value; + const linkedin = document.getElementById("linkedin").value; + const github = document.getElementById("github").value; + const education = document.getElementById("education").value; + const skills = document.getElementById("skills").value; + const projects = document.getElementById("projects").value; + const about = document.getElementById("about").value; + + const output = ` +
+

${name}

+

Email: ${email}

+ ${linkedin ? `

LinkedIn: ${linkedin}

` : ""} + ${github ? `

GitHub: ${github}

` : ""} +
+

About Me

+

${about}

+

Education

+

${education}

+

Skills

+

${skills}

+

Projects

+

${projects}

+
+ `; + + document.getElementById("output").innerHTML = output; + document.getElementById("portfolioPreview").classList.remove("hidden"); + window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" }); +} diff --git a/public/Day-215:portfolio_Generator/style.css b/public/Day-215:portfolio_Generator/style.css new file mode 100644 index 00000000..f4003af6 --- /dev/null +++ b/public/Day-215:portfolio_Generator/style.css @@ -0,0 +1,151 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap'); + +body { + margin: 0; + font-family: 'Poppins', sans-serif; + background: linear-gradient(135deg, #667eea, #764ba2); + color: #fff; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +.hero { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + padding: 40px 15px; +} + +.container { + width: 100%; + max-width: 850px; + padding: 30px 40px; + border-radius: 20px; + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + backdrop-filter: blur(10px); + background: rgba(255, 255, 255, 0.15); + color: #fff; + text-align: center; +} + +h1 { + font-size: 2rem; + margin-bottom: 5px; +} + +.tagline { + font-size: 1rem; + margin-bottom: 25px; + color: #e0e0e0; +} + +form { + display: flex; + flex-direction: column; + gap: 25px; +} + +.section { + text-align: left; +} + +.section h2 { + font-size: 1.1rem; + color: #fff; + margin-bottom: 8px; + border-left: 4px solid #ffcb2b; + padding-left: 10px; +} + +input, textarea { + width: 100%; + padding: 12px 15px; + border-radius: 10px; + border: none; + outline: none; + margin-top: 8px; + font-size: 15px; + background: rgba(255, 255, 255, 0.25); + color: #fff; + transition: background 0.3s; +} + +input:focus, textarea:focus { + background: rgba(255, 255, 255, 0.4); +} + +button { + cursor: pointer; + border: none; + border-radius: 10px; + font-size: 16px; + font-weight: 600; + padding: 14px; + transition: 0.3s; +} + +.generate-btn { + background: #ffcb2b; + color: #333; +} + +.generate-btn:hover { + background: #ffd84d; + transform: scale(1.05); +} + +.download-btn { + margin-top: 20px; + background: #00c6ff; + color: #fff; +} + +.download-btn:hover { + background: #35d1ff; + transform: scale(1.05); +} + +.preview { + background: rgba(255, 255, 255, 0.2); + border-radius: 15px; + padding: 20px; + margin-top: 30px; + text-align: left; + color: #fff; +} + +.hidden { + display: none; +} + +footer { + text-align: center; + padding: 15px; + font-size: 0.9rem; + color: #f0f0f0; +} + +a { + color: #ffcb2b; + text-decoration: none; +} + +.fade-in { + animation: fadeIn 1.2s ease; +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } +} + +@media (max-width: 600px) { + .container { + padding: 20px; + } + h1 { + font-size: 1.6rem; + } +}