This version of the site is a full rebuild from the ground up as a standalone single-page application using Vue.js and Vite - no backend, no Laravel, no server-side rendering. All content is served from a single data.json file, making it fast, portable and simple to deploy anywhere as a static site.
The entire site was built using Claude Code, Anthropic's AI-powered coding assistant. Claude Code was used for every aspect of the build - from initial project scaffolding and file structure, to component design, routing, data modelling and content migration.
The development workflow was entirely conversational: describing what was needed, reviewing Claude's output, giving feedback and iterating. This made it possible to build a fully featured portfolio site quickly, without writing boilerplate by hand. The entire codebase - components, routing, data structure, build config and plugins - was produced through this back-and-forth process.
All content from the previous Laravel-based site was migrated from the original database seeders. Claude Code parsed the PHP seeder files, compared them against the existing data.json, flagged differences one at a time, and merged the richer content - project bodies, image galleries, feature lists, photo names with locations - into the new data structure via a step-by-step review process.
The site uses Vue.js 3 with the Composition API and Vue Router for client-side navigation. Vite handles bundling with a clean src/ directory structure separating pages, components, composables and assets. All data is loaded once from a static JSON file and shared via a singleton composable, avoiding redundant fetches across pages.
A lightweight PHP hit counter tracks page views, photo views, project image views and file downloads without any third-party analytics service. Historical view counts were imported from the previous site's analytics database, with bot filtering applied to remove traffic from 60+ known crawlers including UptimeRobot, Googlebot and various scrapers.
Photos and files are served through PHP scripts (serve-photo.php and download.php) rather than directly as static files. This allows every view or download to be counted server-side, including direct links from search engines, while avoiding double-counting views from within the site itself using the HTTP Referer header. File locking prevents race conditions when multiple requests hit the counter simultaneously.
View counts are displayed on photo cards on hover, in the lightbox, and in a summary bar above the footer showing totals for each page, project and portfolio image.
Photos are stored as originals in src/photos/, committed to the repository, and processed by the deploy script using sharp. New photos are watermarked and written to a persistent directory outside the build output, so rebuilds never overwrite processed images. The same approach is used for downloadable files in src/files/.
The site includes dedicated pages for Home, About, Projects, Photos, Contact, Privacy and Terms, plus dynamic /projects/:slug routes for individual project detail pages with body content, feature lists and image galleries with a lightbox. A catch-all 404 route handles unknown URLs. Contact details are protected from bots using a JavaScript character-code obfuscation technique - the email address never appears as a plain string in the source.
Full Open Graph and Twitter card meta tags, Schema.org JSON-LD structured data, canonical URLs and a robots meta tag are included in the document head. Photos are served via slug-based URLs (/photo/slug) so search engines index meaningful paths rather than raw filenames.
A Wordle-inspired word guessing game built from scratch using vanilla JavaScript and jQuery. Guess the five-letter word in six attempts, letters are highlighted to show correct positions (green), letters in the word but in the wrong position (orange), and letters not in the word (grey).
The game uses two separate word lists; one for valid guesses and one for possible answers, to keep gameplay fair without requiring players to know obscure words. The board, keyboard and animations are all built without any game framework.
", "lower_body": "", "features": [ "6 attempts to guess a 5-letter word", "Colour-coded feedback on each guess", "On-screen keyboard with colour state tracking", "Physical keyboard support", "Tile flip and shake animations", "Separate answer and valid-guess word lists", "New random word each game" ], "images": [ { "name": "Word Game - Start", "filename": "wordgame-1.png", "featured": true }, { "name": "Word Game - In Progress", "filename": "wordgame-2.png", "featured": false }, { "name": "Word Game - Correct Guess", "filename": "wordgame-3.png", "featured": false }, { "name": "Word Game - Game Over", "filename": "wordgame-4.png", "featured": false } ] }, { "slug": "steve-j-2024", "name": "Steve-J 2024", "date": "2024", "image": "project_images/sj1-2024.png", "strapline": "Development of Steve-J in Laravel, Inertia.js, Tailwind and Vue.js. Full rebuild using the VILT stack with custom CMS and analytics dashboard.", "link": "https://www.steve-j.co.uk", "linkText": "www.steve-j.co.uk", "categories": [ "website-versions", "websites" ], "body": "The website was fairly old and using a very out of date version of the Laravel framework (5.2), it was also hosted using ServerPilot to manage my server. ServerPilot changed their pricing model so I was unable to use it for free so I decided to change how the website was hosted. I also took this opportunity to rebuild the site with the latest Laravel framework (11) as well as using Tailwind and Vue.JS for the frontend.
\nI kept to the same design as the old site but rewrote it from scratch using the VILT stack (Vue.js, Inertia.js, Laravel and Tailwind). It has a custom build content management area to allow me to easily update the content add new projects and photos. I also decided to stop using Google Analytics so created some middleware that logs requests and a simple dashboard to view the stats.
\nThe site is still hosted on Digital Ocean, but I'm now using CloudPanel to manage the server.
\n ", "lower_body": "", "features": [ "Laravel 11 PHP framework", "Vue.js, Inertia.js and Tailwind", "Bespoke content management system with CKEditor", "Photo lightbox and Project image gallery", "Custom analytics tracking", "Full content review/rewrite" ], "images": [ { "name": "Steve-J - Home Page", "filename": "sj1-2024.png", "featured": true }, { "name": "Steve-J - About", "filename": "sj2-2024.png", "featured": false }, { "name": "Steve-J - Photos", "filename": "sj3-2024.png", "featured": false }, { "name": "Steve-J - Photo Lightbox", "filename": "sj4-2024.png", "featured": false }, { "name": "Steve-J - Projects", "filename": "sj5-2024.png", "featured": false }, { "name": "Steve-J - Project Page", "filename": "sj6-2024.png", "featured": false }, { "name": "Steve-J - Blog", "filename": "sj7-2024.png", "featured": false }, { "name": "Steve-J - Contact", "filename": "sj8-2024.png", "featured": false }, { "name": "Steve-J - CMS Dashboard", "filename": "sj9-2024.png", "featured": false }, { "name": "Steve-J - CMS Index Page", "filename": "sj10-2024.png", "featured": false }, { "name": "Steve-J - CMS Edit Project", "filename": "sj11-2024.png", "featured": false } ] }, { "slug": "password-strength-checker", "name": "Password Strength Checker", "strapline": "An in-browser tool that scores password strength, estimates crack time, and suggests how to build a stronger password.", "date": 2022, "image": "project_images/password-strength-checker-1.png", "hide_hero": true, "categories": [ "just-for-fun", "tools", "featured" ], "link": "/projects/password-strength-checker?demo=1", "linkText": "Try it", "body": "A browser-based password strength checker built as a follow on from my MSc dissertation on password security. The dissertation found that many common password creation strategies; substituting letters for numbers or symbols, appending numbers to words, produce passwords that are far weaker than they appear. This tool puts those findings into practice.
Enter any password to get an instant breakdown of its strength: character variety, length, entropy, and an estimate of how long it would take to crack with a modern attack. A password generator is also included, producing random passwords that score highly across all criteria.
Entropy is a measure of how unpredictable a password is, expressed in bits. It is calculated from the size of the character set used (e.g. 26 for lowercase only, 62 for letters and numbers, 94 for all printable ASCII) and the length of the password: entropy = log\u2082(charset sizelength). The higher the entropy, the more guesses an attacker would need to try on average. A password with 28 bits of entropy can be cracked almost instantly; 64 bits or more is considered strong against modern offline attacks.
", "features": [ "Real-time strength scoring as you type", "Entropy calculation based on character set size and length", "Estimated crack time across different attack scenarios", "Breakdown of character variety; uppercase, lowercase, numbers, symbols", "Common pattern detection; repeated chars, sequential runs, keyboard walks", "Password generator producing strong, random passwords", "Show/hide password toggle" ], "images": [ { "filename": "password-strength-checker-1.png", "name": "Password Strength Checker" } ] }, { "slug": "caesar-cipher", "name": "Caesar Cipher Tool", "strapline": "An in-browser tool to encode and decode text using the Caesar cipher, with a brute-force mode that shows all 25 possible shifts at once.", "date": 2019, "image": "project_images/caesar-cipher-1.png", "hide_hero": true, "categories": [ "just-for-fun", "tools" ], "link": "/projects/caesar-cipher?demo=1", "linkText": "Try it", "body": "The Caesar cipher is one of the oldest and simplest encryption techniques; each letter in the message is shifted a fixed number of positions along the alphabet. A shift of 3 turns A into D, B into E, and so on. It was famously used by Julius Caesar to protect military correspondence, and while it offers no real security today, it remains a great introduction to the principles of substitution ciphers and cryptanalysis.
This tool lets you encode or decode any text using a shift of your choice (1\u201325). A shift of 13 is the well-known ROT13 variant, where encoding and decoding are the same operation. The brute-force mode displays all 25 possible shifts at once, which is how a Caesar cipher is typically broken by eye, looking for the shift that produces readable text.
", "features": [ "Encode and decode mode", "Adjustable shift from 1 to 25 via slider", "Shift of 13 produces ROT13", "Brute-force view shows all 25 shifts at once", "Copy output to clipboard", "Non-alphabetic characters left unchanged", "Fully in-browser, no data sent anywhere" ], "images": [] }, { "slug": "steve-j-2016", "name": "Steve-J 2016", "date": "2016", "image": "project_images/sj1-2016.png", "strapline": "A rebuild of my personal site using Laravel and Bootstrap, replacing the old Noisegate CMS.", "link": "https://www.steve-j.co.uk", "linkText": "www.steve-j.co.uk", "categories": [ "website-versions", "websites" ], "body": "After leaving Noisegate Media and starting work at Image+, I moved my site away from the Noisegate CMS and decided to develop the site in the Laravel PHP framework with it's own CMS.
\nI used the same design as the old site, but rewrote it to use Bootstrap v3 rather than v2 and changed the colour. I also started using BitBucket for version control of the website. Other technical changes included using Digital Ocean for hosting and ServerPilot for server management. I also setup Let's Encrypt SSL certificates so I could enable HTTPS on my websites.
\n ", "lower_body": "", "features": [ "Laravel 5.2 PHP framework", "Responsive Design - whole site rewritten in Boostrap v3 so the site looks good on mobile devices as well as computers", "Filterable portfolio and photos - making it easy to select a category of photos or portfolio items to look at", "Photo Gallery - with overlays displayed on hover to give more information about the image", "Lightboxed images - displaying a larger image when clicked", "Contact form - with captcha to stop spam being sent", "Twitter feed - automatically displaying tweets made on my account", "Digital Ocean Hosting, ServerPilot Management and Let's Encrypt SSL" ], "images": [ { "name": "Steve-J - Home Page", "filename": "sj1-2016.png", "featured": true }, { "name": "Steve-J - About", "filename": "sj2-2016.png", "featured": false }, { "name": "Steve-J - Photos", "filename": "sj3-2016.png", "featured": false }, { "name": "Steve-J - Projects", "filename": "sj4-2016.png", "featured": false }, { "name": "Steve-J - Project Page", "filename": "sj5-2016.png", "featured": false }, { "name": "Steve-J - Blog", "filename": "sj6-2016.png", "featured": false }, { "name": "Steve-J - Contact", "filename": "sj7-2016.png", "featured": false } ] }, { "slug": "baby-jones", "name": "Baby Jones", "date": "2015", "image": "project_images/baby-jones-1.png", "strapline": "A countdown website tracking the days and weeks to the birth of our first child.", "link": "http://www.babyjones.co.uk", "linkText": "www.babyjones.co.uk", "categories": [ "websites" ], "body": "A single page website with countdown timers. It was developed with very simple HTML and uses jQuery to build up the rest of the page. This enables the site to be setup by changing a single config file. After the countdown, it shows when the baby is overdue and then counts up how old the baby is.
\n\t\t\t\t\tI developed the site from scratch taking inspiration from a few different websites I found.
", "lower_body": "", "features": [ "Responsive Design - so the site looks good on mobile devices as well as computers.", "Countdown Timer - showing Weeks, Days, Hours and Seconds", "Heartbeat Animation", "Card Flip Animation", "Easy Configuration" ], "images": [ { "name": "Baby Jones - Boy", "filename": "baby-jones-1.png", "featured": true }, { "name": "Baby Jones - Girl", "filename": "baby-jones-2.png", "featured": true }, { "name": "Baby Jones - Born", "filename": "baby-jones-3.png", "featured": true } ] }, { "slug": "honeymoon-website", "name": "Honeymoon Website", "date": "2014", "image": "project_images/honeymoon1.png", "strapline": "A travel diary website documenting our honeymoon to Singapore and Sumatra.", "link": "http://www.kellyandsteve.co.uk", "linkText": "kellyandsteve.co.uk", "categories": [ "featured", "websites" ], "body": "\nAfter our wedding, we went on honeymoon to Singapore and Sumatra. I created a website to show where we'd been and what we'd done while we were there. The site was based on a template from Themeforest which I addapted to suit my needs. The site contains a photo gallery and map showing the places we visited while there.
", "lower_body": "", "features": [ "Responsive Design - so the site looks good on mobile devices as well as computers. The original template wasn't responsive so I had to add this in myself", "Full page slideshow gallery - showing photos taken while away", "Accordian layout - to list what we did on each day", "Google map - plotting the places we went", "Lightboxed photo gallery" ], "images": [ { "name": "Honeymoon Website - Home", "filename": "honeymoon1.png", "featured": true }, { "name": "Honeymoon Website - What We Did In Singapore", "filename": "honeymoon2.png", "featured": false }, { "name": "Honeymoon Website - Where We Went In Singapore", "filename": "honeymoon3.png", "featured": false }, { "name": "Honeymoon Website - Photos In Singapore", "filename": "honeymoon4.png", "featured": false }, { "name": "Honeymoon Website - What We Did In Sumatra", "filename": "honeymoon5.png", "featured": false }, { "name": "Honeymoon Website - Where We Went In Sumatra", "filename": "honeymoon6.png", "featured": false }, { "name": "Honeymoon Website - Photos In Sumatra", "filename": "honeymoon7.png", "featured": false } ] }, { "slug": "ad-band", "name": "AD Band", "date": "2013", "image": "project_images/band1.png", "strapline": "Website for AD Concert Band, a wind band based in Birmingham.", "link": "http://www.adband.org.uk/", "linkText": "www.adband.org.uk", "categories": [ "websites" ], "body": "\nAD Concert are a wind band based in Birmingham, they had an old website which was based running on Joomla. They wanted a new site which would be easier for them to update themselves.
\nI created them a site using a template from Themeforest and plugged it into the Noisegate CMS so they could update it.
", "lower_body": "", "features": [ "Image Slideshow - jQuery slideshow on the homepage", "Events Calendar - with links to concert pages", "Members area - secure area where documents can be uploaded for band members", "MP3 streaming - embedded mp3 player giving a sample of the CD", "Image gallery - with lightboxed images", "Guestbook - allowing people to leave comments which are moderated before being displayed on the site", "Contact page - with form and Google Maps" ], "images": [ { "name": "Ad Band - Home Page", "filename": "band1.png", "featured": true }, { "name": "Ad Band - About", "filename": "band2.png", "featured": false }, { "name": "Ad Band - Concerts", "filename": "band3.png", "featured": false }, { "name": "Ad Band - Gallery", "filename": "band4.png", "featured": false }, { "name": "Ad Band - Join Us", "filename": "band5.png", "featured": false }, { "name": "Ad Band - Guestbook", "filename": "band6.png", "featured": false } ] }, { "slug": "alternative-dice-captcha", "name": "Alternative Dice Captcha", "date": "2013", "image": "project_images/dicecaptcha.png", "hide_hero": true, "strapline": "I created Dice CAPTCHA as a simple and easy to read way to help prevent spam.", "link": "/projects/alternative-dice-captcha?demo=1", "linkText": "Live Demo", "categories": [ "code-canyon", "other" ], "body": "\nA CAPTCHA is a designed to stop the bots that trawl the internet from sending you spam by filling in your contact form. This is usually done by having obscured words that a human can just about read, but a bot can't. The issue with these is that users often find it difficult to identify the words which causes frustration and could lose you customers.
\nThe Dice CAPTCHA is a new way to try to reduce the difficulty for users, while still helping to prevent spam.
\nIt works by asking the user to calculate a simple sum using the numbers displayed on a number of dice.
\nIt is easy to configure and use and can be added to an existing form in just a few lines of code. The CAPTCHA is a single simple image and will work in any browser.
\nThis used to be for sale on CodeCanyon but isn't any longer, if you would like to know more please contact me.
", "lower_body": "", "features": [], "images": [ { "name": "Alternative Dice Captcha", "filename": "dicecaptcha.png", "featured": true } ] }, { "slug": "steve-j-2013", "name": "Steve-J 2013", "date": "2013", "image": "project_images/sj1-2013.png", "strapline": "An update of steve-j.co.uk - responsive design with filterable portfolio and photo gallery.", "link": "https://www.steve-j.co.uk/", "linkText": "www.steve-j.co.uk", "categories": [ "website-versions", "websites" ], "body": "\nin 2013 I decided to update my site again, as the old template was starting to look a bit dated. I also wanted to create a responsive site so it would work nicely on mobile devices.
\nAs I'm not a designer I decided to use a template again. The site now uses a template from Themeforest which I have customised a bit to suit my needs. I continued to use the Noisegate CMS as a backend so was easy for me to update.
", "lower_body": "", "features": [ "Responsive Design - so the site looks good on mobile devices as well as computers", "Filterable portfolio and photos - making it easy to select a category of photos or portfolio items to look at", "Photo Gallery - with overlays displayed on hover to give more information about the image", "Lightboxed images - displaying a larger image when clicked", "Contact form - with captcha to stop spam being sent", "Twitter feed - automatically displaying tweets made on my account", "Code styling - to display code with syntax highlighting to help readability" ], "images": [ { "name": "Steve-J - Home Page", "filename": "sj1-2013.png", "featured": true }, { "name": "Steve-J - About", "filename": "sj2-2013.png", "featured": false }, { "name": "Steve-J - Projects", "filename": "sj3-2013.png", "featured": false }, { "name": "Steve-J - Photos", "filename": "sj4-2013.png", "featured": false }, { "name": "Steve-J - Scripts", "filename": "sj5-2013.png", "featured": false }, { "name": "Steve-J - Blog", "filename": "sj6-2013.png", "featured": false }, { "name": "Steve-J - Contact", "filename": "sj7-2013.png", "featured": false } ] }, { "slug": "wedding-website", "name": "Wedding Website", "date": "2013", "image": "project_images/wedding1.png", "strapline": "A simple single page website for our wedding in October 2013.", "link": "https://www.steve-j.co.uk/kellyandsteve.co.uk", "linkText": "www.kellyandsteve.co.uk", "categories": [ "websites" ], "body": "\nFor our wedding in October 2013, I created a simple website to give guests information and allow them to RSVP online. It was a simple single page site which used sliding pages to show different guest information.
\n\t\t\t\t\t\tI developed the site from scratch taking inspiration from a few different websites I found.
", "features": [ "Single page website - with slides showing different information", "Static website - coded in HTML, CSS and jQuery", "Uses the jQuery Cycle Plugin for navigation", "Sliding page transformations", "Simple design, with colours and fonts to match the rest of our wedding stationary", "AJAX form allowing people to RSVP online" ], "images": [ { "name": "Wedding Website - Home Page", "filename": "wedding1.png", "featured": true }, { "name": "Wedding Website - Rsvp Form", "filename": "wedding2.png", "featured": false }, { "name": "Wedding Website - Directions", "filename": "wedding3.png", "featured": false }, { "name": "Wedding Website - Directions", "filename": "wedding4.png", "featured": false }, { "name": "Wedding Website - Accommodation", "filename": "wedding5.png", "featured": false } ] }, { "slug": "pi-blog", "name": "Pi Blog", "date": "2012", "image": "project_images/rp1.png", "strapline": "A blog documenting my experience setting up and using a Raspberry Pi.", "link": "http://www.piblog.co.uk/", "linkText": "www.piblog.co.uk", "categories": [ "websites" ], "body": "\nI recently bought a Raspberry Pi computer and decided to set up a blog about it and what I'd been using it for.
\nI decided to add the site onto my existing CMS account within the Noisegate CMS, and just use the Blog functionality for the site.
\nI did a search for templates and found Luis Zuno, a designer who offers some free templates in exchange for a tweet (find his template site here). After looking through the templates available, I chose the Vintage template as it had a good blog section. After a bit of customisation of the template to suit my needs I could plug it into the CMS and had a blog that is quick and easy to update.
", "lower_body": "", "features": [ "Fully responsive design - the site resizes and rearranges to fit to the size of the screen, whether being viewed on a desktop computer, tablet or mobile phone", "Tag cloud and search - using the CMS tags functionality blog posts can be tagged and a tag cloud automatically generated", "Date filtering - a listing in the right panel shows the months posts were made and the number of posts each month", "Contact from - I initially had a contact form on the site but took it off as it was never used apart from for spam", "Comments - there is the ability for readers of the blog to leave comments on each post, before the comment is displayed on the site it needs approving", "Share functionality - each post has buttons to allow quick and easy sharing on social media sites", "Post to twitter - whenever I create a blog post, I can check a box which will automatically tweet it to my twitter account", "RSS - an rss feed is automatically generated of the blog posts", "Powered by Noisegate CMS - the whole site has the Noisegate CMS as a backend allowing me to add new posts easily" ], "images": [ { "name": "Pi Blog - Home", "filename": "rp1.png", "featured": true }, { "name": "Pi Blog - Post With Comments", "filename": "rp2.png", "featured": false }, { "name": "Pi Blog - Post", "filename": "rp3.png", "featured": false }, { "name": "Pi Blog - Post With Photos", "filename": "rp4.png", "featured": false } ] }, { "slug": "steve-j-2011", "name": "Steve-J 2011", "date": "2011", "image": "project_images/sj1.png", "strapline": "The 2011 version of my website using Noisegate CMS and a template, also moved to the steve-j.co.uk domain.", "link": "https://www.steve-j.co.uk/", "linkText": "www.steve-j.co.uk", "categories": [ "website-versions", "websites" ], "body": "\nThe 2011 version of this site had a few major changes, the first was the design. I changed the template from the fairly basic one used on the previous site to a new one from Themeforest. The other big change was that the back-end was changed to be powered by the Noisegate Media CMS.
\nThe template I chose needed a fair bit of customisation as it was a single page template (i.e. it had all the sections on a single page and just scrolled down the the relevant part when a link was clicked). I'm not a big fan of single page templates especially when some pages (such as blog articles) would need to be on their own page. So I decided to change it to a multi-page site.
\nThe Noisegate CMS is a custom built PHP powered Content Management System, as I'd done a lot of work on the CMS I decided to use it for my own site. There was a bit of development needed to plug the site in, but once it was done adding and updating content on the site was quick and easy.
", "lower_body": "", "features": [ "Slideshow - JavaScript image slideshow on homepage", "Image Gallery - with categories and lightboxed Images and Quicksand category reordering animation", "Portfolio - Using jQuery so page doesn't need to reload between items", "Blog - Using jQuery to have a paginated slider without page reload when scrolling", "Noisegate CMS Integration - Backend Content Management System allowing easy updating of site", "Contact - with a form which emailed queries to me so I don't need to publish my email address", "Twitter Feed - Automatically displaying my latest tweets" ], "images": [ { "name": "Steve-J - Home Page", "filename": "sj1.png", "featured": true }, { "name": "Steve-J - About", "filename": "sj2.png", "featured": false }, { "name": "Steve-J - Photos", "filename": "sj3.png", "featured": false }, { "name": "Steve-J - Blog", "filename": "sj4.png", "featured": false }, { "name": "Steve-J - Projects", "filename": "sj5.png", "featured": false }, { "name": "Steve-J - Scripts", "filename": "sj6.png", "featured": false }, { "name": "Steve-J - Contact", "filename": "sj7.png", "featured": false } ] }, { "slug": "pam-hawkes", "name": "Pam Hawkes", "date": "2010", "image": "project_images/pam1.png", "strapline": "Portfolio website for local artist Pam Hawkes, with an image gallery and custom content management system.", "link": "/pamhawkes.co.uk/", "linkText": "www.pamhawkes.co.uk", "categories": [ "websites" ], "body": "\nPam Hawkes is an artist who wanted a website to promote her artwork and show some of the pieces she currently had for sale.
\nThis was the first of a few websites I developed which were designed by Dan Sharp.
\nThe site was a small site with 4 pages and an image gallery displaying thumbnails of Pam's artwork. Clicking on one of the thumbnails displayed a larger image and details about the piece. The site also had an admin area to allow Pam to quickly and easily update her content.
\nThe admin area was built from scratch using flat text files to store the information as the server provided didn't support a database. There was an image upload and cropping facility so Pam could add her images to the site and choose which section of the image she wanted to use as the thumbnail.
", "features": [ "CMS - Admin area allowing Pam to edit the content on all pages", "Image Gallery - Paginated image gallery with preview thumbnails displaying larger images when clicked on", "Image Cropping - Within the admin area when an image is uploaded, Pam can select the area of the image to use as the thumbnail", "Image Details - Each image has a title, type and size associated with it", "Image Ordering - Pam can also specify the order images are displayed", "Design by Dan Sharp" ], "images": [ { "name": "Pam Hawkes - Home Page", "filename": "pam1.png", "featured": true }, { "name": "Pam Hawkes - Artist Statement", "filename": "pam2.png", "featured": false }, { "name": "Pam Hawkes - Biography", "filename": "pam3.png", "featured": false }, { "name": "Pam Hawkes - Gallery", "filename": "pam4.png", "featured": true }, { "name": "Pam Hawkes - Contact", "filename": "pam5.png", "featured": false }, { "name": "Pam Hawkes - Admin Area", "filename": "pam6.png", "featured": false } ] }, { "slug": "dan-creative", "name": "Dan Creative", "date": "2009", "image": "project_images/dc1.png", "strapline": "Development of a portfolio website for graphic designer Dan Sharp.", "link": "/dancreative.co.uk/", "linkText": "www.dancreative.co.uk", "categories": [ "websites" ], "body": "\nDan Creative was a graphic design company set up by Dan Sharp, a designer I worked with on the websites for Urban Wooden Projects and Pam Hawkes.
\nThis site was designed by Dan which I then coded. It was a dynamic site with header and footer template files allowing for quick and easy updating. It also had a basic CMS, allowing Dan to update the content through an admin area. Due to server restrictions content was stored in text files rather than a database but the structure of the files meant Dan could update it without needing to edit HTML code.
", "features": [ "CMS - Allowing Dan to update the content of the pages quickly and easily", "Portfolio - Updatable through the CMS, with previous and next buttons to skip through items", "Contact Page - With a form so clients could email Dan directly", "Design by Dan Sharp" ], "images": [ { "name": "Dan Creative - Home Page", "filename": "dc1.png", "featured": true }, { "name": "Dan Creative - About", "filename": "dc2.png", "featured": false }, { "name": "Dan Creative - Services", "filename": "dc3.png", "featured": false }, { "name": "Dan Creative - Portfolio", "filename": "dc4.png", "featured": false }, { "name": "Dan Creative - Contact", "filename": "dc5.png", "featured": false } ] }, { "slug": "password-cracking-project", "name": "Password Cracking Project", "date": "2008", "image": "project_images/passwordsmall.png", "hide_hero": true, "strapline": "My MSc dissertation looking at the strength of passwords and how to go about generating a strong one.", "link": "", "linkText": "", "categories": [ "dissertations", "other" ], "body": "After a project during my work placement testing the strengths of user passwords on computer clusters. I thought I would base my Computer Security MSc dissertation on something similar. This project looks at the strength of passwords and how people can generate memorable, secure passwords.
\nPasswords have become the most common way for users to authenticate themselves and log in to systems. As more systems are using passwords, it is important that users have strong ones, but they also need to be able to remember them without resorting to bad habits such as writing them down. Most password policies suggest using upper and lower case letters, symbols and numbers in passwords. This is generally more secure than just a word, but may not be as secure as first thought. This paper looks at the ways people generate passwords and a program is created which uses similar methods to attempt to crack user passwords. The results showed that taking a word and inserting numbers or symbols or changing letters for numbers or symbols, create passwords which are straight forward to crack. Methods of creating strong, memorable passwords are then suggested and tested for both memorability and security.
\nDownload the documentation for the project:
\nPassword Cracking Documentation [pdf | 493kb]
Download the poster for the project:
\nPassword Cracking Poster [pdf | 234kb]
For reference the questionnaire used in the project is available below.
\nPassword Cracking Questionnaire
", "lower_body": "", "features": [], "images": [ { "name": "Password Project", "filename": "passwordsmall.png", "featured": true } ] }, { "slug": "urban-wooden-projects", "name": "Urban Wooden Projects", "date": "2008", "image": "project_images/uwp1.png", "strapline": "Website for a local shed and garden building manufacturer, with product listings and an admin area for price updates.", "link": "/urbanwoodenprojects.co.uk/", "linkText": "www.urbanwoodenprojects.co.uk", "categories": [ "websites" ], "body": "\nUrban Wooden Projects was a small company based in Birmingham that sold hand built sheds and chicken houses. They wanted a website to advertise their products and give information about the company.
\nThe site was a basic 3 page website with a home page, products page, and a simple contact page. There was also an admin area allowing the client to update prices for all their products as required. The site was written in PHP and due to server restrictions the site content was stored in flat text files rather than using a database.
\nThis was the second site I built during my time of self-employment, it was designed by Dan Sharp then coded by me.
", "features": [ "CMS - Admin area allowing the client to update all the prices on the site", "Simple Visitor Counter - Displayed on homepage and updated on each page load", "Design by Dan Sharp" ], "images": [ { "name": "Urban Wooden Projects - Home Page", "filename": "uwp1.png", "featured": true }, { "name": "Urban Wooden Projects - Products", "filename": "uwp2.png", "featured": true }, { "name": "Urban Wooden Projects - Contact", "filename": "uwp3.png", "featured": false }, { "name": "Urban Wooden Projects - Admin Area", "filename": "uwp4.png", "featured": false } ] }, { "slug": "rsa-cryptography-project", "name": "RSA Cryptography Project", "date": "2007", "image": "project_images/rsa-code.png", "hide_hero": true, "strapline": "My BSc dissertation looking at RSA Public-Key Cryptography and creating an implementation of the algorithm in C.", "link": "", "linkText": "", "categories": [ "dissertations", "other" ], "body": "For my Computer Science BSc at Loughborough University I chose to do a dissertation on RSA encryption. RSA is a public key encryption algorithm which is commonly used on the internet. I implemented the algorithm in C to encrypt text strings and simple text files.
Computer security is becoming increasingly important to companies and organisations all over the world. Computers are being used for communications between companies that may be in different cities or even different countries. These communications must be encrypted to ensure they remain secure while in transit. This project looks at the general principles of cryptography. It then focuses on RSA, a public key cryptographic algorithm. This algorithm is implemented in three stages, firstly using small numbers, to show the mathematics behind the algorithm. The second implementation extends this to using the GNU Multiple Precision Library, to allow the program to handle large numbers. The third implementation extends this further to include simple text file encryption.
The full project dissertation is available for download:
\nRSA Documentation [pdf | 1.9MB]
", "lower_body": "", "features": [], "images": [ { "name": "Rsa Project", "filename": "rsa-code.png", "featured": true } ] }, { "slug": "website-versions", "name": "Website Versions", "date": "2001", "image": "project_images/2009.png", "strapline": "A look at the first 5 variations of my website from 2001 to 2009, while I taught myself HTML, CSS and JavaScript.", "link": "https://steve-j.co.uk", "linkText": "www.steve-j.co.uk", "categories": [ "website-versions", "websites" ], "body": "I first started teaching myself HTML in about 2001, I managed to learn the basics and launched the first version of my website in 2004. It was very basic and looking at it now, badly coded!
\nThe site used a lot of images for the titles and menu items. The rest of it was large areas of solid colour. The code behind the site used a table based layout and didn't include any CSS.
By 2005, I'd started learning some basic CSS and made some updates to my website. The design was still very basic but I did remove the images for the menu items and replace them with more user friendly and SEO friendly text.
The 2007 version of the website was updated to use more complex CSS. I also ensured the site conformed to W3C website standards for both the HTML code and CSS. The other big change I made to the site was improving the content.
In 2008 I updated my website to use XHTML and CSS, using div's for the layout and external stylesheets instead of inline CSS. This was a big improvement to the structure of the code and ease of updating it.
\nI also started learning JavaScript and created an image gallery for the site without having to have a separate page for each image.
By 2009 I had started PHP development and had decided I was more of a programmer than a designer so thought I'd try using a website template from 4 Templates instead of my own design. Once I had found one I liked I could then modify it to suit my needs.
\nI used PHP to create dynamically generated pages with header and footer templates meaning I could quickly and easily update the design site wide by making a change in a single file.
\nThe 2009 site was also the first one to include a blog section, although like most of my blogs since, it didn't get updated very often...
", "lower_body": "", "features": [], "images": [ { "name": "2009 Website", "filename": "2009.png", "featured": true }, { "name": "2008 Website", "filename": "2008.png", "featured": false }, { "name": "2007 Website", "filename": "2007.png", "featured": false }, { "name": "2005 Website", "filename": "2005.png", "featured": false }, { "name": "2004 Website", "filename": "2004.png", "featured": false } ] } ], "photos": [ { "name": "Meerkat - Twycross Zoo", "filename": "IMG_9509.JPG", "description": "", "categories": [ "animals-and-insects", "featured" ], "slug": "meerkat-twycross-zoo" }, { "name": "RNLI Lifeboat - Brixham", "filename": "IMG_7304.JPG", "description": "", "categories": [ "vehicles" ], "slug": "rnli-lifeboat-brixham" }, { "name": "The Colosseum and Arch of Constantine - Rome, Italy", "filename": "IMG_2704.JPG", "description": "", "categories": [ "architecture", "featured" ], "slug": "the-colosseum-and-arch-of-constantine-rome-italy" }, { "name": "Stonehenge", "filename": "IMG_0378.JPG", "description": "", "categories": [ "architecture" ], "slug": "stonehenge" }, { "name": "Red Deer Stag - Highland Wildlife Park, Scotland", "filename": "IMG_4274.JPG", "description": "", "categories": [ "animals-and-insects" ], "slug": "red-deer-stag-highland-wildlife-park-scotland" }, { "name": "Steam Train on Glenfinnan Viaduct - Scotland", "filename": "IMG_3819.JPG", "description": "", "categories": [ "vehicles", "architecture" ], "slug": "steam-train-on-glenfinnan-viaduct-scotland" }, { "name": "Tiger - London Zoo", "filename": "IMG_4423.jpg", "description": "", "categories": [ "animals-and-insects", "featured" ], "slug": "tiger-london-zoo" }, { "name": "Red Arrows at English Riviera Airshow - Paignton", "filename": "IMG_8275.JPG", "description": "", "categories": [ "vehicles" ], "slug": "red-arrows-at-english-riviera-airshow-paignton" }, { "name": "Red Arrows with Coloured Smoke at English Riviera Airshow - Paignton", "filename": "IMG_8617.JPG", "description": "", "categories": [ "vehicles" ], "slug": "red-arrows-with-coloured-smoke-at-english-riviera-airshow-paignton" }, { "name": "Ashness Bridge - Keswick, Lake District", "filename": "p1000735002.jpg", "description": "", "categories": [ "travel" ], "slug": "ashness-bridge-keswick-lake-district" }, { "name": "Ashness Bridge Waterfall - Keswick, Lake District", "filename": "p1000732001.jpg", "description": "", "categories": [ "travel" ], "slug": "ashness-bridge-waterfall-keswick-lake-district" }, { "name": "Bumble Bee on a Sunflower", "filename": "p1080388024.jpg", "description": "", "categories": [ "animals-and-insects", "flowers-and-plants" ], "slug": "bumble-bee-on-a-sunflower" }, { "name": "Honey Bee on Purple African Daisy Flower", "filename": "p1080454028.jpg", "description": "", "categories": [ "animals-and-insects", "flowers-and-plants" ], "slug": "honey-bee-on-purple-african-daisy-flower" }, { "name": "Brightly Coloured Maltese Fishing Boat", "filename": "p1002804004.jpg", "description": "", "categories": [ "travel", "vehicles" ], "slug": "brightly-coloured-maltese-fishing-boat" }, { "name": "British Museum Glass Roof", "filename": "p1010056.jpg", "description": "", "categories": [ "architecture" ], "slug": "british-museum-glass-roof" }, { "name": "Tiger-Mimic Queen Butterfly on Leaf - Stratford Butterfly Farm", "filename": "p1020580010.jpg", "description": "", "categories": [ "animals-and-insects", "flowers-and-plants" ], "slug": "tiger-mimic-queen-butterfly-on-leaf-stratford-butterfly-farm" }, { "name": "Christmas Robin - Paignton Zoo", "filename": "p1040186011.jpg", "description": "", "categories": [ "animals-and-insects" ], "slug": "christmas-robin-paignton-zoo" }, { "name": "Close Up of a Bumble Bee on a Sunflower", "filename": "p1080394025.jpg", "description": "", "categories": [ "animals-and-insects", "flowers-and-plants", "featured" ], "slug": "close-up-of-a-bumble-bee-on-a-sunflower" }, { "name": "Close Up of a Hover Fly on a Yellow Calendula Flower", "filename": "p1080233023.jpg", "description": "", "categories": [ "animals-and-insects", "flowers-and-plants" ], "slug": "close-up-of-a-hover-fly-on-a-yellow-calendula-flower" }, { "name": "Dew on a Plant - Eden Project", "filename": "p1080855034.jpg", "description": "", "categories": [ "flowers-and-plants" ], "slug": "dew-on-a-plant-eden-project" }, { "name": "Dew on Leaves - Eden Project", "filename": "p1080467029.jpg", "description": "", "categories": [ "flowers-and-plants" ], "slug": "dew-on-leaves-eden-project" }, { "name": "Gazania Rigens (Treasure Flower) Star - Eden Project", "filename": "p1080471031.jpg", "description": "", "categories": [ "flowers-and-plants" ], "slug": "gazania-rigens-treasure-flower-star-eden-project" }, { "name": "Fly on White Background", "filename": "p1090320.jpg", "description": "", "categories": [ "animals-and-insects", "flowers-and-plants" ], "slug": "fly-on-white-background" }, { "name": "Guinea Pigs on a Log - Paignton Zoo", "filename": "p1040317012.jpg", "description": "", "categories": [ "animals-and-insects" ], "slug": "guinea-pigs-on-a-log-paignton-zoo" }, { "name": "Hover Fly on Yellow Arizona Beggarticks - Eden Project", "filename": "p1080445026.jpg", "description": "", "categories": [ "animals-and-insects", "flowers-and-plants" ], "slug": "hover-fly-on-yellow-arizona-beggarticks-eden-project" }, { "name": "Maltese Bus", "filename": "p1002777003.jpg", "description": "", "categories": [ "travel", "vehicles" ], "slug": "maltese-bus" }, { "name": "Mara Sitting on Grass - Whipsnade Zoo", "filename": "p1010799.jpg", "description": "", "categories": [ "animals-and-insects" ], "slug": "mara-sitting-on-grass-whipsnade-zoo" }, { "name": "Orange Gazania Rigens (Treasure Flower) on Black & White - Eden Project", "filename": "p1080472032.jpg", "description": "", "categories": [ "flowers-and-plants" ], "slug": "orange-gazania-rigens-treasure-flower-on-black-white-eden-project" }, { "name": "Our Cat Koshka", "filename": "p1070549.jpg", "description": "", "categories": [ "animals-and-insects" ], "slug": "our-cat-koshka" }, { "name": "Owl - Newquay Zoo", "filename": "p1090120035.jpg", "description": "Close up of an owl's head", "categories": [ "animals-and-insects", "featured" ], "slug": "owl-newquay-zoo" }, { "name": "Peacock on a Tree Stump - Whipsnade Zoo", "filename": "p1010865008.jpg", "description": "", "categories": [ "animals-and-insects", "featured" ], "slug": "peacock-on-a-tree-stump-whipsnade-zoo" }, { "name": "Penguins Home - Whipsnade Zoo", "filename": "p1010790.jpg", "description": "", "categories": [ "animals-and-insects" ], "slug": "penguins-home-whipsnade-zoo" }, { "name": "Purple Erysimum Flower - Eden Project", "filename": "p1080448027.jpg", "description": "", "categories": [ "flowers-and-plants" ], "slug": "purple-erysimum-flower-eden-project" }, { "name": "Raspberry", "filename": "p1080225022.jpg", "description": "", "categories": [ "flowers-and-plants" ], "slug": "raspberry" }, { "name": "Roller Coaster - Alton Towers", "filename": "p1003562006.jpg", "description": "", "categories": [ "other" ], "slug": "roller-coaster-alton-towers" }, { "name": "Shipwreck Cove - Zante", "filename": "p1070271018.jpg", "description": "", "categories": [ "travel" ], "slug": "shipwreck-cove-zante" }, { "name": "Single Drop of Dew on a Leaf - Eden Project", "filename": "p1080468030.jpg", "description": "", "categories": [ "flowers-and-plants" ], "slug": "single-drop-of-dew-on-a-leaf-eden-project" }, { "name": "Speed Boat - Isle of Wight", "filename": "p1070838020.jpg", "description": "", "categories": [ "travel", "vehicles" ], "slug": "speed-boat-isle-of-wight" }, { "name": "Sunset Over Sea - Malta", "filename": "p1003210005.jpg", "description": "", "categories": [ "travel" ], "slug": "sunset-over-sea-malta" }, { "name": "Sunrise Over Beach - Zante", "filename": "p1070255017.jpg", "description": "", "categories": [ "travel" ], "slug": "sunrise-over-beach-zante" }, { "name": "Sunflower with orange background", "filename": "p1060726016.jpg", "description": "", "categories": [ "flowers-and-plants" ], "slug": "sunflower-with-orange-background" }, { "name": "Sunset Over Trees", "filename": "p1060259015.jpg", "description": "", "categories": [ "other" ], "slug": "sunset-over-trees" }, { "name": "Two Flamingos - Whipsnade Zoo", "filename": "p1010851007.jpg", "description": "", "categories": [ "animals-and-insects" ], "slug": "two-flamingos-whipsnade-zoo" }, { "name": "Two Little Ducks - Whipsnade Zoo", "filename": "p1010900009.jpg", "description": "", "categories": [ "animals-and-insects" ], "slug": "two-little-ducks-whipsnade-zoo" }, { "name": "Two Swans - Whipsnade Zoo", "filename": "p1010833.jpg", "description": "", "categories": [ "animals-and-insects" ], "slug": "two-swans-whipsnade-zoo" }, { "name": "World Flags - Memorial de Caen", "filename": "p1050346014.jpg", "description": "", "categories": [ "other", "travel" ], "slug": "world-flags-memorial-de-caen" }, { "name": "Yacht At Sea - Zante", "filename": "p1070282019.jpg", "description": "", "categories": [ "travel", "vehicles" ], "slug": "yacht-at-sea-zante" }, { "name": "Yacht in Haze - Cherbourg", "filename": "p1050153013.jpg", "description": "", "categories": [ "travel", "vehicles" ], "slug": "yacht-in-haze-cherbourg" }, { "name": "Yellow Calendula", "filename": "p1080186021.jpg", "description": "", "categories": [ "flowers-and-plants" ], "slug": "yellow-calendula" }, { "name": "Orange Coneflower in a Field - Eden Project", "filename": "p1080485033.jpg", "description": "", "categories": [ "flowers-and-plants" ], "slug": "orange-coneflower-in-a-field-eden-project" } ] }