NJ in Element

Final devlog for this project:

Took a lot of time to properly upload my webpage from the github pages…it wasn’t uploading due to the folder and file names being different but that took me a very long time to figure out and I ended up creating a new branch “gh-pages”, deleting it, creating new files, renaming files multiple times and a series of this and that to finally being able to upload my page properly. At last did only some tiny code updates to some pages to make it better and updated the Read Me file.

Done!

Made a popup screen over the home page that comes up every time you go to the home page and disappears in a few seconds using HTML, CSS and a bit of Javascript. Wanted it to only appear when you reload the page or first open the home page but I just couldn’t get the checking logic to work, tried it multiple times in different ways.

***Used AI here since I couldn’t wrap my head around how to get the checking logic to work. In the end couldn’t make it work even with AI…had to go back to the simple version where it pops up every time you open the home page.

Might or might not try to fix it again.

Done for today^^

Finished creating and styling my About me page using HTML and CSS. Also linked it with the home page for navigation and added a back button on the About me page.

Added a similar interactive modal popup like the one on “My Art” page to the “Projects” page as well. It opens when clicking gallery items in the Projects page using a combination of HTML data attributes and JavaScript event listeners. Each gallery item stores its description in a data-description attribute, and clicking triggers an onclick=“openModal(this)” function that extracts the image source and description from the clicked element, then dynamically populates the modal with this data to present you with a cute little box of the image and a bit of description about it.

Tried to add a new feature but due to a typo wasted 40 mins fixing other stuff that didn’t need fixing. Nonetheless here is the feature update in teeny tiny technical terms:

I added an interactive modal popup that opens when clicking gallery items in the My Art page using a combination of HTML data attributes and JavaScript event listeners. Each gallery item stores its description in a data-description attribute, and clicking triggers an onclick=“openModal(this)” function that extracts the image source and description from the clicked element, then dynamically populates the modal with this data.

Built the “Projects” page the same way I built the “My Art” page. Changed the color of the container a bit and the images of course and well added a back button for easy navigation:) Simple, short coding work, done!

Build the “My Art” page and added my 9 of my artworks to make it a small gallery. Made the containers into 3 columns and 3 rows to show it prettily and then fixed the sizing, box-radius, colors, text and other stuff. I accidently didn’t write gallery-container in the HTML file and kept on styling the containers with the “grid” command but it wasn’t working and so then kept making the grids through different ways and messed it up even more until I finally figured out what was wrong. Took me a long time to finally notice it ToT which is why the code took so much time. This was a designing, fixing sizes, not catching mistakes and then finding them after you have tried 101 things coding episode. Oh yeah I also built a back to home button on the page so viewers can go to the main home page and connected the My Art page to the home page.

Fixed the size of the main container and changed the color of my profile picture container to baby pink. Made the arrow image overlay over my profile picture image, used Claude AI to figure this out because I was really confused. Changed a bit of my HTML and CSS code like styling for the image sizes and giving the two images different class names for styling them separately. Most of my time was taken to fix the sizes of different containers, the size of the arrow image and some of the border radius and changing the position of my profile caption text. This was 38 minutes of perfecting the sizes of everything. Homepage done! Gonna touch My Art page next:)

Since the last devlog, I have done a lot of css styling. I have added the background color, color to the texts and some font styles and font family to the texts. Also added a container to hold all the texts, the navigation buttons and an image placeholder container to hold my profile picture, I have also added shadows to both containers to make the webpage look prettier. Added the profile picture to the container, which I drew by myself:) Also removed the “P.S.:” text cuz I couldn’t think of what to write there lol. In addition to all that, I also designed the buttons into green pill shaped buttons and added a transition to them so when you hover over them they turn into lighter green! And well also added an arrow image that connects my caption text “Yup it’s me^^” to my profile picture. The homepage is 89% complete I would say! Really want the arrow image to overlay over the profile picture a little bit and make the larger container a bit smaller so yeah gonna do that next! And then gonna start making the other pages:) Good work done! All of this was done with HTML and CSS. Thank you very much for reading through!:)

Wrote some basic code for the homepage of my website. Added the basic texts and title that I want on my personal website’s homepage and also added a navigation bar at the bottom of it all, which contains the buttons that will lead to other pages in my website. All of it done in HTML:)