DEV Community

Cover image for 🚀 Build and Run a Java + HTML Portfolio Website Using Spring Boot and Maven
Chaitanya Chopde
Chaitanya Chopde

Posted on

🚀 Build and Run a Java + HTML Portfolio Website Using Spring Boot and Maven

#webdev #programming #javascript #portfolio

✍️ Written by: Chaitanya Chopde
📫chaitanyachopde14@gmail.com
Inspired By: @devsyncin

🌟 Introduction

Creating a professional portfolio website is one of the best ways to showcase your skills as a developer. In this tutorial, I’ll walk you through how to build and run a full-featured portfolio website using:

✅ Java (Spring Boot backend)

✅ HTML, CSS, JavaScript frontend

✅ Maven for project management

✅ VS Code as the IDE

By the end, you’ll have a fully functional portfolio with a working contact form, animations, and a clean modern UI.

🧰 Tools & Tech Stack

  • Java 17+
  • Spring Boot 3.x
  • Maven
  • HTML/CSS/JavaScript
  • VS Code
  • Chocolatey (optional)
  • Windows OS

🔧 Step 1: Install Prerequisites

✅ Install Java 17
Using Chocolatey (fastest method):

Image description
✅ Install Maven

Image description

✅ Verify Java & Maven
Open PowerShell or CMD:

Image description

📁 Step 2: Project Structure

Image description

🖼️ Step 3: Frontend Code

index.html

Image description

script.js

Image description

⚙️ Step 4: Backend with Spring Boot

ContactController.java

Image description

PortfolioBackendApplication.java

Image description

🚀 Step 5: Run the Website

💻 Backend (Java)
Open backend folder → Terminal:

Image description
Backend runs at:
http://localhost:8080

🌐 Frontend (HTML)

Use Live Server in VS Code:

Right-click index.html → "Open with Live Server"
Form submits to backend → You get a success alert ✅

🧪 Testing

  • Run backend
  • Run frontend
  • Submit contact form → Check terminal logs
  • 🎉 Your full-stack portfolio is working!

Image description

🛠️ Common Errors

  1. ❌ mvn not recognized Maven isn’t in your PATH

Fix: Add C:\path\to\maven\bin to Environment Variables → Path

  1. ❌ CORS Error Add @CrossOrigin(origins = "*") in your controller

🌐 Future Upgrades

  1. Add Resume Upload
  2. Dark/Light Theme Toggle
  3. Database for storing messages
  4. Deploy backend (Render) and frontend (Vercel)

🙌 Final Notes

Building your own portfolio from scratch using Java + HTML is a great learning experience. You learn how frontend talks to backend, how to build REST APIs, and how to deploy projects.

🔖 Inspired by @devsyncin

Special thanks to @devsyncin community for inspiring clean code, full-stack clarity, and real-world deployment skills.

Top comments (0)