Hello 👋,
I’ve recently completed a new project for my portfolio that I’d like to share with you. It’s a website for the fictional “Anomaly Agency”, founded by the much-loved (especially by me) characters Mulder and Scully from The X-Files. I felt that my portfolio could use a business website, but I also wanted to make sure that the project was fun for me personally. The “Anomaly Agency” was founded by the two agents after they left the FBI (at least that’s what I came up with). There should also be a few employees. In my opinion, Walter Skinner absolutely had to be there and they also needed a hacker. Of course, the first thing I thought of was “The Lone Gunmen”, but I had forgotten - spoiler alert? - that they had died in the series. So a substitute had to be found: Lisbeth Salander from the Millennium Trilogy by Stieg Larson, of course. And in the form of the one and only Noomi Rapace.
Direct link to Anomaly: https://mdohr07.github.io/anomalyagency/
Why Anomaly Agency?
The idea to build a site around Mulder, Scully and their agency came to me quickly. The challenge was to give the whole thing a realistic look to make the site appear serious. The biggest challenge was to make the website look real and authentic, despite the unusual theme.
Technologies and challenges
The website consists mainly of HTML and CSS, with a small JavaScript snippet for that certain something. The biggest challenge was originally the responsiveness due to the vertical navigation. However, after a restart and a cleaner implementation, I was able to successfully realize the site.
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
// Every element in the array is accessed as "entry" //
if (entry.isIntersecting) {
// if is intersecting, add class "show" //
entry.target.classList.add('show');
} else {
// to do this multiple times, remove the class when not intersecting //
entry.target.classList.remove('show');
}
});
});
const hiddenElements = document.querySelectorAll('.hidden');
// observe and loop over hidden elements //
hiddenElements.forEach((el) => observer.observe(el));
The color scheme is based on the original X-Files design, but with a calmer shade of green. I kept the horizontal navigation, despite initial difficulties, because it looks elegant and is not used that often.
From this project I’ve learned to be economical with the design, but also to be bold and make statements. This will definitely be incorporated into my next project.
Looking to the future: 3D and frontend design
Now that this project is complete, I’m toying with the idea of combining 3D and frontend design. I know this has been a big trend for the last year or so. However, I haven’t looked into it yet and don’t know what to expect.
Why this in particular? Not just because it’s “in” at the moment. It’s more because I’m still practising my art as a hobby. And yes - I can also do 3D. I recently set about putting together a small scene in Blender. It then occurred to me whether and how this could be used in a website. I think that would be really exciting to try out! As I’m only doing the 3D model “on the side”, it will unfortunately take me a while to finish it. But when it’s ready, I’d like to take a closer look at the possibility of a frontend based on it! 🤓
Finally, I am looking forward to expanding my knowledge in frontend design and exploring the possibilities of 3D in future projects.
Thanks for reading, and see you soon! 👽✨