Spring Terminal Portfolio

Spring Terminal Portfolio

An innovative portfolio website that mimics a classic computer terminal, offering an interactive way for visitors to explore projects and skills through command-line inputs.

Project Overview

This application breaks away from traditional web design by immersing users in a retro CLI environment. The frontend, built with Vue.js, simulates a terminal window where users can type commands like help, projects, or contact. These commands are processed by a robust Spring Boot backend, which serves the requested data dynamically.

Technologies Used

• Frontend: Vue.js, Tailwind CSS
• Backend: Java, Spring Boot
• Build Tools: Maven (Backend), Vite (Frontend)
• Styling: Custom CSS for retro effects (scanlines, CRT flicker)

Key Features

1. Interactive CLI: Fully functional command line with history, tab completion, and typing effects.
2. Dynamic Responses: RESTful API integration where the terminal fetches data from the Spring Boot server.
3. Retro Aesthetics: Authentic visual styling including CRT monitor effects and green-phosphor text.
4. Easter Eggs: Hidden commands and interactions for curious users to discover.

Project Details

The project is structured as a monorepo containing both the client and server applications. The backend exposes endpoints that return JSON data, which the frontend parses and renders as terminal output.

Challenges

• Terminal Simulation: Recreating the specific behaviors of a terminal, such as caret positioning and scrolling, within a web browser.
• Responsive Design: Ensuring the text-heavy interface remains readable and usable on mobile devices.
• State Management: Handling the command history and current directory state effectively in the frontend.

Solutions

• Vue.js Reactivity: Leveraged Vue's reactive data binding to update the terminal display instantly as the user types.
• Tailwind CSS: Used utility classes to rapidly style the layout and handle responsive adjustments.
• Spring Boot: Built a lightweight controller architecture to serve portfolio data quickly and efficiently.

Conclusion

The Spring Terminal Portfolio stands out as a creative showcase of full-stack development skills, merging nostalgic computing aesthetics with modern web technologies.