Weekly Round-up #2 - Portfolio Site, Destiny 2, Redesigning a Site
Lets talk about my new portfolio website, and how sick and awful Destiny 2 is

Dev
New Portfolio Site
Due to a variety of reasons, I have (mostly) made a new Portfolio website. One of the trends I have seen in the last few years is really basic portfolio sites, or even npm packages you can run with npx which display a persons details in terminal. I think these ideas make sense, and after the years of some really extra personal websites, this is a good logical step for everyone.
So I decided to do that as well, but write a little React app around the portfolio sections that looks and acts like the Amiga OS 1.3 desktop. I have a lot of reverence for the Amiga. My father let me use (and ultimately I took it with me when I left home) his Amiga 500. As a kid, it fascinated me because it was a computer I could use before I had a modern computer I could use. There were plenty of games I could play, and I still buy new ones occasionally when I see ones one eBay which seem interesting.
There's some really amazing stories around the 80's home computer scene too. If it's something you're interested in, I can recommend "The Future Was Here: The Commodore Amiga" from the MIT Platform Studies series. It looks at the story of the Amiga, and how it changed computing culture.
Anyway, that was a bit of an aside to my portfolio website. So back on track, here is what my old site looked like:

At this time, this made sense. I was going for something slick, patterned and clean looking. It uses no JS frameworks, and is just some CSS (man what a wild world it used to be in 2014 when I made this).
Here's a screen grab of the WIP new portfolio site:

So clearly I am going for something completely different now. It has been created using React Hooks + Typescript with the Create React App (A little heavyweight, I may eject at some point to lighten up). If you look up what the Amiga OS 1.3 looks like, then I hope you get what I am doing here. You can click on the icons to load up a different section of my portfolio in a little window.
You may also ask why I have made it look like this at all, and for me the answer is simple; The things I choose to represent me, I feel should actually represent me and my interests. There is a whole world of super professional people out there, and I don't want to be like everyone else. And the Amiga is sick.
There are 3 React functional components in play here, Desktop, Windoe* and Icon.
Desktop
is the entire draggable area which Windoe
's can reside.
Windoe
encapsulates all the window functionality, and just renders the children it is passed as the inner of the windoe. The methods for resizing, positioning etc exist in this function.
Icon
is a really basic component which basically renders an image (or lack of image in the case of previous_work, I hope that little joke doesn't come back and bite me when an employer looks at this site) and some text, and has an onclick handler.
Windoe
's are children of the Desktop
component, and are passed down a reference to the Desktop
DOM element. This is necessary for the resizing and moving interactions, as we need a canvas larger than the Windoe
's DOM element itself for the mouse/touch movement to occur. With this reference, everytime useEffect
is called for a Windoe we can set the correct event listeners:
useEffect(() => {
props.desktopRef.current.addEventListener('mousemove', handleMouseMove);
props.desktopRef.current.addEventListener('mouseup', handleToolbarRelease);
props.desktopRef.current.addEventListener('touchmove', handleTouchMove);
props.desktopRef.current.addEventListener('touchend', handleToolbarRelease);
return () => {
props.desktopRef.current.removeEventListener('mousemove', handleMouseMove);
props.desktopRef.current.removeEventListener('mouseup', handleToolbarRelease);
props.desktopRef.current.removeEventListener('touchmove', handleTouchMove);
props.desktopRef.current.removeEventListener('touchend', handleToolbarRelease);
}
}, [props.desktopRef, position, size]);
You'll also notice that in the useEffect
dependencies are the position
and size
. These are useState's on the Windoe
component. I didn't know this, but despite being in the same scope in my mind, without them being set as a dependency then the eventlisteners methods will only have access to their values as when the component was created. Even if you use the correct setter methods. So by setting them as a dependency, what I believe is happening is the event listener is being re-set, and thus getting the now updated values from being dragged.
One other bit of weirdness in the Windoe
component is that there are a bunch of local state variables which help with knowing when the Windoe
is being dragged, or where it started being dragged from. Originally these were created using the useState
hook, however we would then need to list them as a dependency of the useEffect
hook to be available in the event listeners. Instead, they are created using useRef
, the same method used for the Desktop
DOM reference. Because we're not updating these all the time, these just means we have a persistent values for them between re-render. For instance, one of them is a beingDraggedRef
boolean, which lets us know on the mouse being moved in the Desktop
DOM element whether we need to run any of the dragging calculations.
Another important thing was a pure text verison. I added touch support for the windows in terms of resizing and positioning, but this is just awful for mobile use. The beauty of using React for this is I can re-use the same inner window components for the text version, so I only have to update the content once. It almost makes bundling the entirety of React worth it!!!
There are also a couple of bugs which I haven't had the time to figure out yet. The way I am working out the content for a window is having an array of open window "types" in the Desktop
component, and matching that to a key-value object of functions. When you click on a background window, you want it to come to the top. So I splice the value of the array, and push it back to the top so the window on top renders last (and therefore on top). By doing this, I assume it instantiates a new functional component (as its a new entry into the array), and scrolls the user back to the top of the window. Odd and neat!
The code for the portfolio site can be found here: https://github.com/EdwardJFox/portfolio-site. It's missing all the content and it's not deployed onto my site yet, but it's hopefully a nice basic example of using draggable components in React.
*Years ago at University I was working on a pure JavaScript windows system for the web. I wanted to call it Windoe, so this is a homage to the younger more optimistic me.
Games
Destiny 2

In October of 2019, Destiny 2 had a huge portion of the game go free-to-play. In the past I have a pretty tumultuous time with Destiny. I got the original game just as Taken King came out with the purchase of my Xbox One. For a while the game had me hooked, but after a couple of weeks I had dropped the game and not even touched it.
Then Destiny 2 came to PC, and at some point it was free on the Battle.net client for a week or so. I played it, thought the game looked really good and played nicely, but it wasn't for me.
Then New Light came out (the F2P version of the game), and now I can't put the game down. For the first time in any game, I have managed to finish a Season pass with the Undying, and now this current season I am halfway to finishing as well. The gunplay is so far ahead of everything else like it by just keeping it simple. Even just shooting the basic enemies feels weighty, sharp, and worthwhile in the feedback it gives you.

Also I don't actively take part in the community aspect, and haven't got involved with raiding. But from the resources the community makes, they seem just as committed as any other online game I have ever seen. Some of the websites out there for viewing gear stats, drops etc rival some of the biggest MMO websites like Wowhead. It's amazing, and I understand why Bungie is focusing so heavily on this series.
It's not all amazing though, there are some serious issues with the things around the core gameplay. But there's a story to how Destiny 2 has become the game it is, and there are far better places to learn about that than here, but Bungie themselves are in this weird, independent place again. I think they don't know how to make a game like this.
For today I am going to talk about the bounty system. With New Light, Bungie has removed character specific leveling and XP. Instead, you level up an account wide season pass shared across all your characters. I think with the current state of the game, this was a good change. What isn't good though, is that these bounties are time limited to 24 hours/7 days, and you can only pick up a limited amount every day. The 24 hour ones only give you 10% of the experience needed to go up a season pass level. The idea seems fine, but they have a bunch of caveats:
- You need to travel to the tower to pick them up. On console, this is like 2 minutes of loading in, to spend 2-3 minutes running around to each vendor.
- You can only hold a limited amount. For experienced players this might be fine, but my quest log is absolutely stuffed with things to do in this game. This means I realistically need to make several trips to the Tower in a single session.
- Some are ones I just don't want to do at all, but the season pass incentivises me to do things I enjoy less to finish the season pass.
That last point hurts the most, because the gunplay is the part I enjoy the most. But I don't like all the guns. I dislike using the Fusion Rifles, but 4 times a week I need to kill 50 enemies with Fusion Rifles. This season of Iron Banner involves multiple tasks of using weapons I don't like before I can even get a chance to get the gear I want. As a casual player, these are all incredibly off-putting to my longevity with the game.
I'm 3 months into my Destiny 2 life, and thats equaled a couple hundred hours. I hope I have more with it, because I truly believe this is one of the best games of this console generation. But Bungie needs to streamline the game so that you can be rewarded doing the things you enjoy doing, and letting me do them when I want to. Some weeks I just don't want to do Gambit, or use Pulse Rifles, or use Swords. And some weeks I do.
No one wants their games to feel like a job.