Back to projects

Spring Terminal Portfolio

A unique developer portfolio presenting a command-line interface experience powered by Spring Boot and Vue.js.

Vue.jsTailwind CSSJavaSpring BootMavenVite
Source Code

# 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.