Examples of Programming, Graphic Design and Video Production

Pure JavaScript ES6 Search Github Users App

Takes user input and searches github.com then returns lists (fetches data) of matches based upon keystrokes.

Uses two different URLs from Github, one for users and one for Repos. Returns profile, list of public repos and a href links to each of them, number of public gists, number of followers and number of users account is following. Also has error management and displays an alert (if/else statement) in case a user is not found.

Uses JavaScript ES6, HTML5, and CSS3 locally. Also uses Bootstrap v4.0.0-beta.2, Bootswatch, jQuery v3.2.1, and popper.min.js delivered through a CDN.

Uses async await and the fetch API. Creates a UI class that inserts info. into the DOM. Connects via a key up event, so as you spell it returns matches. Uses Github client ID and client Secret within the API.

Displays the latest repositories (in this app it displays up to 66 repositories).

Search Github Users App

Pure JavaScript ES6 Book List Generator

Takes user input and creates a list of books.

User adds title, author, and ISBN#, then clicks on SUBMIT. List is dynamically created below and user has the ability to delete individual entries.

Uses JavaScript ES5 (V1) and ES6 (V2), Skeleton CSS, and HTML5. Uses if else statements, local variables, classes, events, event listeners, validation, functions, methods, forEach, loops, constructors, UI.prototype, and e.preventDefault, static, JSON.parse and JSON.stringify.

The book list is saved/persisted into local storage, so if a user closes the browser and returns to the page, the values are saved in the users browser.

If a user removes a book, it is removed from both the app and from local storage.

If a user clears the browser cache the local storage is also cleared. If a user opens an incognito/private window, local storage is cleared.

JavaScript ES6 Book List

Pure JavaScript ES6 Number Guesser Game

Takes user input and tests against a random number prechosen by the JavaScript web app.

Uses JavaScript ES6, Skeleton CSS, and HTML5. Uses events, event listeners, validation, functions, getRandomNum, and Math.random.

Player must guess a number between a min (1) and max (10). Player gets a certain amount of guesses (3). App notifies player of the number of guesses remaining. App notifies the player of the correct answer whether or not they win or lose. Player can choose to play again.

JavaScript ES6 Number Guesser Game

Pure JavaScript ES6 Task List

This web app uses JavaScript ES6 along with materialize css, font awesome, html5 and jQuery to produce a task list using the DOM.

The task list allows users to add tasks, filter tasks, and remove individual tasks or clear all tasks.

The tasks are saved/persisted into local storage, so if a user closes the browser and returns to the page, the values are saved in the users browser.

If a user removes a task, it is removed from both the app and from local storage.

If a user clears the browser cache the local storage is also cleared. If a user opens an incognito/private window, local storage is cleared.

It uses events, event listeners, JSON.parse to get tasks from local storage, for each loops, functions, and JSON.stringify to store to local storage in the browser.

JavaScript ES6 Task List

Pure JavaScript ES6 Loan Calculator

Takes loan amount, interest rate and number of years to calculate the monthly payment, the total payment and total interest paid.

Uses JavaScript ES6, jQuery, Popper.js, Bootstrap JS, Bootstrap 4 CSS, and HTML5.

Utilizes events, event listeners, error handling, setTimeout, if else statements, Math.pow, and displays a loader animation (loader.gif) and an error popup if fields are empty or contain invalid input.

JavaScript ES6 Loan Calculator

Vue.js Web App

Vue.js is a JavaScript front-end framework that was built to organize and simplify web development.

The project focuses on making ideas in web UI development (components, declarative UI, hot-reloading, time-travel debugging, etc.) more approachable. It attempts to be less opinionated and thus easier for developers to pick up.

It features an incrementally adoptable architecture. The core library focuses on declarative rendering and component composition and can be embedded into existing pages. Advanced features required for complex applications such as routing, state management and build tooling are offered via officially maintained supporting libraries and packages.

Vue.js Web App

Angular 1.6 Tour of Heros

This an Angular 1.6 app that demonstrates how, for example, a staffing agency could potentially manage its stable of heroes.

This basic app has many of the features found in a data-driven application. It acquires and displays a list of heroes, edits a selected hero's detail, and navigates among different views of heroic data.

The app demonstrated Angulars ability to:

• Use built-in Angular directives to show and hide elements and display lists of hero data
• Create Angular components to display hero details and show an array of heroes
• Use one-way data binding for read-only data
• Add editable fields to update a model with two-way data binding
• Bind component methods to user events, like keystrokes and clicks
• Enable users to select a hero from a master list and edit that hero in the details view
• Format data with pipes
• Create a shared service to assemble the heroes
• Use routing to navigate among different views and their components

This app was created by Matthew Lind in Angular 1.6 in 03/2018.

Angular 1.6 Tour of Heros (Offline)

Angular 1.6 Web Site

This is a mobile-responsive web site built using Node, Angular 1.2, Angular 1.6, HTML5, CSS3, Bootstrap, jQuery, and various JavaScript libraries.

Angular Mobile-Reponsive Web Site (offline - files available for inspection)

Angular 1.6 Shopping List

Shopping List built in Angular 1.6 and has error management. If you put a duplicate item in the list an error message is displayed.

Angular 1.6 Shopping List

Angular 1.6 To-Do List

To-Do List built in Angular 1.6 and has required field. If you fail to input text in the form field a warning dialog is displayed.

Angular 1.6 To-Do List

Angular 1.3 REST API Call

Demo of Angular 1.3 Rest API Calls in AngularJS using $http Service and http://jsonplaceholder.typicode.com data

Angular 1.3 REST API Call

Angular 1.2 Contact Form

Form uses app.js and controller.js for form controls, and in the code it uses ng-app, ng-controller, ng-class, ng-disabled, and ng-model. Form uses phpmailer to post form results via email. It has error management, all fields are required fields, and has data validation on the email field to confirm there is an actual email address in the field before it will post results.

-->Angular 1.2 Contact Form (form is offline - code available upon request)

Laravel server installation demo

This web site required Python, Dropwizard, Maven, Java SE Dev Kit, JDK 11.0.2, MySQL, and JavaScript Runtime to install.

Laravel Installation Web site is offline - files available upon request.

React.js Calculator

This is a mobile-responsive calculator based on the iPhone calculator, built using React.js.

React.js Calculator

Tic Tact Toe Game

Interactive tic-tac-toe game built with React and normalize.css.

Uses javascript ES6 arrow functions, classes, let, and const statements; uses mousedown, keydown, and click event listeners.

Used Babel to compile ES6 code to react.

Tic tac Toe Game using React

PERL Search Script

This is a PERL script that indexes and searches the web site and was built using PERL, Perlfect, Node, HTML5, CSS3, Javascript and Angular 1.6. The results return a string that does not index the site properly as the search engine script was not built for use with Angular 1.6, but it shows that I am able to implement PERL scripts and CGI Scripts on a web site. The script is better suited for non-Angular web sites.

PERL Search Scriptscript is offline - files available upon request)

PHP Scripts

Domain Name WhoIs Search (offline - PHP version no longer supported)

Domain Name WhoIs Search written in PHP using classes, .lst files, and custom functions.

PHP display images in a folder script A PHP script that displays automatically images all that are in a particualr folder on a web server.

jQuery Samples

These are animated effects Matt Lind added to web sites that add flair, notoriety and credibility to a web site.

Animated Image Gallery on Click

Animated Gallery on Click

Peel Backs

These are jQuery peel back web applications and are on the top right or left of a web page, or across the bottom or top of a web page, or on the left side or right side of a web page and when you hover over them a larger graphic is displayed. Within the larger graphic can be links to other parts of a web site or web page.

Popups

These popup over the whole page on a web site and can make a user have to perform an action (like enter an email address or phone number) to continue...

Slideshow Web Applications

These can be slide shows of a community, a home, or other photos.

jQuery Slideshow

(HTML5 and CSS3 Mobile Responsive Slideshow)

jQuery Carousel

(Fixed Width, Cross-browser Slideshow)

Scroller Web Applications

These are automated slideshows of usually 3-5 graphics that slide thru on a web page and have thumbnails at the bottom to click on.

Balloon Popover Web Applications

These popup small balloons with more details when you hover over a word in some text. This is desgned as a desktop application with use of a mouse. Not designed for mobile devices.

Balloon popouts (offline but still available- hover your mouse over the words to see popout)

Image Popover Web ApplicationsThese popup larger images when you hover over a smaller image. Not designed for mobile devices.

Image Popover Sample

Image Transition Web Applications

These fade in and out from one photo to another with numerous animated effects available for the transistions between photos.

jQuery Fade Images In and Out

Video Productions made by Matthew Lind

Software Video Tutorials (Made using Camtasia)

• Training Video [TRT 12:50] (AVAILABLE UPON REQUEST)

• Training Video [TRT 22:13] (AVAILABLE UPON REQUEST)

Live Software Video Tutorial (done via Skype)

• Demonstration Video [TRT 51:38] (AVAILABLE UPON REQUEST)

DHTML Samples

DHTML Fireworks (desktop only)

DHTML Curtain Open

DHTML Snow (desktop only)

Java Applets (no longer supported in current browser versions)

Applet Samples (Offline)
These Applets worked for me in IE11. They did not work for me in Firefox or Opera. I did not try them in Chrome.
(you have to have Java installed and enabled. Then you have to configure the Exception Site and add .. to the List for the Applets to run)

Web Banner Design

Click Here to view samples of banners Matt Lind has made.

Postcard and Brochure Designs by Matt Lind

These are samples of postcards and brochures I have made over the past 20 years. They are mostly designs I made for real estate brokers and real estate agents between 2002 and 2014.

I also have printed out samples available for viewing upon an onsite interview.

I have created hundreds of brochures, thousands of postcards, and many other types print and web materials from scratch.

If you would like specific examples of designs other than brochures and postcards not listed here, please Contact Me.

Brochure and Postcard Designs (369 downloadable PDF files) (AVAILABLE UPON REQUEST)

Brochure Designs (AVAILABLE UPON REQUEST)

Flash

Sample Flash galleries built by Matt Lind available upon request.

Web Application Form Validation (AJAX and JavaScript)

Form Validation examples available upon request.

Web Application Video Embedding

Sample video embedding available upon request.

Web Button Design

Available upon request.

Web Icon Design

Available upon request.

Email Stationery Design

Available upon request.

Web Themes for Perl User Interface

Available upon request.

Web Page Graphic Design

Available upon request.

Logo Design

Available upon request.