JStoutenburg.com: Portfolio

Most of my work is built from scratch so as to exercise my skills more fully, ensure security, and enable scalability and maintainability.

URL: http://jstoutenburg.com/projects/stouties-bakery/
When: March 2011
Skills Demonstrated: HTML, CSS, Illustrator
Explanation: This was a little project I completed as an assignment in the Dreamweaver course at school. Just a simple example of HTML and CSS working together to create a website with a consistent theme throughout all pages. The logo, background images, and icons were created using Adobe Illustrator.

URL: http://jstoutenburg.com/projects/ajaxRequest/example/
When: February 2011
Skills Demonstrated: PHP, JavaScript, AJAX, HTML/CSS
Explanation: I got the idea for this project while working on the Craigslist Jobs Word Cloud project. I realized that an easy-to-use ajax object would allow me to improve the performance of my web applications by splitting up the work between client and server and also allowing data to be transferred in small rapid chunks rather than in a single time-consuming one. This idea wasn't new to me. Neither was the ajax technique. I guess what I realized was how critical the use of ajax is. The ajaxRequest object handles the details of making ajax requests. It automatically detects which ajax object to use, whether XMLHttpRequest or ActiveXObject, sets default values, automatically opens and sends the request unless told not to, and even logs all of its activities to a customizable function that writes to the console or an html element object.

URL: http://jstoutenburg.com/apps/job_board_experiment/word_cloud/
When: February 2011
Skills Demonstrated: PHP, JavaScript, AJAX, HTML/CSS
Explanation: Inspired by my Stats II class. I was thinking I wanted to use data from popular job board websites for my project and my teacher mentioned that a word cloud would be really cool. I started thinking about how I could do it in PHP. I went home and began coding. The next morning this is what I had! It generates a word cloud from the first posts matching the craigslist categories, city, and count specified. I'm working to incorporate more AJAX to chunk the loading process up into smaller pieces. I also need to refactor the code to conform with OOP and MVC principles.

URL: http://jstoutenburg.com/sites/lindseyraeimages.com/
When: January 2010
Skills Demonstrated: PHP, Flash/ActionScript, JavaScript/JQuery, HTML/CSS, Photoshop, Illustrator
Explanation: I put together this website for a friend and for a class project. After about a week or so of learning Flash ActionScript, I got everything to work right. A key feature of this project is it's communication with a PHP script. The PHP script dynamically generates an XML list of pictures on the server, uploaded by Lindsey. The ActionScript in the Flash component processes the list and prepares the photo gallery. So Lindsey can easily add and remove pictures using an FTP client, and I don't have to update the site. Also, by clicking on Lindsey's email address, a contact form comes floating into view. The form is live and is processed by a PHP script that will send an email to Lindsey. Regular expressions in JavaScript are used to validate the form fields.

URL: http://jstoutenburg.com/apps/taskblaster/
When: April 2010 - July 2010
Skills Demonstrated: PHP, JavaScript/JQuery, HTML/CSS
Explanation: This was a class project. The class was an introduction to PHP. I did use some Object Oriented Programming, but not enough. I did focus on writting clean, well-organized, non-repetitive, decoupled components though. Near the end of the project, it became really easy to add new features because I had invented a convention for building components. The site is live. A user can register for an account. They are sent an email to confirm their password, in case they ever need to reset their password. There are features only available to administrators. Users can create, delete, complete, edit, and sort tasks. I would have liked to add filtering features, and do more with the dates and times.

URL: http://jstoutenburg.com/projects/summeralliance.com/
When: Summer 2010
Skills Demonstrated: HTML, CSS, JavaScript/JQuery, Photoshop, Illustrator
Explanation: I was doing this site for an old friend who wanted to start a summer jobs recruitment service. He found another job, and didn't actually have the money to pay for this site, so it remains unfinished. There is no PHP in this site since the project was cut short. It looks like a seven page website, but it's actually not. The content for all seven pages are loaded together, and using JavaScript and CSS, the active content is displayed and moved when the tab is clicked by the user. It was an idea that was fun to implement.

URL: http://jstoutenburg.com/projects/beta/9.0
When: April 2010 - July 2010 (same time as TaskBlaster)
Skills Demonstrated: HTML/CSS
Explanation: This was done for my HTML/CSS class. Since I was already pretty familiar with HTML and CSS, because I had gone through all the tutorials at w3schools.com, I put some extra effort into visual effects using Photoshop and Illustrator. I also focused on using CSS effectively.

URL: http://jstoutenburg.com/projects/alphabet/
When:
Skills Demonstrated: HTML/CSS, Javascript/JQuery, Illustrator
Explanation: This was one of the first projects I ever worked on. I did it after going through the JavaScript tutorial at w3schools.com as an effort to practice javascript, and to just have some fun. The graphics were created using Adobe Illustrator. The animation is done using JavaScript/JQuery. The most complicated feature to implement was the speed control on the scrolling letters. The speed of the scrolling is determined based on the position of the mouse over the green arrow control. By clicking on a letter, it enlarges and goes away. I was intending to add sounds and pictures for each letter, but time, money, school pulled me away from the project.