Skip to content

Jsackitey1/sackitey-portfolio

Repository files navigation

Joseph Sackitey Portfolio

A nostalgic Windows 95-themed desktop portfolio that transforms your browser into an authentic retro computing experience. Showcasing my skills, projects, and professional experience through an interactive desktop interface.

Live Portfolio

Visit the live portfolio: https://jsackitey.dev

Project Overview

This portfolio website recreates the classic Windows 95 desktop experience using React, TypeScript, and Vite, featuring:

  • Authentic Windows 95 Desktop Interface: Complete with desktop icons, draggable windows, taskbar, and start menu
  • Interactive Desktop Icons: Each portfolio section opens as a separate window when double-clicked
  • Classic Windows 95 Styling: Authentic colors, 3D borders, and pixel-perfect icons
  • Retro Games Collection: Playable Minesweeper, Pong, and Snake games
  • Draggable Windows: Move, resize, minimize, and maximize windows just like Windows 95
  • Welcome Window: Interactive launcher with tips and quick access buttons
  • Responsive Design: Works across all screen sizes with mobile-optimized window positioning

Desktop Features

🖥️ Desktop Environment

  • Desktop Icons: About Me, Experience, Projects, Tech Stack, Blog, Contact, Resume, LinkedIn, GitHub, and Games
  • Taskbar: Start button, open window buttons, and real-time clock
  • Start Menu: Quick access to all portfolio sections
  • Window Management: Full Windows 95-style window controls (minimize, maximize, close)

📁 Portfolio Sections

  • About Me: Personal background with Profile and Education tabs
  • Experience: Professional work history and achievements
  • Projects: Showcase of featured projects with detailed descriptions
  • Tech Stack: Comprehensive display of programming languages and frameworks
  • Blog: Collection of technical articles and insights
  • Contact: Interactive contact form and social media links
  • Resume: Direct PDF download link
  • External Links: LinkedIn and GitHub profile access

🎮 Retro Games

  • Minesweeper: Classic Windows 95 minesweeper game
  • Pong: Retro paddle game with smooth animations
  • Snake: Classic snake game with Windows 95 styling
  • Game Launcher: Centralized hub for all games

🎨 Authentic Windows 95 Experience

  • Pixel-Perfect Icons: Custom SVG icons with authentic Windows 95 styling
  • 3D Window Effects: Proper inset/outset borders and shading
  • Classic Color Scheme: Original Windows 95 colors and gradients
  • Responsive Design: Optimized for desktop, tablet, and mobile devices

Technologies Used

Frontend

  • React 19 - Modern React with hooks and functional components
  • TypeScript - Type-safe JavaScript for better development experience
  • Vite - Fast build tool and development server
  • CSS3 - Custom Windows 95 styling with authentic colors and 3D effects
  • SVG Icons - Custom pixel-perfect Windows 95-style desktop icons
  • HTML5 Canvas - For game rendering (Pong)
  • Local Storage - For game state persistence

Game Development

  • React Game Logic - Custom implementations for Minesweeper, Pong, and Snake
  • Canvas API - Real-time game rendering and animations
  • Event Handling - Keyboard and mouse controls for games

Deployment

  • GitHub Pages - Static site hosting
  • Vite Build - Optimized production builds

Technical Implementation

Architecture

  • Component-Based: Modular React components for each desktop element
  • State Management: React hooks for window management and desktop interactions
  • Lazy Loading: Dynamic imports for optimal performance
  • Event Handling: Custom mouse and keyboard event handlers for desktop interactions

Key Components

  • Desktop: Main container managing windows, icons, and taskbar
  • DesktopIcon: Reusable icon component with Windows 95 styling
  • Window Management: Custom hooks for dragging, resizing, and z-index management
  • Games: Individual React components for Minesweeper, Pong, and Snake
  • Welcome Window: Interactive launcher with tips and navigation

Performance Optimizations

  • Lazy Loading: Portfolio sections load only when opened
  • Responsive Design: Mobile-first approach with breakpoint-specific layouts
  • Optimized Assets: Compressed images and efficient SVG icons
  • Build Optimization: Vite's production optimizations for fast loading

Local Development

  1. Clone the repository
git clone https://github.com/jsackitey1/sackitey-portfolio.git
cd sackitey-portfolio
  1. Install dependencies
npm install
  1. Start the development server
npm run dev
  1. Build for production
npm run build
  1. Deploy to GitHub Pages
npm run deploy

Key Features

🎯 Windows 95 Authenticity

  • Desktop Wallpaper: Classic Windows 95 Bliss wallpaper background
  • Window Controls: Authentic minimize, maximize, and close buttons
  • Taskbar: Start button, window management, and real-time clock
  • Icon Styling: Pixel-perfect desktop icons with proper 3D effects
  • Color Scheme: Original Windows 95 colors (#c0c0c0, #808080, #316ac5)

🎮 Interactive Elements

  • Draggable Icons: Move desktop icons around the desktop
  • Draggable Windows: Click and drag windows by their title bars
  • Window Management: Minimize, maximize, and close windows
  • Responsive Windows: Automatic positioning and sizing on mobile devices
  • Game Controls: Keyboard and mouse controls for all games

📱 Responsive Design

  • Mobile Optimized: Touch-friendly controls and window positioning
  • Tablet Support: Optimized layouts for medium screens
  • Desktop Experience: Full Windows 95 experience on larger screens
  • Cross-Browser: Compatible with modern browsers

Getting Started

The portfolio opens with a welcome window that provides:

  • Tips for navigating the Windows 95 interface
  • Quick access buttons to all portfolio sections
  • Information about the desktop experience

How to Navigate

  1. Double-click desktop icons to open portfolio sections
  2. Use the taskbar to switch between open windows
  3. Click the Start button for quick access to all sections
  4. Play retro games by opening the Games icon
  5. Drag windows and icons around the desktop

Contact

Feel free to connect with me for job opportunities or collaborations!

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published