This portfolio also serves as an example of my HTML/CSS/Java skills, as it was built from scratch. Check out some of the process below!
This portfolio also serves as an example of my HTML/CSS/Java skills, as it was built from scratch. Check out some of the process below!
Click the pictures below for fullscreen view!
Below are the initial sketches I had for the site before I began any programming so that I knew what I should be trying to aim for visually.
HOME PAGE WITH NAVBAR COLORS
THE SKETCH FOR THIS PAGE!
BASE TEMPLATE FOR PORTFOLIO DISPLAY FORMAT 1
ABOUT PAGE 1
BASE TEMPLATE FOR PORTFOLIO DISPLAY FORMAT 2
ABOUT PAGE 2
BASE TEMPLATE FOR PORTFOLIO DISPLAY FORMAT 3
SITE COLOR CODES
Below are the initial sketches I had for the site before I began any programming so that I knew what I should be trying to aim for visually.
HOME PAGE WITH NAVBAR COLORS
BASE TEMPLATE FOR PORTFOLIO DISPLAY FORMAT 1
BASE TEMPLATE FOR PORTFOLIO DISPLAY FORMAT 2
BASE TEMPLATE FOR PORTFOLIO DISPLAY FORMAT 3
THE SKETCH FOR THIS PAGE!
ABOUT PAGE 1
ABOUT PAGE 2
SITE COLOR CODES
Afterwards, I made a png of all the images I'd have to put in for all the site elements aside from the actual illustrations/designs being displayed. The text headings were made in Illustrator, and the corresponding illustrations, doodles for the About section, and the logo was made in Clip Studio.
As I coded up the normal site (with some changes from the original sketches as desired), I also worked on the mobile and tablet versions for smaller viewports down to 320 px wide for smaller phones. This is something I never bothered to do for the school project site I made on Wix before learning coding, and you can tell the difference on smaller screens since that one has clipping issues.
And just for fun, check out what this page looks like without the CSS styling it!