http://imanas.shanghai.nyu.edu/~kct285/Portfolio_Kimmy/
For the front page of my webpage, I decided on a landscape picture that I took in my recent trip to Seoul, Korea. I chose this picture because I really enjoyed the colours and the ârusticâ feel of the city with its traditional houses and roofs. I went for this picture as a background instead of just a plain colour or picture/gif that I would’ve gotten off the internet as it conveys more significance to me and my own experiences. For my font choice, I went with this simple monospace font from google fonts for a more minimalistic look.
I decided to go with a very simple navigation bar: a white background with my âaboutâ, âprojectsâ and âcontactâ turning an orange colour, to match the background picture, when the mouse is being hovered; I also utilised the fixed position so even when the user scrolls down, the navigation is still seen. Initially, I wanted to have a more complex effect on my navigation bar. Unfortunately, I couldnât figure out what was wrong with my code so just settled with the simple colour change when the mouse hovered. I also included âscroll-behavior: smoothâ for a better flow to the different parts of my portfolio website for when my navigation buttons were clicked.
For my âaboutâ section, I have a small description of my hobbies, background and interests. I decided to make my about-picture in a rounded frame to mimic the way many social medias show profile icons (EG instagram) and I was happy to know that this was possible using only one line of code on CSS.
Perhaps the most difficult and time consuming section for me is the âprojectsâ section. I knew exactly what I wanted this section to look like however, executing it was much harder than initially thought. After getting past some confusions with flex boxes, there was another problem of figuring out how to hover text over an image. After a lot of trial and error, I realised I didnât group the images and text individually and had some errors with CSS properties like positioning and div classes.
Fortunately, my âcontactâ section was relatively straightforward in which I used simple icons as buttons to lead to my social medias, email and linkedin. Initially, there was 2 tiny annoying lines that showed up next to my icons but after more trial and errors, this was fixed with setting my text decoration to none.
Overall, I thoroughly enjoyed making my own portfolio website despite it being a painstakingly tedious and brain-crunching process. I felt extremely satisfied especially when I finally fix problems with my code and in the end, Iâm happy with the end result.