π 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
Technology | Purpose |
Java 17+ | Backend logic |
Spring Boot | REST API (Contact form) |
Maven | Project build system |
HTML/CSS/JS | Frontend UI |
VS Code | Code Editor |
Chocolatey | Package installer (optional) |
π» 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 ServerFill 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
Subscribe to my newsletter
Read articles from Chaitanya Chopde directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by

Chaitanya Chopde
Chaitanya Chopde
Hey, I'm Chaitanya Chopde π» Web Development Learner | Frontend Focused π οΈ Learning HTML, CSS, JavaScript & Figma βοΈ Writing to share my dev journey, tips & projects π·οΈ #DevsyncLearning | Building one line of code at a time