My Website!

kylemerl.com

I needed a porfolio website that demonstrates my skills in:

  • HTML and CSS
  • PHP and JS
  • Iterative Design
  • UI and UX
  • Video Editing
  • Graphic Design
  • And More

I decided that I would build this site without using any libraries or frameworks, such as Bootstrap or JQuery. All of the layout is achieved with CSS Grid and Flexbox, and all of the animations and effects are achieved with CSS and Vanilla Javascript. I used PHP to generate dynamic content everywhere that it made sense to do so. Instead of hard-coding my HTML content, I saved it into PHP arrays and used foreach loops, if statements, and the $_GET superglobal to dynamically generate the content. This will make the task of adding new projects in the future easier.

For this site I wanted to make sure that my coded website was an exact match to my wireframes. I spent a lot of time in Adobe XD playing around with different layouts and color palettes. I have found that the better the wireframe is, the easier the website is to develop. The only aspects not included in my wireframes are the ideas that I came up with while coding my site.

My primary concern with every site I build is creating a great user experience. It should be easy for you to find the information you need when visiting a website. I hope I achieved that goal!

Here are some of the wireframes I made for this website. Click the button below to download the XD file.

Download XD File