Week 3: Portfolio Website w/ CSS – Kimmy Tanchay

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.

Leave a Reply