Ship
Devlog 19
So after testing the website out on my phone, I realized that I needed to format it for mobile devices because it turned out mega wonky (see image below), which means no shipping yet!
Accomplishments
- Removed elements that wouldn’t be effective on mobile (e.g. navbars)
- Added dropdown menu on the top left of all pages
- Adjusted text size as necessary
- Adjusted size of images
- Added vertical scroll bars to modals and horizontal scroll bar to the Videos page
To-Do
- After making these changes, I tested my website on my phone and saw that many elements were not displaying correctly, so I am working on debugging that
Devlog 18
(woah it’s been a while since i last made a devlog… but i’ve been slowly working on this project bit by bit this past week)
Hopefully this is my last devlog before shipping!
Accomplishments
- Added the navbar header to all the pages (and fixed a bunch of bugs associated with this change)
- Created a scrapbook-esque background to make my website more lively
- Got rid of the original horizontal navbar from the ibisPaint and Videos pages
- Added a home button on all the pages
- Added an auto-scroll effect so that when you click on a page, it’ll scroll to the main content
To-Do
- For some reason, my website won’t deploy on GitHub… so I definitely need to figure that out
Devlog 16
Accomplishments
- Created polaroids of some of my favorite art to add to the background of my website (will format later)
- Combined the header from the home page with the ibisPaint page (though I’m coming across an error when I try to do the same with the Illustrator page)
To-Do
- Fix bugs with Illustrator page
- Find a way to navigate back to the home page from the other pages (because I’ll eventually remove the navbar)
- Format the polaroids and have them shake on hover
Devlog 15
- Mainly worked on cleaning up my code a bit
Accomplishments
- Added title tags to each page (don’t know how I forgot them before)
- Replaced var with const (JavaScript); I finally understand why it’s better to not use var anymore
- Adjusted the font weight of the home page navbar
To-Do
- Find a font that looks nice when it’s in caps log
- Replace the current navbar with the home page nav bar (it looks much nicer IMO)
- Write a real “about me” bio
Devlog 14
Accomplishments
Photoshop and Illustrator pages
- Received some feedback and added two features to these pages:
- Tools icons on the left (no, they sadly have no function)
- Color picker (also has no function, but that might be an add-on later)
Home page
- Added the “openModal()” function to all the images (yes, it was a manual process)
- Formatted the buttons
- Added a “close” icon
Devlog 13
Accomplishments
Home page
- Created a modal container to view the full images on the home page
- Added functions that open the modal and switch to the previous/next image
Other
- Added a transition on the navbar such that it turns dark(ish) green on hover
To-Do
- Need to figure out if there’s an optimized way to add the openModal() function on all the images without manually adding the onclick=”” function to every < img > tag….
- Also need to figure out how to close the modal by clicking outside the image without impacting how the buttons work
- Change the layout of the buttons
Devlog 12
Accomplishments
Illustrator page
- Created the layout (which basically mirrors the Photoshop page layout)
- I had to put all the internal JS and CSS code used for the Photoshop page into external files (and correct them accordingly) so they can be used for Photoshop and Illustrator
Videos page
- Uploaded my videos onto YouTube and embedded them onto the page
- Enabled autoplay and mute for all the videos
To-Do
- I want to add a scrolling slideshow effect onto the videos page (also maybe make the videos loop)
- I have an idea to merge the upper half of the home page with the other pages to make it look nicer (which might require me to merge my JS code…)
Devlog 11
Accomplishments
- Created a GitHub repo for my project (totally forgot to do that before) and I finally understand how to use GitHub!!
- Added alt text to all my artworks on the Home page
- Added a notebook background and tabs for the “previous” and “next” buttons
To-Do
- Find a better quality image of a notebook (at this point I might as well draw one myself)
- Add alt text to the images on the Photoshop and ibisPaint X pages, where the image source is constantly changing
- Add more flair to the ibisPaint X page
Devlog 10
Accomplishments
ibisPaint X page
- Finally figured out how to apply the animations to all the pages (I had to increment the degrees by 180 every time the button is clicked)
- Likewise, I was able to make the containers rotate counterclockwise to go to the previous page
To-Do
- Style the page, maybe add a background image that looks like a sketchbook
- I want to add a little sticky note button that opens up the artist statements
Devlog 9
Accomplishments
ibisPaint X page
- Uploaded all of my ibisPaint artworks onto my computer
- The “next” button is able to traverse all the artworks
- I was able to add a page flip animation (though it only works for the first page…)
- I learned a lot about transformations!
To-Do
- In order to execute the home screen plan (from Devlog 8), I have to merge all my internal Javascript code into an external sheet… lots of refactoring to be done
- Apply the flip animation to all pages
Devlog 8
Accomplishments
Home page
- Styled the buttons and added more color
- Created an overview section of all my art
Photoshop page
- Added more color to the background/elements
- Styled the side navbar
- Fixed the formatting issue with some of the images
- Added functionality to the “art” button so that it displays the art/closes the modal
To-Do
- Start working on the layout for the ibisPaint X works
- Locate, download, and upload all my ibisPaint art to my computer
- I want each artwork on the “overview” section to link to the full-sized artwork
Devlog 7
Accomplishments
- FINALLY changed the text of the navbar lol
- Added text to the icons on the homepage so users know what they represent
- Styled the Photoshop layout more
- Reincorporated the artist statements for the Photoshop page using modals
- Added functionality so that the modals show when “artist statement” is clicked and they will change alongside the art when “next” or “previous” are clicked
To-Do
- I want to add more character to my pages, perhaps through more color
- Add a “close” button at the top of the modal
- Place the side navbar elements at the bottom of the container
- Some images appear really small, so I need to alter their size
Devlog 6
Accomplishments
- I started to design the layout for the Photoshop page (which admittedly does not resemble Photoshop…)
- I separated the images such that they don’t appear on the page all at once
- Added functionality to the “next” button to go through the images
To-Do
- Fix the background and adjust the dimensions of the images
- Add functionality to the “artist statement” to display the text that I had before
- Make the interface better resemble Photoshop </3
Devlog 5
Accomplishments
- Added links to the other HTML files on the icons
- Added functionality to the buttons!! When a button is pressed, the images/links will shift
- (I struggled so much getting the images to rotate in the correct order…)
To-Do
- I would like to add animations/transitions to the bottom navbar
- Style top navbar
- Finish the layout for the Photoshop page
Devlog 3
Accomplishments
- Made the navigation bar horizontal
- Brainstormed a new idea for the layout of the Photoshop page (it will look like the Photoshop interface)
- Started the layout for the ibisPaint X page
- Created the general layout for the home page (shown below) (the images for the icons are placeholders)
- Began to add functionality to the home page (WIP)
To-do
- Arrange layout for the Photoshop page
- Figure out how to change the content on click
- Style navigation bar
Devlog 2
I added my artist statements (which I saved in a Google Docs a while ago) for each work from Photoshop and Illustrator (I also added my Illustrator works). I imported a couple of fonts from Google Fonts and finally adjusted the sizing of the images and text. I also began brainstorming the logistics for the functionality.
Loading more…