The Completion of DevvsPhotoDump Website!
Devan C. Lee
DevvsPhotoDump: A Journey in Web Development and Photography
Date: July 15th, 2025
Today, I can confidently say that the website of the DevvsPhotoDump project is complete!
This website took me a few months to build, and I had a ton of fun developing it!
First and foremost, I want to explain why I decided to create this website in the first place.
Why I Built This Website
Some of the biggest passions in my life are creating things and photography. I've always been an avid creator—whether it's music, photography, editing, websites, etc.—I've always liked to create things that I could confidently claim are of my own creation.
Photography has always been a niche interest of mine. I have always loved the way I could capture moments—literal memories through cameras—and hold onto perspectives of the world through my eyes.
With these two interests in mind, that gave way to the idea of DevvsPhotoDump: I wanted to create an archive in which I can showcase pictures from my world and save them as memories, not just for myself, but for others to see.
But this is not just any archive; it's a library, a library in which I can index my photos.
Because of that, I decided to start up this website project in December 2024. I chose the website format as it was the first thing that came to mind, as I could teach myself a valuable skill in coding, and so it could also double as a professional portfolio for myself.
Funny thing; DevvsPhotoDump.com was not the original website that I wanted to launch. Originally, I had no known skill or prior knowledge of how to create a website, and I had intended to create an eCommerce website.
Unfortunately, without any knowledge behind HTML, CSS, and JavaScript, that goal was quite difficult to reach... and so instead, I quickly got to work on learning the fundamentals of HTML and CSS, and began working on a more tame project; which was DevvsPhotoDump.
Learning the Basics of Frontend Development
I used this website: W3Schools HTML Tutorial to teach myself the fundamentals of HTML, CSS, and JavaScript.
HTML and CSS are actually surprisingly easy languages to learn and comprehend. They're really clean-cut and straight to the point, and their swiftness helped me learn them pretty well. I would say the only difficult section of the learning process was learning about how to accurately use the <div> function correctly.
Not only were HTML, CSS, and JavaScript really fun to learn, but the community revolving around these languages was super cool as well!
I had a ton of fun looking at some of the cool things other people had created with these languages, and it really helped me learn the fundamentals of some of the most "generic" things people usually see in their webpages, like hotbars, tabs, and navigation menus.
The learning process was immensely enjoyable, fueled by a cool and creative community. My creativity truly unlocked when I found CodePen. The platform opened my eyes to the artistic power of CSS, far beyond simple styling. I was inspired by the stunning animations and innovative designs I saw, and I began deconstructing the code behind them.
This hands-on exploration was invaluable. It didn't just teach me how to build generic hotbars and navigation menus; it showed me how to transform them into dynamic, visually engaging elements.
For debugging, I used a mix of Grok3 and Claude, but I greatly prefer Claude. It acted as a fantastic mentor, helping me learn the logic behind frontend development at an exceptional pace. Without Claude, the website would not have been deployed so quickly.
The only issue that I had with the learning process was getting comfortable with JavaScript. JavaScript, while cool as fuck, is a tad bit more difficult and has a much more complex learning process compared to HTML and CSS.
The Original Plan for the Website
The original layout for the website was planned as this:
I had intended the website to have a total of 5 dedicated navigation pages:
Home (Index)
In the Home (Index) page, I had planned for the page to include a parallax scrolling effect to heavily immerse the viewer into the website.
The very first thing that I wanted people to see when they entered the website was the logo of the website fading in upwards.
The website was to serve as the introduction to the focus of the website and also serve as a nexus to some of the other projects I'm currently working on.
About
In the About page, I had intended for this page to give a brief description about who I am and some of my skills. I had also intended for the page to include a Q&A "slider" thingamajiggy, so that it would answer some common questions that people may have for me.
Photo Dump
In the PhotoDump page, I planned on introducing multiple subpages dedicated to different topics, genres, and forms of photography. This page was to serve as the nexus for my photography.
It would also include a dedicated archive sub-page for archived photos.
Blog
In the Blog page, it was dedicated to showcasing relevant blogs for my website. A library containing and distributing the blogs in chronological order.
It would also include a dedicated archive sub-page for archived blogs.
Contact
In the contact page, it was to include a contact form and also include my cryptocurrency wallets for donation purposes.
This was the intended layout that I had drafted and what I was focusing on implementing, and I'm pretty proud to know that I had achieved each goal.
First and foremost, when I had started on the website, I had a bit of difficulty assessing and drafting the site itself.
I use Visual Studio Code to help me develop my website, and since I was still new to all of this, it took me a while to get it fully adjusted.
But thanks to trial and error, I was able to firstly implement placeholders for each page.
Development Challenges and Solutions
For each page I worked on, I experienced a plethora of challenges, and I uniquely found solutions for each of them.
Index Page
The first page that I worked on was the Index page, and the main difficulty that I experienced with this page was the inclusion of the parallax feature.
For the parallax effect that I was planning on including, I had originally intended to implement a JavaScript function to implement it.
However, that resulted in a plethora of difficulties that affected the fluidity of the site, so I dropped that and opted for a CSS-based alternative.
After looking around, I eventually came across this resource: Creating Parallax Effect Using HTML CSS and JavaScript
It taught me how to properly implement a sexy, fantastic, and more importantly; working parallax feature.
After that, the creation of the rest of the page was an easy breeze, and then I switched to work on the next page: About.
About Page
The second page that I worked on was the About Page, and the main difficulty that I experienced with this page was the inclusion of the Q&A Collapsible.
I learned this trick from this site: How To Create a Collapsible.
The main difficulty that I experienced was the fact that the collapsible's JavaScript didn't work well with the other JavaScript that I had implemented for the site, such as for the navigation bar and for some other aspects of the site.
Luckily, I used Claude.ai to help debug and ensure that the Collapsible would work cohesively and smoothly with the other JavaScript functions I had on the page.
Dumps
For the dumps page, my main issue with the page was the implementation of subpages.
For this page, I used Eleventy and Decap to layout the photos of my PhotoDump, and I used PhotoSwipe lightbox to make the photos interactable.
Secret: The photo dump pages themselves aren't actually dedicated "galleries." They're actually regular blog posts, but I utilized CSS to adjust image properties so that it gives the illusion of a gallery.
The main problem that I had with this page was the implementation of the subpages.
You see, I wanted multiple different sub-pages for the different genres of photography that I wanted to showcase. The problem was navigating through Eleventy's layout and system.
I had some difficulty adjusting through and ensuring that each sub-page was cohesive and connected only through the relevant channels, and after studying how Eleventy worked, I fixed every issue with that successfully.
Blog
For the Blogs page, my issue was with the implementation of the blogs.
You see, originally, DevvsPhotoDump utilized a static site generator. A static site generator is a tool that takes your content (like Markdown files), templates, and assets, then processes them to build a complete website consisting of only HTML, CSS, and JavaScript files.
The thing is; this would not work with the implementation of a blog section. I wanted to be able to navigate and implement new blogs on the fly, without having to code each new markdown file independently and commit each file.
So after scouring around, I was eventually introduced to the concept of Content Management Systems.
A CMS, or Content Management System, is a user-friendly application that lets you create, manage, and modify content on a website without needing to write code. It provides an admin dashboard (like WordPress's editor) where you can edit text and images, while the system handles the technical backend. This allows non-developers to easily control a website's content.
This was a life-changing discovery, and I implemented a few different CMS platforms.
Firstly, I started with Jekyll; however, the layout and navigation of Jekyll was a bit difficult to navigate through and effectively execute blogs efficiently.
Thankfully, I found a resource called "Eleventy" and "Decap CMS" which is formerly "Netlify CMS."
Eleventy (or 11ty) is a simpler, faster static site generator. Its main goal is to take your content (written in Markdown, JSON, or JavaScript) and templates (using a variety of languages like Nunjucks, Liquid, or plain HTML), and compile them into a ready-to-publish static website.
Eleventy was used to develop and publish the blogs and Photodumps.
Decap CMS (formerly Netlify CMS) is a content management system that works with static site generators, allowing you to edit content through a friendly editor interface while still generating a static site.
Decap was used to administrate and adjust the blogs and Photodumps.
The main problem was implementing Decap with the rest of my site. My site is half static site and half Decap. But after trial and error, I found a successful way to allow both sites to cohesively work together thanks to AI!
I would go in-depth more about this, but this was a problem that took like 2 weeks to fix and is too long to explain. But I'm glad I got it fixed—teehee.
Contact
For the contact page, I did not have many issues with this. I guess the only issue was adjusting the contact form, which used Web3Forms as the base to work with and connect to my dedicated photography email.
Apart from that, I really didn't have an issue.
The implementation of the wallet donation was also just an excuse for me to nerd out about cryptocurrency and blockchain technologies teehee, but I'm still glad I added it.
Deploying the Site
The service that I used to deploy the site was this cool-ass cloud service called "Netlify."
Originally, I had used GitHub to serve and deploy the site, but I didn't like how it forced you to keep your Git page public.
Netlify was really simple and fun to use, and it was worth my money. I connected it to the Git repository hosting my website, and it deployed my website with the domain name that I had purchased (DevvsPhotoDump.com).
For the domain name, I knew that I wanted "DevvsPhotoDump.com" and luckily, it was available and cheap!
I think I used NameCheap.com to purchase the domain.
Resources Used
Here's a comprehensive list of the resources I used for the site:
Learning the Basics
Specific Features
-
Parallax Tutorial:
-
PhotoSwipe and Interactive Images:
-
GitHub Resource:
-
Domain Name:
-
Decap CMS:
-
Deploying the Website:
AI for Debugging
Contact Form
Video Tutorials
Problems Still Apparent
Some problems as of right now that I still face relate to PhotoSwipe and Eleventy. Unfortunately, I have some issues relating to the aspect ratio of interactable images, and this causes the quality of images to become stretched.
From what I have identified: This causes my interactable images to only load successfully if they're only vertical or horizontal.
As of right now, I am working on identifying solutions to this problem.
Theme Behind the Website
I've always been an avid connoisseur of the noir genre. From literature to movies to video games—the themes and styles surrounding noir have always resonated with me: concepts of anti-heroism, cynicism, pessimism, moral ambiguity, and suspense, combined with its distinct visual and storytelling style, ignited a sense of inspiration within me.
The atmosphere of noir, and the tone it presents, represents the balance of hopelessness and heroism needed to create fantastic works of cynical art—works that leave audiences questioning how to navigate the labyrinth of morality that reflects what is perceived as "good" and "bad." It was because of this distinct atmosphere that inspired the color scheme and layout of this website.
The atmosphere of noir presents itself as a beacon—a call that defines the line between what is perceived as beauty and what is perceived as nothing. With the layout of my website matching that of noir, I want my photos to represent the contrast between the cynicism of noir and the beauty, the essence, and the color pertaining to the art form of photography.
Yap yap yap.
In reality, I was playing the video game L.A. Noire, and I loved the noir aspect of the game and its style, and I wanted to dedicate the website to that theme, because noir is cool, and I wanted to dedicate a section of my photography to embracing the noir genre.
Conclusion + Thanks for Reading!
This website was a lot of fun to create, and I am really glad that I completed it. This is my first professional-level website, and I am glad knowing that I coded every part of it!
If you read this far, I appreciate it. Thank you for following me on my journey of web development and photography!
With Love,
Devan Chuyen Lee