View this on my main page
Hey Everyone and Welcome to Day 10!
Today's Goal!
My goal for today was to do some more work on my portfolio page. Following on from yesterday's work, I decided it was time to start adding my previous pages to the web page. I'd like them to be animated a little bit as well. I then decided I also wanted to start making the website responsive to screen changes, so I used Google to find out how to do that.
 |
| The page, how it stands at the minute (the side bar is cropped out) |
About Me!
So I decided to work some more on the page content to begin with. I took to making to blue boxes instead of the three under the about me section. Currently I will be offering Web Development services and also some graphic development services as well. In theses boxes I will describe what I can do and possible include some links to direct examples. I have also filled out the about me section at the top as well rather than the Lorem Ipsum I had before.
  |
| The Rollover effect on the My Work buttons drops from the top |
My Work!
The "my work" section was looking bare and I do have 2 examples of work that I have previously done, The spitfire page and the Maze game that I made as well. I decided to include a small thumbnail of these pages, just as a png, and then with a bit of styling, I centred them, added a border and scaled them correctly as well. When I added them it just didn't seem like enough though so I wanted to make them a little better. I decided to add a rollover effect on the buttons so that an overlay would come over them when the mouse was over the buttons.
 |
| The small screen page now, notice the Contact Me section |
Mobile Screen!
When the website was being viewed on mobile screen, it was becoming distorted because of the small screen size. this needed sorting, so I took to Google. I found out about the "@media" tag in CSS that allowed me to limit the style sheet based on screen size. Perfect! I took to making 3 style sheets, one for a full screen (above 1000px), one for a small screen (above 500px but below 1000px) and one for mobile screens (below 500px). I then had to start making the different styles. I did this by just copying the styles and then adjusting accordingly for each. However I will at some point make this better by making 4 style sheets. One that will cover all 3 different screen sizes, and then one for each with specific styles for the screens. I could also use variables in CSS to store colours. This way if I wanted to have a different colour scheme, it could be done rather easily. But for now, it works.
|
| The about me section of the mobile page Notice how the skills boxes fill the page now The mobile page also sees the "My Work" section sorted vertically |
Tomorrow's Goal!
I also did some tutorials on jQuery today, so tomorrow I plan on doing some more of them and hopefully finding a way that I would like to implement them onto my portfolio page. A friend of mine wants me to start work and building a web page for an idea that he has as well so I may start work on that for my 100 Days of Code time tomorrow. Beyond this, I also want to continue work on my game engine so I may even delve into that, tomorrow is bank holiday so I can spend a lot of time coding tomorrow (probably all day to be honest). But for now,
Happy Sunday!
Matt
No comments:
Post a Comment