For this assignment, I decided to create a web page advertising myself. This web page loads on desktops, tablets, and mobile phones. In order to tell my story, I decided to do a small bio about how I became interested in the field of computer science and focused on how my skills and passion to “advertise” myself to potential employers.

 

This is the google drive link to the code:

https://drive.google.com/open?id=1a7K8LTE_yz8hShGOkbuD_yo9Xpl5-1y0

 

I provided graphics, such as my photo, icons such as for contact and skills, and a logo for the web page which is on the website tab next to the title. These are some screen shots and explanation of my decisions when designing this website (These screen shots are a desktop representation of the site):

Home Page

I searched unsplash.com for copyright free images. I liked the image I chose because of the lightbulbs. My thinking was that lightbulbs can represent ideas, and so I wanted viewers to subconsciously be thinking of good ideas when they thought of me. Also, the tree matched well with the color scheme I decided to go with. I chose the same red that Stony Brook University uses and white. It is a good color scheme and I figured since I’m a student here I could use it to represent me.

About Page

I wanted to keep the webpage simple yet engaging, and so I added some slide in effects to both my photo and bio. I used a jQuery plugin called “Scroll-Reveal” to accomplish this. I also wanted to keep the viewers eyes centered on the screen and so everything on this section of the page is centered and the white text on the red background makes for an easy read. The navbar on top is still present if the viewer wanted to jump to a section but ideally the experience should be to click the “View My Skills” button to scroll to the “Skills” and “Portfolio” section

Skills Page

I wanted to promote the skills I am most comfortable in and so, I have a fade-in of four that I am most comfortable with. There are others that I debated on adding, but I didn’t want the page to be too cluttered. I am still unsure if I will keep this section on the page for long, I may remove it entirely or place it somewhere else with a more comprehensive list of my skills and abilities.

 

Projects Page

Next is the projects section. I listed six that are completed projects and complicated enough to be worth putting on my webpage appealing to the viewers logos. They showcase a variety of my abilities and once a project is clicked on a little dialog box appears which gives a more in-depth description of what the project is, along with a link to the GitHub page to view the code for the project. I like the aesthetic of a tile screenshot of the running application representing a project, I think it looks clean and professional. The highlight on hover which gives the name of the project and the technologies used to make it.

 

 

Contact Page

I have the contact page at the bottom. I decided to do this in the hopes that the webpage thus far has left an impression for the viewer to want to click my LinkedIn or send an email to contact me

 

This is how they page looks on mobile: