Alex Hort-Francis hortfrancis

Alex Hort-Francis

👋

I write articles to help people use new technologies: medium.com/@hortfrancis

I love experimenting with CSS in the browser: codepen.io/hortfrancis

🎓 I am currently studying User Experience Design at Norwich University of the Arts in my spare time.
🖥 I studied Web Development on a bootcamp with HyperionDev (grade: 99%).
🔒 I studied Cyber Security at a postgraduate level at the University of East Anglia.
🎮 I studied Games Art & Design for my undergraduate degree at Norwich University of the Arts

Laravel Reflection
- Full-stack 'company management app' built in Laravel (PHP) that applies CRUD operations and RESTful actions on companies and employees, stored in a MySQL database. Blade components with Tailwind CSS render the user interface.
Netmatters Homepage
- While training full-time with the IT company Netmatters, I built a replica of their homepage from scratch over a couple of months, adding responsive styling, interactivity with JavaScript, and server-side functionality (serving data from a database and processing contact form submissions) with PHP.
Array Reflection
- Vanilla JavaScript project that fetches an image from an API, and allows a user to assign it to an email address, with front-end validation and custom 'neomorphic' interactivity styling.
Cash Balance Manipulator
- A web user interface for manipulating a cash balance, built in React, with Redux for state management. Along with adding or subtracting an amount to the balance, the user can add interest at a fixed rate of 5% or apply a charge to the balance at a fixed rate of 15%.
To Do App
- Front-end application using React, with Redux for state management. Users can add, edit, and delete tasks, and can mark tasks as 'done'.

useState demo
- This project demonstrates my knowledge of useState with function components in React. In App.js are two additional components: a counter and a 'controlled input'. (Hosted on CodeSandbox)
useEffect demo
- Count the pineapples! This simple game demonstrates how to trigger side effects in a function component's logic when a stateful variable is updated, with the useEffect hook. In App.js is another component, <Pineapples />, that contains the game's logic. (Hosted on CodeSandbox)
React Routing demo
- A demonstration of how to implement client-side routing in React. Navigate between the pages and watch the URL in the address bar change. (Hosted on CodeSandbox)
useContext demo
- This project use React's Context API to avoid awkward 'prop drilling' through multiple components. Press the button to switch the page from light mode to dark mode! All the significant code is in App.js -- with styling (using CSS variables) in styles.css (Hosted on CodeSandbox)

I specialise in using:

ChatGPT-4 for text content generation, problem solving, and to support my learning.
Midjourney to generate high-quality images very quickly.
ElevenLabs to create AI-generated text-to-speech audio.

'Hollow functions'
- A proposed functional programming technique to integrate 'on the spot' reasoning from language models in a predictable, programmatic way.
FileStruc Notation
- A standardised syntax for describing file structures within digital projects, to support closer collaboration with large language models (LLMs).