When I decided to create my portfolio website, I wanted something that would stand out and showcase not just my projects, but also my personality and attention to detail. I chose to do the Windows retro style because it looked y2k and I liked the aesthetic. I made this portfolio website in vanilla HTML, CSS, and JavaScript. In retrospect, I should have used React or some other framework to make the website more efficient and easier to maintain. The site is mostly a jumble of hacked together code. It looks great to me though, and I am especially proud of the desktop icons and projects page.

The Design Process

The first step was planning the layout and user experience. I had a few ideas in mind, but after looking at some templates, I found that I did not like any of the minimalist ShadCN/DaisyUI designs. They looked very generic and didn't inspire me much. I looked at old 2000s websites and liked the chaos and lack of consistency across the site. I did add flexbox rules to make this portfolio site look more cohesive.

The Code

This site is mostly HTML and CSS, so it is not 'real' programming. I did use JavaScript to make the desktop icons work, and to make the site more interactive. Working on the desktop icons was a fun challenge, and I am proud of the results.

The desktop.js file implements the logic for the window management system through the following components:

  • Event Delegation: The script uses event bubbling to handle window interactions (dragging, resizing, minimizing) through a central event listener on the desktop container, rather than attaching listeners to each window.
  • Window State Management: Each window's state (position, size, z-index) is tracked and updated dynamically. The z-index stack ensures proper window layering when clicking between multiple windows.
  • Drag Implementation: Mouse events (mousedown, mousemove, mouseup) are used to implement dragging. The script calculates offset positions and updates window coordinates in real-time.
  • Resize Functionality: A resize handle in the bottom-right corner triggers the resize mode. The script maintains aspect ratios and minimum dimensions while allowing smooth resizing through mousemove events.
  • Window Controls: The minimize, maximize, and close buttons are implemented through DOM manipulation, with state preservation for restore operations.

The system uses CSS transforms for smooth animations (very important otherwise it looks laggy). All window states are managed in memory, allowing for complex interactions like dragging partially off-screen windows or handling multiple overlapping windows efficiently.

← Back to Blog