Written Snapshots
- 3 Devlogs
- 3 Total hours
A simple site for taking quick snapshots of my life!
Ship #1
@ReuTheNetizen
on
Written Snapshots
Written Snapshots is a personal digital journal designed to look and feel like a tangible, physical scrapbook. I built this to log my learning growth as I dive deeper into electronics and software.
This is the very first website I have built completely from scratch and deployed! While setting up the initial layout, using HTML, was smooth sailing, but things got tricky whenI tried implementing more complex design details. Building a CSS paperclip from scratch was a notable challenge, but pushing through it taught me so much about advanced styling.
While CSS was my biggest hurdle, it was also the most rewarding part of the project. I am incredibly proud of how closely the final product matches my original vision for the scrapbook aesthetic. It had a lot of fun playing around with different CSS elements.
I should note I used Google Gemini to brainstorm fonts, refine color palettes, and check occasional syntax patterns. However, I wrote the implementation myself. With no doubt I can say less than 30% of the codebase is AI sourced.
Ultimately, this was an amazing learning experience for web design, and coding with HTML and CSS. I want to keep improving my frontend development skills with projects similar to this.
Please check it out and let me know what you think! I hope you enjoy it.
@ReuTheNetizen
on
Written Snapshots
48m 36s logged
Devlog 03
I gotta go to bed soon, however, I would say my website is finished and I have successfully completed my challenge!
Completed Work
At first I went for a more pink and orange-ish color palette (as I was mimicking the color palette on my Canva design) and felt it gave a warm, cozy feeling. However, my favorite color is blue, so in an attempt to make the website more personal to me I experimented around with the colors - which ended up taking a bit longer than expected. Afterwards, I learned that it was possible to make elements, like a paperclip, completely out of CSS, so I spent the rest of my time adding a paper clip to the archived section of my website. I also made a few small formatting changes to the html (like adding line breaks and fixing typos, for instance) to polish up the design a bit more. I also added a favicon.
Although I could add some more elements, I feel like I have completed my main objective and would like to use my remaining time to prep my website for submission!
Next Steps
I will definitely try to consistently make small future updates to the site where I will add more logs and scrapbook elements to the site. I’m thinking of making it messier with doodles, polaroids, and scrap paper scattered around the margins. I’m also debating the font as I feel it lacks some readability but it also matches my rushed handwriting well.
Thanks for reading!
@ReuTheNetizen
on
Written Snapshots
1h 4m 20s logged
Devlog 02
I decided to go with the scrapbook theme as I feel like it would be more fun to implement. The layout is actually inspired by a Canva design I made for a school project where I found that I could make a decent looking scrapbook design without adding a bunch of fancy elements. A few simple shapes, rotated and colored nicely produced a cohesive design.
An hour later…I got the bulk of the css complete. All I have now is polish, although I’m pretty happy with how it is already. I think I have been able to get a “scrapbook” vibe without having to add a lot of textures. The layout is actually inspired by a Canva design I did for one for a project where I found adding simple shapes can create a nice-looking scrapbook design without adding a bunch of paper elements.
Completed Work
An hour later, I have gotten the bulk of the CSS complete, and I am pretty happy with how it turned out.. I think I was able to get a “scrapbook vibe” without having to add a lot of texture. I really like how the navigation turned out. At first it was a band at the top of the website, but I decided to remove the title from it and make it part of the “hero” section of my website and then use a flex box to center and format the navigation links, which I feel really improved the design.
Next Steps
The time I have allotted for this project is running out…I’m just going to do some touch ups and I think I will be ready to ship!
Thanks for reading!
@ReuTheNetizen
on
Written Snapshots
1h 18m 16s logged
Devlog 01
After attending Jenin’s Personal Site Workshop, I felt inspired to jump back into web design and push my limits. I am challenging myself to build a completely new website from scratch by the end of this evening, meaning I only have about 5 hours to do it. Using what I learned from the workshop and a bit of past experimentation with HTML/CSS on w3schools, the clock is officially ticking.
Project Vision
I don’t want to reveal too much personal information, but I still want to make a website that feels personal to me. At the same time, I need to keep it simple. I am constraining this design to all fit on one webpage and avoiding javascript usage so I actually have a chance at finishing this in one evening.
I had a general idea of what I wanted to make: a semi-anonymous digital journal website with monthly updates. A website I could use to quickly see my growth without having to read a lot of details. Yet - planning the html for the website was a bit of a challenge. I came up with two website drafts I scrapped mid-way before settling on an idea and finally finishing the html. The picture I took shows my general html outline. I have written each entry in greater detail on a separate document.
Next Steps
Next up is the CSS. I’m debating on doing a notebook style (line paper background, website looks like it’s all contained in a notebook) or a scrapbook style (a little bit more work but I can add some fun elements).
Thanks for reading!
