Mil's Diner website preview hero image


My friend's family owns a small restaurant back in my hometown of Milpitas, California. I knew they could benefit from a website revamp, so I created one for them a few years ago. Recently, I overhauled the design to aim for a cleaner, more modern layout utilizing their logo colors. I plan to continue maintaining it as they provide more media and updated information as needed.

Historical Versions

Mil's Diner first website structure
Mil's Diner first website redesign
Mil's Diner new website design

Historical Versions

Mil's Diner first website structure Mil's Diner first website redesign
Mil's Diner new website design


  1. Mil's original website was sparse of design elements or images. It was made by one of my peers during high school. However, many years later, the Mil's family really wanted a website that was more inline with their current branding. Also, where they could host larger images of their menus. I figured it would be a good opportunity to create something with a lot of freedom for my development portfolio, so I offered up my services.
  2. After some research about the best available options, I decided to tear apart a copyright-free Bootstrap 3 template and host it on Github. Mil's already had a domain name so I easily reconnected it to what I created. This first design was meant to imitate a more homely, diner look and feel. It was inspired by the atmosphere of the actual restaurant interior.
Mil's Diner Mother's Day menu design
  1. 2020: On a whim during the pandemic, I threw together a quick Mil's Diner Mother's Day Specials menu for their pre-order pickup meals. Both my friend and I ogled at how clean and professional the layout turns out. I realized it would be awesome if I could make their website also match this concept. I knew that my development skills had improved alongside my design skills, so I decided to give it a shot.
  1. I again used a Bootstrap template as a starting base, but this time Bootstrap 4 rather than 3. I also edited the logo to have a semi-transparent background and obtained new photos to use for the hero slider component. As of now, the website is a fairly simple one-pager except for the awards images section. The minimalistic design is intentional, but in the future we'd like to add more photos to the slider as well as a gallery.

Page Content

Mil's Diner website preview - front page Mil's Diner website preview - about section Mil's Diner website preview - menu images Mil's Diner website preview - awards page Mil's Diner website preview - contact section


  1. When I did the first redesign of Mil's site, it was especially challenging because I was teaching myself some of the essential web development skills needed in addition to providing the majority of the content and design for the website.
  2. During the second (most recent) site's creation, I realized we'd be lacking much in the way of quality food photos. We also couldn't take any more because I lived in another state and Mil's was closed during the pandemic. We managed to scrounge up a few for the hero slider, but we will get more soon!
  3. I'm newer to CSS animations, so refining the transitions of elements on the page during page load/scroll has been a continual process.


Sometime this year we'd like to add more photos to the website, and maybe an instagram feed preview feature. Also, some additional refinement around the hero image slider, page animations, and menu lightbox in the code will be necessary. Finally, the website doesn't currently render well in Internet Explorer, so I'd like to add some fixes for this.

There's not a rush on these improvements, but I do plan on implementing them. Right now, Mil's has to stay closed to comply with restrictions during the pandemic, but they plan on re-opening as soon as its safe!