Terminal Portfolio Website

⚠️ Note: This project is currently under active development and construction. Features and documentation may change frequently.

Table of contents

• Overview
• Features
• Technologies
• Installation
• Usage
• Current Development Status
• Design & Functionality Inspiration
• Author

Overview

A modern terminal-style portfolio website that offers an immersive command-line experience. Built with Next.js and TypeScript, it provides an interactive way to explore my projects, skills, and background through familiar terminal commands and ASCII-based interfaces.

Features

• Real terminal emulation with command processing
• Interactive command-line interface with custom prompt
• Responsive design that works on desktop and mobile
• Command history navigation (up/down arrows)
• Tab completion for commands and arguments
• Custom ASCII art and animations
• Multiple built-in commands and utilities

Technologies Used

Core Technologies

• Next.js - React framework for production.
• TypeScript - JavaScript with syntax for types.
• TailwindCSS - Utility-first CSS framework.
• Bun - Modern JavaScript runtime and package manager.

Additional Dependencies

• detect.js - User-Agent detection library.
• DOMPurify - XSS sanitizer for HTML and MathML.
• ESLint - Code linting tool.
• PostCSS - CSS transformation tool.
• Prettier - Code formatting tool.
• ascii-silhouettify - Generate custom ASCII art from any image.

These technologies enable

• Server-side Rendering & Static Generation:

  • Optimized page loads and SEO performance.
  • Pre-rendered content for faster initial loads.

• Type-Safe Development:

  • Robust code with TypeScript integration.
  • Early error detection and better IDE support.

• Modern Styling Architecture:

  • Responsive layouts with TailwindCSS.
  • Maintainable and scalable CSS structure.

• Enhanced Security:

  • XSS protection with DOMPurify.
  • Sanitized user inputs and content rendering.

• Cross-Platform Compatibility:

  • Intelligent browser detection.
  • Adaptive features based on device capabilities.

• Development Excellence:

  • Automated code formatting.
  • Consistent code style enforcement.
  • Comprehensive linting rules.

Installation

# Clone the repository
git clone https://github.com/souleymanesy7/terminal-portfolio-website.git

# Navigate to project directory
cd terminal-portfolio-website

# Install dependencies
bun install

# Start the development server
bun dev

Usage

Type help in the terminal interface to see available commands. Here are some basic commands:

• about - Learn more about me.
• clear - Clear the terminal screen.
• date - Display current date.
• exit - Close terminal session.
• help - Show available commands.
• hostname - Display system hostname.
• neofetch - Display system info.
• projects - View my portfolio projects.
• sudo - Try to gain admin access.
• theme - Change terminal theme.
• time - Show current time.
• welcome - Show welcome message.
• whoami - Show current user info.

Current Development Status

• Basic terminal interface
• Core command functionality
• Mobile responsiveness
• Basic animations and transitions
• Custom typing animations and effects
• Advanced features and animations
• Command history navigation
• Command auto-completion
• Complete project showcase
• Persistent storage for settings
• Easter eggs and hidden features
• Multiple themes support

Design And Functionality Inspiration

This project draws inspiration from these amazing developers and their work:

• M4tt72's Terminal - Clean terminal design and functionality.
• Forrest's Portfolio - Creative terminal-based portfolio implementation.

Author

• GitHub - Check out my Github & projects.
• Frontend Mentor - See my frontend challenges.
• Dev Challenges - View my coding solutions.
• Twitter - Follow me for updates.

Connect with me to discuss web development, collaboration opportunities, or just to say hi! 👋

---

⚡️ Note: This README will be updated as the project evolves.