Back to Projects

Personal Website Development

Sample codeAs I embark on the next stage of my life, both in terms of higher education and my career, it seemed more prudent than ever to create a personal website that communicates both my professional experiences and my personality. When considering how to design my website, there was never a question of whether or not I would build it myself. The creation of a website from the code up allows me to fully personalize the site and display my web development and design abilities. After deciding to create the website, I began sketching and writing out ideas, which eventually culminated in this site.

Project Goals: 1-Communicate my research and experiences in an easily accessible and visually interesting format, 2-Display my web development and design skills through a hand-coded personal website
Project Process
Early Lists

Early Idea Lists

I began by listing out the experiences, research, and features that I would like to feature. From that point, I began categorizing my ideas into pages and navigation bar sections. I also began testing color combinations to decide which combination would work best for the site.

First sketches

Home Page Graphic Sketches

After deciding my featured sections, I began sketching ideas for graphics to feature on my home page. After making the sketches, I created digital versions of them using Adobe Photoshop, as well as the graphics on each page.

Page Sketches

Page Sketches

For each page category, I began sketching ideas for layouts and graphics. I made each graphic in Adobe Photoshop, and prepared to code the layout for each page.

First sketches

Coding with HTML, CSS, JavaScript and JQuery

After finishing my sketches, creating my page graphics, and choosing my color schemes, I began coding the site. I focused on making the site fully responsive, including mobile navigation.

Page Sketches

Building the Page Skeleton

In the early stages of coding, I focused on making the skeleton, or template, for each page. I placed "lorem ipsum" filler text on each page until I coded them.

Back to Projects