πŸš€ 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

TechnologyPurpose
Java 17+Backend logic
Spring BootREST API (Contact form)
MavenProject build system
HTML/CSS/JSFrontend UI
VS CodeCode Editor
ChocolateyPackage 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

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

0
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