Your Project's Name

My Personal Website

Are you sick and tired of boring websites that are not creative or innovative, and have information that is so cluttered together you have to squint your eyes to read anything? Fret no more, introducing to you my website, an all in one website that is innovative, creative and interactive. My website features a minimalistic style that is easy on the eyes of viewers and is at the same time interactive enough to provide users a fun and enjoyable experience by its smooth and fluid animations. My website is also incredibly unique on mobile as it is perfectly altered and tailored to satistfy you on the go, anywhere, anytime, on a phletora of browsers and screen sizes.

My website contains information on myself , my portfolio and my resume, in which you can actually download with just a click of a button on desktop. But first, lets start off with the description of my about me page. This page starts off by introducing your eyes to a palette of autumn, with colours that range from dark coral to rasberry, chocolate , all of them accented with brown tones. The first thing that will catch your eye would be this huge card in the center of the page. Hover over it to zoom in into its contents, and even of my face. Next, look tp the top left and you will see a navigation bar at the top left of the webpage. This unscrollable bar makes it easy for navigation throughout the 3 pages. The contact button is anchored to the bottom of the page, in which the contact me form is located. A html scroll variable is also applied to ensure that the page scrolls fluidly down. Next, look to your right and you will find that there is a scroll bar, that makes navigating the page so much easier and faster. Every button and element in this page is animated, so feel free to have fun hovering over everything on this page.

On my resume page, the format of the page is similar to my about-me page as I wanted the designs to be consistent. A syou hover over it, the card descripting my resume will zoom in, as well as the words.

Now on to my portfolio page,each of my projects are showcased in beautiful cards, which are connected to an about slider that slides outwards as you hover over it. Not only that, but the words on the slider also enlarge at the same time, with the same fluidity that the slider does. This beautiful movement is definitely an eye-catcher and what makes my website stand out from other. However, this is not all there is. Hover over the screen to see an enlarged image of all of my works in my portfolio. If you were thinking that I am about to end off my sales pitch right now, you are wrong. There is a added feature that is only exclusive for mobile users on mythat compliments my whole theme of using cards as a placeholder.

My project can be found on https://jaslynnn.github.io/ID-ASG1/

Design Process

Firstly, This website is for something I am doing for myself to showcase all the hardwork I have put into improving my skills over time and tracking down how much I have progressed over the many months or even years. It is also for me to stay motivated and constantly work hard to create more projects that I would love to be proud of.

Secondly, I would like to showcase my projects to potential employers who are looking to recruit UI/UX designers as I want to work as a ui,ux designer in the future.This project would be the best way to land myself a job as I would be able to impress employer with my portfolio as this website is part of it.

This project would be perfect for myself as I had long wanted to collate all of my artworks into a portfolio that is easily accessable.

As a creator, I want to create an website that is has a trendy and modernised style, so that I will be able to impress my employers as they would know that they would be be able to get a impressive website.

As a creator, I also would like to showcase my works while keeping it simplistic yest easy to access. For example, the small images of my projects will be enlarged as you hover your mouse over them.

As a user, I would like to able to navigate through the pages so that I can look at what this person has to offer in their portfolio

As a user, I would like to explore an interactive website as it would be more interesting and facinating.

This is the link to my adobe xd wireframe mockup: https://xd.adobe.com/view/95a11e23-0640-4aa8-9e0e-eef484e86500-c0f2/

Features

Desktop browser features feature 1- A contents bar that does not scroll with the page. There are 4 buttons displayed on the invisible contents bar vertically to make the design look sleek. Each button leads to the page stated on it.

feature 2- A scroll bar that changes colour on hover.

feature 3- There is a card that floats in the middle of the page.

feature 4- Enlargment of almost whatever is hovered over. Easing in and easing out is also applied so as to make the process look smooth and simultanious.

feature 5- Enlargement of text as the user hovers over it.

feature 6- Minimalistic design with no extravagant fonts and an easy to read font.

feature 7- Centered design that provides a good focal point.

feature 8- Consistent color palette throughout all the pages.

Mobile features

feature 1- A contents bar that does not scroll with the page. It chanegs colour when hovered over- There are 4 buttons displayed on the invisible contents bar horizontally to make the design look sleek. Each button leads to the page stated on it.

feature 2- There is a card that floats in the middle of the page.

feature 3- Enlargment of almost whatever is tapped on.Easing in and easing out is also applied so as to make the process look smooth and simultanious.

feature 4- Enlargement of certain text as the user taps on it.

feature 5- Minimalistic design with no extravagant fonts and an easy to read font.

feature 6- Centered design that provides a good focal point.

feature 7- Consistent color palette throughout all the pages.

feature 8- Sticky contents card in the projects page. This causes the card with the artwork to remain on the page and not move up until the bottom card is scrolled up completely

Existing Features

feature 1- A contents bar that does not scroll with the page. There are 4 buttons displayed on the invisible contents bar to make the design look sleek. Each button leads to the page stated on it.- This also makes it easy for the user to navigate throughout the website and they are more likely to spend more time in my website.

Desktop only feature feature 2- A scroll bar.- There is a scrollbar that makes it easier for the user to scroll through the page with just a drag so that the user will not feel tired scrolling with their mouse.

feature 3- There is a card that floats in the middle of the page. This adds onto the sleekness to the design as it looks detached to the rest of the page.

feature 4- Enlargment of almost whatever is hovered/tapped . This adds to the user-experience as it feels as it the user is touching the screen and able to make an impact on the website. This provides user enjoyment. Easing in and easing out is also includes so as to make the process look smooth and simultanious.

feature 5- Enlargement of text as the user hovers over it so that the user will be able to read better.

feature 6- Minimalistic design with no extravagant fonts and an easy to read font. Each component also has a space around it to provide a good sense of spacing so that none of the information seems cluttered.

feature 7- Centered design that provides a good focal point in which users can easily focus on certain areas.

feature 8- Consistent color palette throughout all the pages. In addition, you may also use this section to discuss plans for additional features to be implemented in the future:

Mobile only feature: feature 9- Sticky contents card in the projects page. This causes the card with the artwork to remain on the page and not move up until the bottom card is scrolled up completely

Features Left to Implement

-I would like to link my socials.

• Another feature idea I wanted to implement was to make my contact box appear when the footer was hovered over.
• Progress bar that increases as the page is scrolled downwards.

Technologies Used

• html used to add the information into the webpage
• css used to style the project
• w3schools
  • The project uses w3school to refer to various styling of css and various html code. -wix templates
  • This projects refers to the layouts of various wix templates as inspiration for the wireframe of the website -github
• This project uses github to source for normalize.css
• duoparadigns -This project uses the color palette HEX codes for its colour scheme from 6. Color Fresh

Testing

1. about me page: 1.Go to the "resume" page 2.Press the "about me" button on the top left of the page 3.Observe if the button directs me to the "about me" page

2. resume page:

   1. Go to the "about me" page
   2. Press the "Resume" button on the top left of the page
   3. Observe if the button directs me to the "Resume" page

3. projects page:

   1. Go to the "about me" page
   2. Press the "Projects" button on the top left of the page
   3. Observe if the button directs me to the "Projects" page

4. Contact anchors

   1. Go to the "about me" page
   2. Press the "Contact" button on the top left of the page
   3. Observe if the button scrolls down the page automatically to the contacts box.

5. Hover buttons

   1. Hover over each button
   2. observe if the button changes colour according to the color assigned to it.

6. Transition elements

   1. Hover over each card element
   2. observe if the enlargement of each element is smooth

7. Resume download button

   1. click onto the "Download resume"
   2. observe if the screen is redirected to a resume pdf

8. Projects anchors

   1. Go to the "projects" page
   2. Press the "school projects" and "Personal projects" button
   3. Observe if the button scrolls down the page automatically to the chosen section box.

On Desktop I had tested out my browser on various screens including tablets, and phones such as moto G4, Galaxy S5, Pixel 2,Pixel 2 XL, Iphone 5/SE, Iphone 6/7/8 Iphone 6/7/8 plus,Iphone X, Ipad, Ipad pro, Surface Duo, Galaxy fold. My project works well on bigger browsers such as the web browsers and bigger tablets such as the ipad pro as they tend too look the most put together. The elements in the page resize appropriately and the original layout is still kept as its dimensions are quite huge and as I had used flexboxes for many of my components and elements, the layout and centering of the elements remain the same.

On mobile screens smaller then 670px, such as the iphones ,moto G4 and the rest, I had removed some elements so as to make the design of the webpage look cleaner, and arranged some of the elements that were important below each other so as to make the webpage look cleaner. The Navigation bar is also horizontal.

An interesting bug that I had discovered during my testing was that the height: auto; causes divs to resize appropriately, however, the margin: auto; does not cause the margin to automatically resize.

Another interesting bug is that my navigation bar works inconsistently. I had placed it as a fixed element so that it does not scroll with the page, However When I scroll down and attempt to click on the button, the links to the website might work or might not work and the button's hover element is not activated if the link does not work.

Another bug I had was that the resume that I wanted to open in another webpage did not work even though I had put the target=blank inside the tag.

Credits

w3schools for teaching me how to style almost everything in this project

Content

The content was all written by myself and is a true reflection of my thoughts and feelings about my artworks and projects.

Media

• The photos for artworks used in this site were all drawn and created by me.
• The image of my face was taken with the soda camera app on iphone Xr.
• The original files for all the artworks are all placed in the folder

Acknowledgements

• I received inspiration for this project from isometric styles that I had found as I like the clean and minimalistic designs.
• I was also inspired to use an automn palette as I was born in October, which is in the season of autumn and I wanted it to be a reflection of myself as I really like autumn.