Development Portfolio - Tim Wilburn

• About
• Technical Summary
• Project Structure

About

I'm a self taught developer with a passion for developing a better Web. This site serves first and foremost as a portfolio for my work. It also serves as a demonstration of foundational web development skills, advanced styling, project architecture, Object Oriented Programming with JavaScript, and DevOps with Webpack and continuos deployment through GitHub and Netlify.

Technical Summary

• The site is a raw HTML, and JavaScript codebase compiled and built with Webpack and deployed to Netlify through continuous integration with this GitHub repository.

• It is built with HTML, CSS, and JavaScript. It is a custom codebase with minimal libraries. Custom JavaScript is implemented as a learning tool, sticking to an Object Oriented feature approach but utilized functionally. Future custom implementations include lazy loading with browser fall-back support, Netlify Error handling for form submissions, and page smooth-scrolling.

• The project is built with a mobile-first approach. HTML structure, naming, and styling purposes are all considered through the lens of mobile browsing and strict naming and code architecture conventions (BEM and OOCSS methodology). The mobile styles are defined first, then styling for larger screens is done using custom mixins and variables nested within that code using SASS.

Project Structure

• app contains the HTML markup.
  • Styles and JavaScript code are considered assets and live in the assets folder.
• dist is the folder that is deployed to Netlify. It is the compiled and minified version of the codebase. It is deleted and generated by Webpack on each build.
• configs contains the webpack configuration files for processing the HTML, minifying code and images, and compiling SCSS and JSes6.
  

JavaScript

• The project is built with an object oriented approach. The JavaScript features are each organized into classes then instantiated conditionally and used in the main index.js file.

  

  • Each module represents a feature or utility of the site. The modules are imported into the main index.js file and instantiated conditionally based on the presence of the appropriate HTML markup.
  
  

• HTML forms are hooked up to a Netlify form submission service for easy integration and robust form handling features.

Styles

• Styles are developed using an Object Oriented CSS approach with a BEM naming convention (Block Element Module). The styling is broken into categories and then instantiated in the main styles.scss file. Styling features can be added by simply defining your styles in the appropriate category, following the naming conventions, then including your import in the main category file. The categories are as follows:

  • The styles are organized into a base folder, a components folder, and a layout folder. The base folder contains styles that are applied globally. The components folder contains styles that are applied to individual components. The layout folder contains styles that are applied to the layout of the page.

    

  • Each style folder contains a main file that imports all of the styles in the folder. The main file is then imported into styles.scss (which is subsequently compiled into CSS by webpack).