Website
By
@skyFonix
- 11 Devlogs
- 44 Total hours
My personal website! Demo video: https://youtu.be/TRbmYiX4lvI
Dashboard redesign!
I got fed up with the old design as it was quite uncomfortable to use tbh, everything was layed out vertically, so it felt pretty cramped, so I changed it to a sidebar design!
I also replaced most of the inline editing stuff, so creating and editing projects now happen in modals. Uploading and tagging photographs also moved to a modal with real time suggestions too!
Ship #2
Lots of changes were made
- Everything that was static before, is now rendered dynamically from a database!
- Added a dashboard where I can add projects, upload assets, upload images and edit all of the about information.
- For the gallery I added a tagging system that can be updated from the dashboard. The site also implements exif data storage, so I anyone can view the camera, lens and settings used to make the photo. There is also a description section for notes.
- The gallery is render in a style similar to unsplash, the site is divided into columns, which are dinamically added and destroyed, based on the viewport width. Each image displayed keeps it’s original aspect ratio.
Even though I said I’ll just deploy, I added mass uploads, deployed, and then started filling the site with content! The next major ship is right around the corner!
Image viewer, yay! I just need to get this whole thing to prod now.
New devlog
Things I added:
- Added the gallery page to the website’s public part with an image display section similar to the one on unsplash.(Mine’s a bit worse, but it’s mine)
- I also implemented tag based filtering!
- Also added a friendlier navigation panel for mobile users!
Next up:
- A way to view the image in big in full resolution, I already designed it in figma, so now I just need to implement it!
- Code base and assets cleanup.
- Deployment and ship! :)
Added not too good looking, but functional controls for the dashboard for the gallery feature. I think I’ll redesign the whole page someday, but that won’t be today.
Added the backend side of things for the gallery!
Added uploads to the site, so I don’t have to rely on external services for assets
Making this devlog cause I have to
I feel useless :(
I wasted so much time on this project today it’s not even funny. 8 hours or so currently, and not even half done with a single very simple feature, I’m usually much much more efficient, I almost gave up on the whole thing a good couple of times, anyways here is a screenshot from the dashboard in it’s current state. I promise the next devlog will actually be a worthy one!
This project was vetted by Shipwrights and is now up for voting. You can ship again after making more updates.
Feedback
Hey skyFonix,
Awesome project! I'd love to see what you make in the future!
For any other questions, DM @alexander or create a ticket in Slack—#ask-the-shipwrights.
Shipwright walkthrough
This needs changes before we can consider it shipped. Review the Shipwright feedback, make updates, then ship again.
Feedback
Hi! Your website looks amazing! However, it would be great if your README included a link to the site and a little more information about your site (e.g. what it includes, choices you made, etc) Please do NOT use AI to generate to readme. Thanks!
Shipwright walkthrough
Ship #1
Finished with the about section, also added a footer!
Decided on writing my personal, mostly static website in React, because I’ve never used it so I wanted to get a little practice with it!
I’m currently making an about section and then I’ll submit it since it
qualifies for the personal site, mission, once I submit it I’ll begin
working on actual features like an image gallery for my photography and a
blogging system, also plan to migrate the project from being static to
having their own place in a database which I can edit from a dashboard
and stuff.
What I’m done with so far:
- Topbar with navigation
- Hero section with an animated welcome message
- Projects section with some projects already placed into it
