Visit the Site - https://jeju43.vercel.app

The Project

This is a project that I have wanted to do for a long while. Before I started doing web dev I was a teacher, and I taught in South Korea for several years. At one point I was living in Jeju Island and there, between the end of World War II and the Korean War, there was an incident (read: uprising and massacre) that occurred there. I learned about it a lot, and have wanted to share that knowledge and information with the broader English-speaking world (most of the information is only available in Korean). And so, this project was born.

I'm writing this post now, even though it is technically not complete yet. As of writing, I would describe the site as being... 70% finished? The basic functionality is there, but the UI is still in its initial form. I'm still trying to learn more about 3D modeling and creating a better, more artistic looking design. However, due to various other commitments I'm not sure when that will be able to be done.

The Design

The current design is designed to allow a visitor to find different events that occurred during the Jeju 4.3 Incident. The home page is a map of Jeju Island (SVG image) with the different regions being selectable. Click on a region and it moves into a regional map (currently just a snap from Google Earth) view. On the regional map there are image markers for the specific 4.3 event. Since all the markers are the same, if you hover on the image a tool tip appears with the event name and date. Click on the event marker and you can read about that specific event.

There is a sidebar menu to navigate to other pages. On the other pages visitors can read a more comprehensive overview of the 4.3 Incident and find other links to get more information on external sites.

The Process

Getting this project started was probably the most difficult thing. That's because I really wanted it to be a good site. For me personally, the Jeju 4.3 Incident is something that I really want people to know more about, so I wanted it to be a site that was both very useful (and easy to navigate), but also a site people wanted to look around. Like, the site looks so nice that you just want to click around and see all the pages and stuff.

Unfortunately, those kind of advanced art and design things are a little beyond me at the moment. I did a lot of research and watching about how it might be done, and I think with a lot of work the site that I want may be somewhat possible. The site that I referenced in terms of visual was the Chartogne Taillet site. I don't think my site will ever reach that level, but maybe something similar, but simpler.

Starting at the home page, the full Jeju map was the first task. While Wikipedia has an SVG map of Jeju, it's not split into regions, so that one wasn't useable straight away. I used Abobe Illustrator to create a simple new SVG that was divided into the different regions. I just traced the map using the pen tool and adjusted the curves to match. Because I used Next JS for this project, the generated SVG data needed a little tweaking to match React syntax. This was not difficult, but it was slightly annoying to have to do.

The next step was to get the map to highlight the area and display the name on mouse over. Again, this wasn't a very hard step, but since it was the first time doing it, it took a little research to find out how to do it. The solution was to pass a 'onMouseOver' event and have it loop through the attributes to find the name and pass the name as a callback value.

The next task was to tackle the different region pages. The map went through a couple versions. The first was a more simple 'drawing' of the region and the second is the current one - the Google Earth snap. Both have their good and bad points, and while I'd like to switch back to a drawing version for now I decided to stick with the Google Earth snap. The other issue was to deal with how to get the map and event markers to look decent on different viewports and to scale with each other properly. The solution I went with was to have two separate maps - one for web and one for mobile. Initially the web map is set to display (mobile is set to display: none), and then when the screen hits a certain size the settings flip. It's not a very elegant solution, but it does the trick for now.

The final step for the main section of the site was to get the events to connect to the data in Contentful. This was quite simple as I use the Next JS and Contentful combo with this site, so I've done the hook up before.

The final overall step was to do the navbar and the other information pages. The navbar was simple enough, although it still needs a little work to make the animation a little nicer. The other pages were also quite simple since there is no real special additions to them.

The Stack

Next JS remains my preferred framework for website building. As such I decided to go with it again. I also went with Contentful again because I was already comfortable with the data fetch using React. For now, not many other libraries were used in the site. Just React Icons and React Tooltip.

Adobe Illustrator, Adobe Photoshop, and Figma were used in various manners for support. Figma was used to prototype the design for the website. Illustrator and Photoshop were used to develop some of the assets used with the site.

Reflections

Before I said I consider this site to be about 70% complete. And I would say that so far I'm about 70% satisfied with the site. And those two things are basically for the same reason. I'd really like the region maps to look a lot better. I feel like if the maps look more like I want them to look like, I will feel very proud of this site. I'd like to add more events to the site as well, but living in the US makes that slightly difficult as I'm limited to internet searches rather than being able to actually visit sites.

The other pages are fine, but I'd like to add some finishing touch type stuff to make them a little nice - simple animations or whatnot. Maybe some images if possible. The navbar is quite crowded so it probably needs a little clean up or slight re-design to make it easier to use.

Overall, I think it's a decent site and with a little more time and work it'll be a good site. As a small aside I'd like to thank Darryl Coote (The Jeju Massacre) and Jeju Dark Tours for providing feedback and information about the site and Jeju 4.3 Incident.