Live version: v2.0
Materiales Vallejo is a small business in Matamoros, Tamaulipas that sells construction materials to wholesellers, construction firms, and for retail. This is Materiales Vallejo's first online presence, and coincidentally, it's also the first time I build a website from scratch. It's a very small site and it's been a fun and challenging learning experience. Before this project I had basic experience building websites with Webflow, Squarespace and Adobe Muse.
I started working on v1.0 late Jan 2016 and finished on April 18th, 2016. v2.0 was started on May 2016 and finished on June 23rd, 2016. v3.0 started October 5th, 2016 and will hopefully end October 9th, 2016.
- Index
- About
- Privacy Policy
- 404
- Jobs (v3.1)
- Job Detail (v3.1)
- Job application form (v3.1)
Note: The site will also have an English version.
v3.0 will include/improve upon v2.0 in the following ways —
- Single-page Experience: Placing the most important content on the index page will help users find the content they are looking for much faster.
- Product Navigation: v2.0's interactive product gallery is not optimized for IE browsers and navigation between product categories is slow. The user has to click through each category individually to navigate the product catalogue. v3.0 will have a redesigned product experience by featuring a simple responsive product carrousel that doesn't require the user to click on specific product categories to view the products they're interested in.
- Asset Optimization: v2.0's assets weren't optimized or minified. v3.0 will deliver minified, gzipped assets and optimized images to minimize loading time. Asset optimization will be automated with Gulp.js.
- CSS Optimization: For v2.0 I did my best to manage CSS classes. My classes were usually overly specific, which prevented me from creating reusable classes. For v3.0 I will design with Tachyons, a CSS library of modular, responsive classes. I'll be using Tachyons to minimize the amount of CSS I write and maximize the reusability of my CSS classes. If you haven't had the chance to work with Tachyons, I highly recommend it. It makes web development fun (it feels like building Legos) because things just work and don't break. If you think it's intimidating, don't worry, I did too. It took me about a day to get used to it, and it's been one of the best investments of my time this year. If you want to develop websites faster and have fun while doing it, give Tachyons a try.
- Faster Development: For v1.0 and v2.0 I built the site without any framework. v3.0 will be built with Middleman, a Ruby static site generator. One of the things I love about Middleman is how I can use
.jsonfiles to create and structure data models. What's so great about data models is that you can create dynamic HTML/CSS layouts and structures. This is another tool I've really enjoyed working with and would highly recommend diving into Middleman or Jekyll or any other static site generator. - Practice: Other than building a faster experience (technically and structurally) I want to build v3.0 because I want to learn more about how I can improve my previous work to create better work in future projects.
First commit: October 8, 2016 | Last commit: TBD | Hosted on: TBD
- Text Editor: Vim
- Terminal: iTerm2
- Markup: HTML/CSS
- CSS Framework: Tachyons
- Interactivity: JavaScript
- Static Site Generator: Middleman
- Build tool: Gulp
- Host: TBD (GitHub Pages / Netlify)
First commit: June 6, 2016 | Last commit: June 23, 2016 | Hosted on: AWS S3
- Wireframing: Moleskine
- Experience / Visual Design: Sketch
- Icon Design: Illustrator
- Text Editor: Atom
- Terminal: Mac Terminal
- Markup: HTML/CSS
- Interactivity: JavaScript
- Deployment: AWS CLI
First commit: March 20, 2016 | Last commit: April 18, 2016 | Hosted on: AWS S3
- Wireframing: Moleskine
- Experience / Visual Design: Sketch
- Image Editing: Photoshop
- Icon Design: Illustrator
- Photography: Canon EOS Rebel XT
- Text Editor: Sublime
- Markup: HTML/CSS
- Preprocessor: SASS
- Interactivity: JavaScript