A modern, interactive personal portfolio website showcasing computer science and engineering projects. Built with React, TypeScript, and Tailwind CSS, featuring live emulator, cryptography demos, and documentation of advanced hardware control systems.

This portfolio website provides interactive demonstrations of advanced computer science concepts through live, in-browser applications powered by WebAssembly. Visitors can:

• Execute assembly code on a simulated CS4380 CPU with real-time instruction tracking
• Encrypt/decrypt messages using RSA and DES algorithms
• View detailed execution metrics including memory cycles, PC values, and instruction disassembly
• Step through instructions one-by-one or run programs at full speed

• Interactive Emulator Demo: Load and execute assembly programs in the browser
• Real-time Visualization: Watch the program counter, instruction, and memory cycles update as code executes
• Multiple Test Programs: Pre-loaded programs including Fibonacci calculator and comprehensive test suites
• Execution Modes:
  • Animated mode with throttled updates (100ms) for visual clarity
  • Single-step mode for detailed instruction-level debugging
  • Fast-finish mode to complete execution instantly
• Memory Cycle Tracking: Accurate cycle counting accounting for cache operations
• Debug Console: Dual-mode output (regular and debug) with syntax highlighting

• RSA Encryption: Asymmetric encryption demonstration with key generation and message encryption/decryption
• DES Encryption: Symmetric encryption showcase with block cipher operations
• Both implement full encryption pipelines compiled from C++ to WebAssembly

• Responsive design with gradient animations and smooth transitions
• Animated tech tags with gradient fill effects
• Interactive buttons with scale and hover effects (400ms transitions)
• Syntax-highlighted console output with color-coded debugging information
• Modular component architecture for easy extension

• Project Overview: Autonomous electric tug vehicle developed in collaboration with Rocky Mountain Power and Provo International Airport
• Hardware Integration: Control systems for DC motors, stepper motors, servos, and solenoids
• Autonomous Capabilities: Navigation and operational autonomy systems
• Control Architecture: Onboard microcontroller systems for coordinated motor control
• Project Documentation: Comprehensive photo gallery and technical documentation
• Repository Status: Private repository required by project stakeholders

Frontend:

• React 19 - UI framework
• TypeScript 5.9 - Type-safe development
• Tailwind CSS 4.1 - Utility-first styling
• Vite 7.3 - Fast build tool and dev server
• React Router 7.11 - Client-side routing
• React Icons 5.5 - Icon library
• React Tooltip 5.30 - Tooltip components
• xterm 5.3 - Terminal emulation

Backend/Compilation:

• Emscripten - C++ to WebAssembly compiler
• C++ - Algorithm implementations

Development:

• ESLint 9 - Code linting
• TypeScript ESLint - Type-aware linting

• Node.js 16+ and npm
• Emscripten (for building WASM modules)
• CMake 3.15+ (for building C++ projects)

1. Clone the repository

   git clone https://github.com/mackaygrange/PersonalSite.git
   cd PersonalSite

2. Install dependencies

   npm install

3. Build WebAssembly modules (if needed)

   # Build CS4380 emulator
   cd src/projects/cs4380-emulator-assembler
   ./build_wasm.bat    # Windows
   ./build_wasm.sh     # Linux/macOS
   
   # Build RSA encryption
   cd ../RSA_Encryption_Project
   ./build_wasm.bat
   
   # Build DES encryption
   cd ../DES_Encryption_Project
   ./build_wasm.bat

npm run dev

Open your browser to http://localhost:5173 (or the port shown in terminal).

npm run build

Output will be generated in the dist/ directory.

npm run preview

PersonalSite/
├── src/
│   ├── index.html              # Entry HTML file
│   ├── css/
│   │   ├── index.css           # Global styles
│   │   └── tailwind.css        # Tailwind imports
│   ├── assets/
│   │   └── images/             # Project images
│   ├── ts/
│   │   ├── index.tsx           # React app entry point
│   │   ├── components/         # Reusable React components
│   │   │   ├── EmulatorDemo.tsx           # CS4380 emulator interface
│   │   │   ├── RSAEncryptionDemo.tsx      # RSA crypto demo
│   │   │   ├── DESEncryptionDemo.tsx      # DES crypto demo
│   │   │   ├── Header.tsx                 # Navigation header
│   │   │   ├── ContentCard.tsx            # Reusable card component
│   │   │   ├── TechTag.tsx                # Technology badge
│   │   │   ├── RepositoryLink.tsx         # GitHub link button
│   │   │   └── ...
│   │   ├── hooks/
│   │   │   ├── useWasmLoader.ts           # WASM module loader hook
│   │   │   └── useEmulatorWasm.ts         # Emulator-specific hook
│   │   ├── pages/
│   │   │   ├── Home.tsx                   # Landing page
│   │   │   ├── About.tsx                  # About page
│   │   │   ├── Projects.tsx               # Projects showcase
│   │   │   ├── Gallery.tsx                # Project gallery
│   │   │   └── Contact.tsx                # Contact page
│   │   └── tsconfig.json
│   ├── projects/
│   │   ├── cs4380-emulator-assembler/    # CS4380 CPU emulator
│   │   │   ├── src/
│   │   │   ├── include/
│   │   │   ├── asm/                       # Assembly program examples
│   │   │   ├── assembler/                 # Python assembler
│   │   │   └── CMakeLists.txt
│   │   ├── RSA_Encryption_Project/       # RSA implementation
│   │   │   ├── src/
│   │   │   └── rsa_wrapper.cpp
│   │   ├── DES_Encryption_Project/       # DES implementation
│   │   │   ├── src/
│   │   │   └── des_wrapper.cpp
│   │   ├── ElectricTugCapstone/          # Senior capstone project
│   │   │   ├── documentation/             # Technical documentation
│   │   │   ├── images/                    # Project photos and diagrams
│   │   │   └── README.md                  # Capstone project details
│   └── public/
│       └── wasm/                          # Compiled WASM modules
│           ├── emu4380_demo.js
│           ├── rsa_demo.js
│           └── des_demo.js
├── public/                    # Static assets
├── dist/                      # Production build output
├── vite.config.ts            # Vite configuration
├── tailwind.config.js        # Tailwind CSS configuration
├── tsconfig.json             # TypeScript configuration
└── package.json              # Project dependencies

1. Load a Program: Select from the dropdown menu (Program A, B, C, D, or test suites)
2. Execute:
   • Click Run to watch execution with animated updates
   • Click Step to execute one instruction at a time
   • Click Finish during execution to complete without delays
3. Monitor:
   • Current Instruction window shows PC, disassembled instruction, and memory cycles
   • Console output displays program output and debug information
   • Registers window shows all register values in real-time
4. Debug:
   • Toggle Debug Mode to see internal emulator messages
   • Use input dialog when program requests input

1. Enter Message: Type your message in the input field
2. For RSA: Generate keys, then encrypt/decrypt your message
3. For DES: Enter a key and encrypt/decrypt your message
4. View results with detailed operation metrics

1. Project Overview: View comprehensive documentation of the electric tug system
2. Photo Gallery: Explore high-quality images of the prototype, components, and assembly
3. Technical Details: Learn about the control architecture and component specifications
4. Project Information: Understand the collaboration with Rocky Mountain Power and Provo International Airport
5. Repository Access: Note that the source repository is private per project requirements

The project uses ESLint with TypeScript support. Run linting:

npm run lint

1. Create a new .tsx file in src/ts/components/
2. Use TypeScript for type safety
3. Style with Tailwind CSS classes
4. Follow the existing component patterns

Each C++ project has its own build script:

• Windows: build_wasm.bat
• Linux/macOS: build_wasm.sh

These scripts compile C++ to WebAssembly using Emscripten and output JavaScript loader files to src/public/wasm/.

• Emulator UI updates throttled to 100ms intervals during animated execution
• Prevents excessive WASM calls that slow down execution
• Fast-finish mode runs synchronously without UI updates

• Accurate cycle counting using internal mem_cycle_cntr from emulator
• Accounts for cache hit/miss timing
• Resets properly on program load and reset

This portfolio demonstrates:

• CPU Architecture: Fetch-decode-execute cycle simulation with realistic memory timing
• Assembly Programming: Loading and executing real assembly code with visible state changes
• Cryptography: RSA public-key and DES symmetric encryption implementations
• Web Technologies: React, TypeScript, WebAssembly integration
• Software Engineering: Modular design, performance optimization, user experience
• Hardware Control Systems: Embedded systems design for autonomous vehicle applications
• Systems Integration: Coordinating multiple motor types and actuators in a complex system
• Industrial Collaboration: Practical engineering in partnership with real-world stakeholders

• Ensure WASM files are built: Run build_wasm.bat in each project folder
• Check browser console for specific errors
• Verify WASM files exist in src/public/wasm/

• Use "Finish" button to skip animation delays
• Program D contains longer execution sequence - expected to take several seconds
• Try reducing number of display updates

• Toggle "Debug" mode in emulator controls
• Check browser console for any JavaScript errors

This project is licensed under the MIT License - see the LICENSE file for details.

Contributions are welcome! Please feel free to:

• Report bugs
• Suggest new features
• Submit pull requests

• GitHub: mackaygrange
• Project Repositories:
  • CS4380 Emulator-Assembler
  • RSA Encryption Project
  • DES Encryption Project

• CS4380 CPU Architecture course materials
• Emscripten documentation and community
• React and TypeScript communities
• Tailwind CSS for styling utilities

Last Updated: January 2026

For detailed information about individual projects, refer to their respective README files in the src/projects/ subdirectories.