tayleurwebdev-blog

[tayleurwebdev-blog]

Final Project Documentation

Link to my Live Site: https://tayleurh.github.io/WebDevelopmentWork-/AllSpringSemesterWork/FinalProject/Page1CSS.html

Link to Git Hub Repo: Process:

For this extension of my midterm project, I added several changes. I added to new pages. One was a reference page. I used modals on that page for the mock references. I typed the references in html instead of adding a pdf. I also made a contact me page. On the page I also added a hamburger menu to make the page stand out. On that menu, I also used javascript to give the user a surprise. When they click the clock they can see the time. I also typed my resume in html and took away the pdf version. In the beginning, I only had the contact button on my home page, but after looking it over I added it to all of the pages except the contact page. I totally re-formatted the first page with CSS to make it simpler and cleaner so that it would look more similar to google’s home page. I also slowed down the typewriting and added more text. As far as the photos page, I also used modals so that the picture would popup over a light overlay to keep the user on the page. I definitely think using the modals instead of linking to outside pages for the photos and essays page is a much better experience. Hopefully it will keep more users on my portfolio site.

I had trouble with:

For the photograph page, I had trouble with making the other modals popup. Only the first one pops up. This is something I was confused about, but I will definitely take the tips from the presentation to change this in the future! I also had trouble with the media queries and breakpoints. Often my content would still get messed up: Overall using percentages instead of pixels helped, but I do need to try break points again for the future when I send the portfolio out to employers this summer. There are some parts of the site that are responsive. I learned how to do the form and the hamburger menu from w3 schools and their examples were helpful in making those sections responsive. The W3 school also helped with making the modals. Lastly: The Google Maps Api key. The api key was taking me to a page where I had to pay. I wasn’t able to access the free one. I will try resetting the API key as you mentioned after the presentation!

Things I would change if I had time:

I would add a button for users to call me from their mobile phones on the contact page. I would also add more animation. I would also like to add a map of interesting places in the city that would change weekly, to show visitors places like museums and galleries that I like and recommend. I also would add more references as I get them from past employers. Now I just have one mock reference pop-up on the first page. This is the same with the essays. I have one pop-up essay so far. When I decide which ones I really want to showcase I will add modals for the other links. Overall, I am really glad I continued with the midterm project. I want to make a couple more changes and definitely add more content but overall I definitely see myself using the site as my portfolio. I am applying for jobs soon since I’m graduating this semester so it was definitely fun and useful to be able to work on this project for the class. Overall, it’s been a really helpful semester!

Here are images of my final project:

[tayleurwebdev-blog]

Final Project - Portfolio

My final project is going to be an extension of my midterm project. My midterm project was a personal portfolio site that looked like Google. The are many changes that I will make to the final site.

Here is the link to my midterm site on git pages: https://t.umblr.com/redirect?z=https%3A%2F%2Ftayleurh.github.io%2FWebDevelopmentWork-%2Fofficialmidtermproject%2FPage1CSS.html&t=MWEyNDM3N2JhOWFkZGUyODEwNmIxMjg1ZmM3ZTA2M2QxZjExYjc4NyxIUU5sMnU5QQ%3D%3D&b=t%3AtoXUAMKT2uAIYEKj4YeLTQ&p=https%3A%2F%2Ftayleurh.tumblr.com%2Fpost%2F172040865030%2Fwebsite-on-git-hub-pages-server&m=1

Here is a link to my inspiration for the site: http://www.garylemasson.com/

Below are pictures of what it looked like for the midterm:

In addition to the pages I have, I will also be adding a contact form page and a references page.

The other changes I would like to make for the final are the following:

⭐ Making the image page a scrolling page similar to google:

⭐ Making a top navigation that links to my contact page and social network pages:

⭐ Making everything mobile friendly using viewport width and height.

⭐ Increasing the size of the typewriter font in the search box and slowing it down so that it draws more attention on the first page.

⭐ Adding a search button/icon to the search box and adding the typewriter search boxes to each page with concise descriptions.

⭐ Making the sidebar move along with the page instead of having it stuck at the top.

⭐ Making a references page from past employers that will have a similar format as my essays page except with company names and internship descriptions:

  ⭐ Typing my resume onto the page instead of inserting it as a pdf.

⭐ Adding more content to each page(more photos, more essays, and general skills)

⭐ Adding a contact page similar to this format and with a form:

concepts|skills we have covered that I will use to build my site

Navigation bars

Forms

Linking Buttons

Adding Icons

Sidebars

concepts|skills I need to still learn to complete the project

How to make the scrolling/suggested image gallery similar to google

How to add the “I am not a robot” – contact form checker:

[tayleurwebdev-blog]

Website on Git Hub Pages Server:

https://tayleurh.github.io/WebDevelopmentWork-/officialmidtermproject/Page1CSS.html

Tayleur Hylton

Web Development

Midterm Portfolio

Process: I first started with the html. Then I went to w3 schools and started looked at the types of css I could utilize. I worked on positioning and layout first because I knew I would have trouble with that. Then after everything was laid out, I started to add the pictures, links, and essays. I worked on the javascript typewriting last because it was new to me, I wanted to get everything else down first. I ended up getting the typewriting to work with trial and error.

Code: I used javascript for the typewriting effect. I had trouble at first because the W3 School showed the typewriting after a click me button, but I wanted it on page load. It took me a while to find the correct wording in order to get it to start automatically when the page loads.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_typewriter

Challenges: Generally I got stuck on the positioning and organization of the site. I would move something and then another thing would shift. I went back and forth with that for a while. Then I started to work with the margin-left and margin-right wording and was able to fix a lot of the positioning. 

Issues: I also struggled with getting the background of the pdf to not have the print options and gray background. This is something I would change if I had more time. I wanted the resume to stay on the page without the extra edges. I uploaded it as a picture, but it did not look as sharp that way, so I converted it back to an object for now until I figure out how to remove the gray edges.

Learned: What I learned to accomplish the project was a mix of the problems I encountered. Using the syntax is usually confusing but w3 schools explained everything well. Utilizing margins and alignment was my biggest lesson and working with the javascript. One thing that I wouldn’t normally do was using the buttons as the navigation instead of a navigation bar. I felt as if it allowed me to create a more “google-like” experience, which is what I was striving for.  

Next Steps:  For the next steps, I would make everything responsive: On google chrome at 100% zoom it looks how I wanted it to but when you change zooms and go to different browsers it gets messed up. I definitely would want to adjust that. For more next steps, I want to fix the pdf, add a contact me form, add more pages and add some of graphic design work to the portfolio. I will go through and also play with some more fonts, styles, and orientations of the items on the page. I also want to add more to the front page typing other than “Tayleur Hylton” I want to add more sentences that keep typing that which will introduce new visitors to me and the portfolio. Overall, I really enjoyed this project and definitely would like to keep working on it more.

Pictures of the site pages:

[tayleurwebdev-blog]

Tayleur Hylton

Midterm Proposal

Personal Website

The concept of my website is a personal resume. I am graduating in May and I think it will be useful to showcase my work on a website I that created by myself. I am in Gallatin and my concentration is a mix of marketing and sociology. I am also finishing the IDM major this semester. I want the website to take visitors through the skills I have learned over the past 4 years. The introduction page is a video of a google search, leading to an about me and options to continue through the site. There’s a resume button, a photography button and an essays button. The first official page is my resume. The second page is my photography portfolio with the best images I took in my photography class last year. The last (for now) will be a list of my essays in the format of a google search. The links will lead to pdfs. There will be navigation bar at the top to showcase the categories and suggested topics/pages in a sidebar navigation with pictures.

Inspiration Pinterest Mood Board: https://www.pinterest.com/tayleurhylton/personal-website-inspiration/

Inspiration Websites:

http://julia.na/

http://www.garylemasson.com/

Site Map(In image above and link directly below): file:///C:/Users/Tayleur%20Hylton/Documents/personal%20website%20layout.pdf

Wire Frame:

https://wireframe.cc/pro/pp/689e0e32c144449

concepts|skills we have covered that you will use to build your site

We have learned to insert images and change their colors and rotation. This will help with the

layout. We have learned how to organize information architecture and create sitemaps which will help me sketch out where everything on the site needs to link to and be placed. We learned how to implement a navigation bar on the top of the screen. We also learn how to place our navigation words in blocks to allow them to be easily clicked. Especially helpful, will be the side navigation with pictures that we learned how to do in class. This will allow me to make a suggestions bar and keep users going through the site. Also, learning how to use H1, H2 etc to organize text and headings will be helpful and using the <p> will allow me to insert text when necessary.

concepts|skills you need to still learn to complete the project

I need to learn to insert cool shapes and how to format text around objects on a page that are not just horizontal or vertical. I need to learn how to make my website answer questions about me in a video format, similar to this example: http://www.garylemasson.com/