🚀 How I Built a Java + HTML Portfolio Website Using Spring Boot & Maven

📌 Introduction

As a developer, having a personal portfolio is essential to showcase your skills and projects. While many go with just HTML and CSS, I decided to level up by building a full-stack Java-based portfolio website — complete with:

✅ Spring Boot backend
✅ HTML, CSS, JavaScript frontend
✅ Working contact form
✅ Fully responsive and animated design

Let’s go through the exact steps I followed to build it — and how you can build yours too!

---

🛠️ Tools & Technologies Used

---

💻 Step 1: Installing Java and Maven

Option A: EASIEST (Use Chocolatey)

Open PowerShell as Administrator, run:

bashCopyEditchoco install temurin17 maven -y

This will install both Java 17 and Maven, and automatically set the environment variables.

Option B: Manual Method

• Install Java: https://adoptium.net

• Install Maven: https://maven.apache.org/download.cgi

Then add Maven’s bin folder to your system PATH.

---

📁 Step 2: Project Structure

cssCopyEditportfolio-website/
├── backend/    ← Java Spring Boot
└── frontend/   ← HTML, CSS, JavaScript

---

🎨 Step 3: Frontend Code (HTML + JS)

📄 index.html

htmlCopyEdit<form id="contact-form">
  <input name="name" required />
  <input name="email" type="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

📜 script.js

jsCopyEditdocument.getElementById('contact-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const data = Object.fromEntries(new FormData(e.target).entries());
  const res = await fetch('http://localhost:8080/api/contact', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });
  alert(await res.text());
});

---

⚙️ Step 4: Backend (Java + Spring Boot)

🔸 ContactController.java

javaCopyEdit@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "*")
public class ContactController {
    @PostMapping("/contact")
    public ResponseEntity<String> handle(@RequestBody Map<String, String> payload) {
        return ResponseEntity.ok("Message sent by " + payload.get("name"));
    }
}

🔸 PortfolioBackendApplication.java

javaCopyEdit@SpringBootApplication
public class PortfolioBackendApplication {
    public static void main(String[] args) {
        SpringApplication.run(PortfolioBackendApplication.class, args);
    }
}

---

🚀 Step 5: Running Everything

✅ Start Backend

bashCopyEditcd backend
mvn spring-boot:run

✅ Run Frontend

• Open index.html with Live Server

• Fill out the form → submit → response shown from Java backend

---

🧪 Result: Full-Stack Portfolio Working!

• ✅ Java REST API handles contact requests

• ✅ Frontend is animated, modern, and fully responsive

• ✅ Works locally and can be deployed easily

---

🔁 Bonus: Future Upgrades

• Resume upload/download with Spring Boot

• Store contact messages in database (e.g., MySQL)

• Add dynamic project cards (JSON API)

• Deploy on Render (backend) and Vercel (frontend)

---

💡 Learnings

This project helped me practice:

• REST API design with Spring Boot

• Connecting frontend and backend via fetch

• Environment setup and Maven build tools

• Real-world deployment readiness

---

✨ Inspired by Devsync

Big thanks to Devsync for inspiring the vision of clean, connected, developer-first websites. This project reflects that spirit.

---

📞 Contact Me

If you’d like to collaborate or have questions, feel free to reach out!

📧 chaitanyachopde14@gmail.com