Project Name: "ProductivityPro Suite
Module Name: Personal Portal v1.0
(A progressive Jave full-stack productivity management system)
Project Overview
Objective: Create a professional "digital business card" showcasing your identity as a
developer intern. This static website serves as:
1. Your developer introduction
2. A foundation for future full-stack projects
3. A practical exercise in environment setup
Core Concept: A mobile-friendly webpage that dynamically adapts to different screen
sizes while introducing:
● Your professional background
● Key skills
● Contact information
● Personality through design
Step-by-Step Implementation Guide
1. Environment Setup
Tools to Install:
● JDK 17+ (Adoptium Temurin/OpenJDK)
● IDE: IntelliJ IDEA (Community Edition) or Eclipse
● Git (with Git Bash for Windows)
● Apache Tomcat 10.x
Installation Checks:
bash
Copy
Download
# Verify installations in terminal:
java -version
git --version
# Tomcat: Check $CATALINA_HOME environment variable
2. Create "About Me" Webpage
File Structure:
markdown
Copy
Download
personal-portal/
├── src/
│ └── main/
│ ├── webapp/
│ │ ├── index.html # Main page
│ │ ├── styles.css # CSS styles
│ │ └── images/ # Profile pictures
│ └── WEB-INF/ # (Empty for static site)
HTML Template (index.html):
html
Copy
Download
Run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me | [Your Name]</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Hi, I'm <span class="highlight">[Your Name]</span></h1>
<h2>Java Developer Intern</h2>
</header>
<section class="card">
<img src="images/profile.jpg" alt="Profile Photo">
<div class="bio">
<h3>About Me</h3>
<p>[Short bio - education, interests, career goals]</p>
<ul>
<li><strong>Location:</strong> [Your City]</li>
<li><strong>Skills:</strong> Java, HTML, CSS</li>
</ul>
</div>
</section>
<section class="contact">
<h3>Get in Touch</h3>
<a href="mailto:[email protected]" class="btn">Email Me</a>
<a href="https://linkedin.com/in/your-profile"
target="_blank">LinkedIn</a>
</section>
<footer>
<p>Built with ♥ using HTML/CSS | Deployed on Tomcat</p>
</footer>
</body>
</html>
CSS Essentials (styles.css):
css
Copy
Download
/* Mobile-first responsive design */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
.card {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 25px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
img {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
}
/* Tablet view */
@media (min-width: 768px) {
.card {
flex-direction: row;
/* Desktop view */
@media (min-width: 992px) {
body { padding: 40px; }
.highlight { color: #2c3e50; }
.btn {
display: inline-block;
background: #3498db;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
3. Deploy on Tomcat
Steps:
1. Place personal-portal folder in Tomcat's webapps directory
2. Start Tomcat server:
3. bash
4. Copy
5. Download
# Windows:
%CATALINA_HOME%\bin\startup.bat
# Linux/macOS:
6. $CATALINA_HOME/bin/startup.sh
7. Access page at:
http://localhost:8080/personal-portal/
Git Integration:
bash
Copy
Download
git init
git add .
git commit -m "Initial commit: Static About Me page"
Key Deliverables
Item Acceptance Criteria
Local Tomcat Running without errors on port 8080
server
Webpage Responsive layout on mobile/tablet/desktop
Git repository Committed code with .gitignore (logs/target/)
HTML/CSS Semantic HTML + external CSS (no inline
styles)
Skills Validation Checklist
● Installed all tools without assistance
● Created responsive layout with CSS Flexbox/Grid
● Deployed site via Tomcat (http://localhost:8080)
● Committed code to Git with meaningful message
● Website displays correctly with no broken links
Pro Tip: Use Chrome DevTools to test responsiveness and fix CSS issues in real-time!
Next Step: Task 2 (Servlet-Based CRUD) will convert this static site into a dynamic
contact manager.
3. Responsive Design Logic
Business Value
This project helps you:
1. Establish professional identity: Your "developer brand"
2. Master foundational skills: Git, HTML/CSS, server deployment
3. Create portfolio foundation: Will evolve into full-stack application
4. Solve real-world problems:
○ Cross-browser compatibility
○ Mobile responsiveness
○ Performance optimization
Next Evolution
This static site will transform in subsequent tasks:
● Task 2: Become dynamic with Java Servlets
● Task 3: Add database-backed contact form
● Task 4: Convert to Spring Boot microservice
● Task 5: Get React/Angular frontend
● Task 6: Deploy as cloud-native application
Success Metrics
Your Personal Portal v1.0 is complete when:
● ✅ Loads at http://localhost:8080/personal-portal/
● ✅ Passes HTML Validator
● ✅ Maintains layout at 320px (mobile) → 1920px (desktop)
● ✅ Git history shows incremental progress
"This isn't just a webpage - it's the foundation of your developer identity that will grow
with your skills throughout the internship."
