Richard L. Sypert Jr's Work Portfolio

Professional Experience

This site shows my experience as a Software Developer, Technical Writer, and Engineer.  It has been updated to Bootstrap 4.0.   This carousel presents Information about my Work History.

Digital Ocean Cloud-based computing and Ubuntu Linux Virtual Hosting

This site is hosted on Ubuntu 18.04 Digital Ocean Droplets, utilizing Apache Virtual Hosting.   Some apps have been deployed to Heroku Server.   Visual Studio Code is the development environment for this portfolio.

PHP-based and JavaScript-based technologies and frameworks featured

Fuel CMS framework (CodeIgniter-based), Angular Vue.js, Node.js, Ng, NPM, Laravel, Bootstrap, JQuery, JQueryUI, SVG, XML, CSS are some of the technologies used.  Framework-based applications are at the  Software Development->Frameworks menu tab.   PHP-based applications are located at the Software Development->LAMP-based menu tab.

Laravel-Mix MVC, React/Bootstrap/JQuery/ChartJs Component-based Front End

Laravel (Mix) with React.js, React Router, Chart.js, and Bootstrap is used in this app: See App.  This app uses React Hooks like UseEffect and UseState for functional components.   Here is code link: See Code.

Docker Laravel-9 Vite,React 17/Bootstrap/Chartjs Vote Parser Implementation

Also included is the code for another Vote Parer implementation using Docker/Docker-compose of Laravel 9 with Vite for React 17 javascript compilation. React Bootstrap and Chartjs is also utilized as before. Link to this code is See Code

Vue3 Composition API, Vue3/Bootstrap/JQuery/ChartJs Component-based front end

Vue 3 Composition API, Chart.js, and Bootstrap is used in this app: See App.  This app uses Vue3 Composition API which allows more function-based writing of components, inspired by React Hooks.   Here is code link: See Code.

Check Out the Newest Implementation of Vote Parser

It is a Docker-Compose networked implementation using Laravel 10, php 8.2, nginx, mysql 8.0, with Composer and NPM package management.

Included are: React, React-Bootstrap, Chartjs Javascript technologies, and 'Vite' technology is used to bundle front-end assets, and 'InertialJS' enables React components to be routed like Laravel Views.  See App

Please see README file in the following code repo for an explanation all included technologies, services, and utilities: See Code.

React using Google Programmable API with Express Backend using ATLAS Cloud API with Webpack and NPM compiling and PM2 process management.

Google Programmable API is used to target searches at selected Web Sites and Customize Return Info:  See App
React-Bootstrap Components are used to enhance responsiveness.  See Code.

Previous Next
Home/Code Repos

Home/Code Repos

Beneath are links to FuelCMS-based site Code

About This
  1. Technologies

    Web Page Technologies Used

    This is a page that gives explanation of the programming technologies used on this site.

  2. Making Contact

    You can email me if you like.  Also more contact info is given in my resume.

  3. My Profile

    Personal Profile

    You can view my Linked-In Personal Profile for more info on me.

About

Beneath there is a page about technologies that I've used, and an email contact page. Also you can see more about me on my LinkedIn profile page. Click this cover panel to see.

Software Development
  1. Data Anaysis

    Amino Acid Code Sequence Analyzer

    This program gives statistics for all combinations of amino acid sequences within a protein. The protein sequence is parsed by regex techniques from a text file, into a MySQL database. The first and last amino acid is chosen in the GUI, as well as, the desired statistical output. The database accessed by JavaScript-AJAX to PHP-MySQL on the server side which returns the statistics.
    The Code for PHP-based apps is here: PHP Code

  2. Human Organ System Analyzer 1

    The Orominer program shows a hierarchical organization of the human body constitution. Its top level is Organ Systems. It uses JavaScript, JQuery for event synchronization between hierarchical display and graphic display, as well as, dynamic generation of SVG graphical elements based on DOM HTML elements. MySQL Database information is converted into XML format using PHP for up front access by the code for generation of Hierachical Display. Unfortunately ONLY THE First 3 NODES Of DATA was developed at Project Completion.
    The Code for PHP-based apps is here: PHP Code

  3. Human Organ System Analyzer 2

    This orominer program contains Histological Data within the Hierarchical Organization of Human Body makeup. Histological Data is information about Human Organs and their tissues and cells. This application uses JavaScript Objects to store active data requests from which graphics is generated.
    The Code for PHP-based apps is here: PHP Code

  4. Game Coding

    Play Othello Game thru AJAX

    Play the Othello Game using AJAX technology which will eliminate Page Reloads.
    The Code for PHP-based app is here: Othello Game Code

LAMP Technologies

PHP/MySQL is used on the back-end for these apps. Regex is used to parse text files into a database. I programmatically converted flat non-relational tables into a relational-XMLfile for app data. PHP/SQL is used to query database and send tabular results to front-end. Javascript/JQuery is used for dynamic DOM manipulation and SVG graphic element generation. AJAX is also used to update and process game-board data, as well as load XML data files. Click on this Panel to see apps.

Mobile Portfolio
  1. Mobile Development

    JQuery Mobile Web Portfolio

    Link to a Mobile version of My work portfolio. I developed it using JQuery Mobile and it should run on Android devices.

Mobile Portfolio

Beneath is a JQuery Mobile version of my portfolio that is mobile-device-responsive

Frameworks

  1. React Javascript Tic-Tac-Toe

    React Javascript Tic Tac Toe app with CSS animations for victory celebration.
    Here is the code: React Javascript Code

  2. Laravel(Mix) w/React & Chart.js & Bootstrap.js Vote Parser

    The app uses Laravel (Mix) with React.js (including React Router). Composer is used to manage PHP dependencies, and NPM is used to managed the Node-based React.js dependencies. Laravel routing is used to serve main page and React routing for fast rendering of tables and charts. Table and paging is a custom code and charts utilize Chart.js. Here is code link: Laravel(Mix)/React/Chart.js/Bootstrap.js Vote Parser Code

  3. Vue 3 Composition API & Chart.js & Bootstrap.js Vote Parser

    The app uses Vue 3 Composition API. NPM is used to managed the Node-based Vue 3 dependencies. Vue 3 Composition API allows for function-based components which is inspired by React w/Hooks. Here is code link: Vue3(Composition API)/Chart.js/Bootstrap.js Vote Parser Code

  4. Docker/Laravel/Vite/React/Boostrap/Chartjs 2020 Presidential Election Parser

    It is a Docker-Compose networked implementation using Laravel 10, php 8.2, nginx, mysql 8.0, with Composer and NPM package management.
    Included are: React, React-Bootstrap, Chartjs Javascript technologies, and 'Vite' technology is used to bundle front-end assets, and 'InertialJS' enables React components to be routed like Laravel Views.   See Code

  5. React-Bootstrap with Express ATLAS Cloud MongoDb Backend

    A MERN Stack application that uses Google Programmable API to make customized searches for Car Information within React-Bootstrap. Server CodeClient Code

Frameworks

Programming I've done using:
Node.js based technologies of Vue, Angular, and React,
Some utilization of the Laravel MVC Framework and Node Express. Docker and Docker Compose Technologies used withth NPM and Webpack dependency management.

Production Maintenance Manuals
  1. Technical Writing

    Grainger ABCDE Series B

    This is a Maintenance and Product Information Manual tailored for a customers implementation of a Motor Efficiency Controller (MEC). It is a new generation product manual. I wrote it using Adobe InDesign according to the customers style rules

  2. Grainger CDE

    This is a Maintenance and Product Information Manual tailored for a customers implementation of a Motor Efficiency Controller (MEC). It is a new generation product manual. I wrote it in Adobe InDesign according to the customer's style rules.

  3. MEC Product Manual VT 1.6

    This is a Product Manual for a Motor Efficiency Controller (MEC). It is a new generation product manual. I wrote it in Adobe InDesign according to the customer's style rules.

Production Manuals

Operation and Maintenance Manuals for an Electro-Mechanical Application

Technical Specification Documents
  • Technical Writing

    White Paper

    This is a technical specification called a White Paper which explains the technology behind a companies product. In this case an Electrical Motor Energy Efficiency Device.

  • Engineering Specification

    This is a technical specification for the Clark County Land Development Approval process. I authored it as an Environmental Health Engineer for Southern Nevada Health District.

    • Technical Specifications

    Technology Explanation (White Paper) and Business Process Description

    Resume
  • Resume

    Dynamic HTML Resume w/Downloads

    Here is a link to my resume which uses dynamic CSS formatting.

    • Resume

    A Dynamic HTML and CSS version of my Resume. Also a Download Link for a PDF version

    Living In Las Vegas

  • Having Vegas Family Fun

    See a slide show and facts about Family Fun In Vegas.

    • Living In Vegas

    How to Have Family Fun in and around Vegas!  Although a little dated.

    Non Bootstrap Portfolio
  • Lamp Technologies

    Non-Bootstrap Work Portfolio

    My old work portfolio using LAMP technologies including CodeIgniter MVC Framework,FUEL-CMS (a CodeIgniter-based Content Management System), PHP, MySQL, HTML, JavaScript, JQuery, JQuery UI, JQuery Mobile, Angular JS, ReactJS (ngrx) CSS, CSS3, SVG, AJAX, XML, JSON, Regex, DOM, Notepad++, Cloud9 IDE, GIT, Heroku Server, Laravel MVC, GitHub API, Facebook API, Active Campaign API, Bootstrap, WordPress, Ruby On Rails, Google Developer Tools, Homestead Dev, Vagrant VMs, Adobe InDesign, GIMP (like Photoshop), and other technologies.

    • Non-Bootstrap Portfolio

    CodeIgniter,Fuel CMS, and Lamp technologies are used as the MVC framework. They are based on PHP/LAMP technologies. Includes lot of built-in routing, modular storage of code in a database, and Active Object database access. On the front-end, CSS 2-D and 3-D tranformations are used to produce animations.