diff --git a/projects/devfolio-ai/index.html b/projects/devfolio-ai/index.html new file mode 100644 index 00000000..a9fbec51 --- /dev/null +++ b/projects/devfolio-ai/index.html @@ -0,0 +1,44 @@ + + + + + +DevFolio AI + + + + + + +
+ +
+ +

DevFolio AI

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

Live Preview

+
+
+ +
+ + + + diff --git a/projects/devfolio-ai/script.js b/projects/devfolio-ai/script.js new file mode 100644 index 00000000..140628b5 --- /dev/null +++ b/projects/devfolio-ai/script.js @@ -0,0 +1,81 @@ +const nameInput = document.getElementById("nameInput"); +const bioInput = document.getElementById("bioInput"); +const skillsInput = document.getElementById("skillsInput"); +const projectsInput = document.getElementById("projectsInput"); +const themeSelect = document.getElementById("themeSelect"); +const generateBtn = document.getElementById("generateBtn"); +const downloadBtn = document.getElementById("downloadBtn"); +const portfolioOutput = document.getElementById("portfolioOutput"); + +/* ============================= + GENERATE PORTFOLIO +============================= */ + +generateBtn.addEventListener("click", generatePortfolio); + +function generatePortfolio(){ + +const name = nameInput.value; +const bio = bioInput.value; +const skills = skillsInput.value.split(","); +const projects = projectsInput.value.split("\n"); +const theme = themeSelect.value; + +let skillsHTML = ""; +skills.forEach(skill=>{ +skillsHTML += `${skill.trim()}`; +}); + +let projectsHTML = ""; + +portfolioOutput.innerHTML = ` +
+

${name}

+

${bio}

+ +

Skills

+
${skillsHTML}
+ +

Projects

+${projectsHTML} +
+`; + +} + +/* ============================= + DOWNLOAD GENERATED HTML +============================= */ + +downloadBtn.addEventListener("click", downloadHTML); + +function downloadHTML(){ + +const content = ` + + + + +${nameInput.value} Portfolio + + + +${portfolioOutput.innerHTML} + + +`; + +const blob = new Blob([content], {type:"text/html"}); +const link = document.createElement("a"); +link.href = URL.createObjectURL(blob); +link.download = "portfolio.html"; +link.click(); +} diff --git a/projects/devfolio-ai/style.css b/projects/devfolio-ai/style.css new file mode 100644 index 00000000..25ba5b8f --- /dev/null +++ b/projects/devfolio-ai/style.css @@ -0,0 +1,97 @@ +*{ +margin:0; +padding:0; +box-sizing:border-box; +} + +body{ +font-family:'Montserrat',sans-serif; +background:#111; +color:white; +min-height:100vh; +} + +.app{ +display:grid; +grid-template-columns:1fr 1fr; +gap:20px; +padding:30px; +} + +.builder{ +background:#1e1e1e; +padding:25px; +border-radius:15px; +display:flex; +flex-direction:column; +gap:15px; +} + +.preview{ +background:#000; +padding:25px; +border-radius:15px; +overflow:auto; +} + +input,textarea,select{ +padding:10px; +border-radius:8px; +border:none; +outline:none; +} + +textarea{ +min-height:80px; +resize:none; +} + +button{ +padding:10px; +border:none; +border-radius:8px; +cursor:pointer; +font-weight:600; +background:#00c6ff; +color:black; +transition:0.3s; +} + +button:hover{ +transform:scale(1.05); +} + +.portfolio{ +padding:20px; +border-radius:10px; +} + +.portfolio.dark{ +background:#121212; +color:white; +} + +.portfolio.light{ +background:white; +color:#111; +} + +.portfolio.gradient{ +background:linear-gradient(135deg,#667eea,#764ba2); +color:white; +} + +.skills span{ +display:inline-block; +margin:5px; +padding:5px 10px; +border-radius:20px; +background:rgba(255,255,255,0.2); +font-size:0.8rem; +} + +@media(max-width:900px){ +.app{ +grid-template-columns:1fr; +} +}