Alex Hort-Francis

🌐 Home page: hortfrancis.com

👋

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

I am a strong self-directed learner: teamtreehouse.com/profiles/hortfrancis

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

Technologies

Education

• 🎓 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

Full Projects

• 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'.

React demo projects

• 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)

Generative AI

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.

Methodology explorations

• '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).

Helpful educational resources

• Lemon Poem Generator tutorial
• Vim Cheatsheet for Git Merges
• Code snippets from SCS guided learning code-along on the OpenAI API in Node

Links

• hortfrancis.com
• linkedin.com/in/hortfrancis
• codepen.io/hortfrancis
• instagram.com/hortfrancis
• teamtreehouse.com/profiles/hortfrancis