Portfolio

Carl James Trelfa

Welcome to My Portfolio Site

This is my portfolio site. It has a collection of my work from over the years and helps me keep up to date with the latest web technology.

V2 is Online

Go to V2 - it's worth it!

I finally put v2 of the site online. I decided to build it using Angular because it's a popular technology and there are loads of jobs out there specialising in Angular (it's quickly becoming my niche) so I thought it would serve as a good example of my skills in that area.

I'm going to keep v1 as the main landing for the site, for a couple of reasons. Firstly, I've removed the drop-downs from v2 and some content is only available via those drop-downs (the flash experiments being a good example), maybe in the near future I'll work out a solution to add in another layer of navigation, but for now I'm happy to keep both versions live.

As I already said v2 is built on Angular, but it also uses Bootstrap for responsive design and CodeIgniter for the back-end. The pages are no longer generated on the server with php - the CodeIgniter back-end functions as a REST server, which the site JS requests using AJAX before constructing the actual page. The routing is all taken care of by Angular, there is a service for API access and a Pipe to prevent Angular stripping out certain tags from the HTML content that is fetched from the database.

The advantages of Angular are:

The new site uses the same content as the old site - it comes from the database. Note, however, that the gallery apps were not really designed with mobile in mind, so they may be a bit too big for a mobile screen - this is something I'll be working on in the enar future.

The next logical step, I guess, would be to learn Ionic - it's built on Angular and I've read the documentation and to be honest it looks like a doddle.

Click Here for site v1

Click Here for site v2

Quick note: potentially some of the site content may be out of date - please bear with me while I continue updating.

Helping Build The Web Since 1999-ish

I've been working with the web since around 1999/2000 and one thing I've learned is that web technology never stays still - there are constantly new frameworks and technologies to make use of. And the best way to keep your skills up to date is to have a site to practice on.

v1.0.0 of this site took me around about a week to produce from nothing. Luckily for us web developers, most of the common frameworks out there are free and everything is well documented.

If I don't know how to do something, I will find a way. If you want a responsive, mobile first approach, it's not a problem! In fact I'm currently working on v2 of the site using a Mobile-first, responsive design.

Most sections of the site explain how this very portfolio site was created and there are some web site examples I've worked over the years in the the Web Sites Section.

Here's a breakdown of the web technology used for building this site (most of this should be fairly obvious):

HTML

HTML standards were looked up and correctly followed throughout the site.

CSS 3

CSS and CSS 3 features are used to do funky things like the rounded corners around the edges of every page.

SASS

SASS is a CSS pre-processor and was used to enable more efficient CSS development.

PHP, CodeIgniter and MySQL

PHP allows me to dynamically build the pages, linking to a MySQL database and re-using blocks of common design elements, such as the header and navigation HTML.

JavaScript, JQuery, Angular, React and Node

JQuery, Angular and React usage are all demonstrated in the JavaScript section of the site.

Angular

Check out the Angular Image Gallery and the Angular Site V2.

SEO

Vanity URLs and more.

Flash/ActionScript

Not in as much demand as it used to be, but here it is anyway!

Coming Soon

There's more to cover in the future. So far I've covered JQuery and Angular in the JavaScript Section, but there are other frameworks such as React and Node. Also Wordpress and Laravel are popular and worth covering.

I've started working on the Laravel section...

Mobile Site

I've not had time to get a proper mobile version up and running in a single week.

Plans for the mobile site include:

  • Floating Header
  • "Hamburger" Menu for Navigation
  • Better use of the small screen - keep the Blue panel and the Code Panel, but maybe lose the indenting.

UPDATE! Mobile site v1.0 is now live.

Thoughout the site, Ill be displaying code snippets in blocks that look like this:

Some Example Code

Some code Some code Some code
Some code Some code Some code
Some code Some code Some code

I can't guarantee that every code snippet on the site is the exact code that was used. Some parts will have changed or been updated, but they should give you a good idea how the site was put together.

So go ahead and use the navigation at the top of the site and make sure you visit some of the web sites I've worked on.

Version History

Home