Welcome to my website 😊 I created it to address some problems I had been having:
- Aside from GitHub, I did not have a portfolio to show my skills, notable projects, or ways to contact me
- I didn't have anywhere to deploy, access, and test out different ideas or projects in a centralised manner
- My online presence as a developer was nonexistent 

This was also a good opportunity for me to reinforce concepts of web design and development and learn new things. Of course, it's easy enough to use a service such as Squarespace to create a website or simply use GitHub as a portfolio, but I wanted to stay away from 'cookie-cutter' approaches as they did not feel as personal. 

I wanted this website to be clean, minimal and straight to the point: people who visit usually want to know what I've done and what I'm able to do as a developer without any superfluous information. For these reasons, I opted for a single scrolling page with just the information relevant to my portfolio. I decided to give every project its own page where I could discuss them in further detail for anyone interested to know more. 

I could have also achieved this site with a primitive stack, but I decided to overcomplicate it for the sake of learning and some future-proofing: keep reading to find out exactly how I went about making this website, including some of the problems I had and what I did to overcome them!

# Strapi
I wanted to be able to upload, edit and delete projects without touching any code - so I decoupled the backend and frontend by using a headless CMS. I opted for [Strapi](https://strapi.io/) because it had some good documentation and was completely open-source, meaning there was plenty of community support and most importantly: it's free! Strapi allows me to upload, edit and delete projects through an online panel which is very similar to WordPress. This way, I'm able to add new projects in the future and delete them from practically any device with an internet connection and a browser. It serves this data through REST API endpoints, which are fetched by the frontend to populate the site with data. 

One important thing to note is that using the default media library can cause problems where it is wiped on every deployment. To deal with this I changed the default media uploader to [Cloudinary](https://cloudinary.com/). Integrating it into the Strapi admin panel was as easy as installing [strapi-provider-upload-cloudinary](https://www.npmjs.com/package/strapi-provider-upload-cloudinary), writing the config, and adding in my environment variables. No further problems after this! 

Using Strapi in the development phase was extremely easy, with hardly any issues setting it up. It's probably because my use case for this project was very simple, and so not much configuration was needed - just a simple project Content-Type with the relevant fields for data.
 
# Next.js
This was an easy choice for the frontend. [Next.js](https://nextjs.org/) is a React framework that allows for static site generation and comes bundled with extra features like routing and image optimisation. React is becoming my comfort zone as time goes on, and it only felt right to use it for the frontend of my portfolio site. [Data fetching](https://nextjs.org/docs/basic-features/data-fetching) is also made very simple using functions like ``GetStaticProps``, which in conjunction with dynamic routing made having unique pages for projects very simple. As the site is statically generated, it is built upon deployment into HTML which makes for an extremely smooth SEO experience as well as being incredibly fast.

Other than that, everything else could have been achieved in any other framework just as easily. Everything lives in its own component or set of components - such as multiple ``ProjectCard`` components in a ``ProjectGrid``, or ``Icon`` components in a ``Nav``. 

One problem I encountered was styling not loading immediately. Instead, unstyled text would be rendered first before firing off transitions to what the text should actually look like. This can be seen in the gif below (turn your brightness up):

![portfolio8.gif](https://res.cloudinary.com/dc8pijmqw/image/upload/v1628751620/portfolio8_732d0290db.gif)

This turned out to be a bug with Chrome itself, and after finding an odd but working [solution](https://stackoverflow.com/questions/14389566/stop-css-transition-from-firing-on-page-load/42969608#42969608) on Stack Overflow, I was able to implement it into a ``_document.js`` file like so:

```js
import Document, { Html, Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <meta charSet="utf-8" />
        </Head>
        <body>
          <Main />
          <NextScript />
          <script> </script>
        </body>
      </Html>
    );
  }
}
```
Everything worked fine after that thankfully!

# Tailwind 
For the styling, I decided to try out using [Tailwind CSS](https://tailwindcss.com/). Normally, I would opt for something like [styled-components](https://styled-components.com/) for a project of this size, but I decided to give it a try after seeing some people praise how fast and easy it was. I know what you're thinking - "Styling inline HTML is ugly and unmaintainable", and you're partly right. It's pretty ugly, but once a system of ordering ``ClassName`` values is set along with extending the original config, it became pretty maintainable (providing everything is sensibly compartmentalised into respective components). I was naive at first, so it ended up being pretty messy - but after some refactoring, I ended up with a solid system to layout my styles. It's also worth noting that Tailwind has some of the best documentation I've encountered for a long while. I'm not sure if going back to vanilla-style CSS will ever be the same. 😅

# Deployment
For the backend, I hosted Strapi on [Heroku](https://www.heroku.com/) using the free hobby plan along with [PostgreSQL](https://www.postgresql.org/) to store the data. I ran into quite a few errors with deployment here, due to Heroku outputting some weird errors about SSL but these were fixed quickly, as it seemed to be a common problem! However, compared to other CMS options like Forestry, there was definitely a lack of easy deployment options. 

With the frontend, I deployed my Next.js project on [Vercel](https://vercel.com/). This was probably the quickest deployment process I've encountered so far - mainly because the framework is created by Vercel, and it's clear they've optimised the deployment platform for it. 

Both parts of the site have automatic deployment based on GitHub repositories, meaning that whenever I push changes to ``main`` they immediately begin to rebuild and deploy. On top of that, I used a webhook between Strapi and Vercel which triggers my frontend to be rebuilt every time there is a change in my CMS. 

***

Overall, this was a pretty fun project to get back into web development with! I still have a lot to learn, but I'm excited to move further into some interesting projects.

Read about the motivation behind this site, how I created it, the difficulties I faced and the things I learnt from it.

large_DSC01876-Edit.png

medium_DSC01876-Edit.png

small_DSC01876-Edit.png

thumbnail_DSC01876-Edit.png

DSC01876-Edit.png

This Website

[Take a look at whichanimenext? here](https://whichanimenext-fe.vercel.app/)


Building *whichanimenext?* provided me with some practical experience creating and processing datasets before using models on them to be served as APIs.

The tool returns 5 similar Anime based on a title inputted by the user. It provides similarity match ratings which have been generated from a sample of [MyAnimeList](https://myanimelist.net/) user ratings.

The backend is an API written in Python, which serves a frontend written in React.

# How the recommendations work

The recommendations work through a Cosine Similarity model which is generated from MyAnimeList user ratings based on Anime titles. It's a somewhat primitive way of generating similarity, because it does not take factors such as genre or other users' taste (alike to user-user recommendation) into account.

The quality of recommendations is not particularly high (for example, try searching for 'One Piece' - a popular series that yields low similarity results), especially for smaller titles as there is less data available for them. Another problem would be that an inputted Anime might return later seasons of the same Anime, which is not particularly helpful to a user.

# The datasets

This project uses two datasets: the match ratings as generated by the Cosine Similarity model, and another dataset which holds other information on Anime such as the title, years aired and thumbnail URL (for use on the frontend).

The original data has been taken from [these datasets](https://www.kaggle.com/hernan4444/anime-recommendation-database-2020), which holds information scraped from MyAnimeList.

There was a lot of data which wasn't relevant to the project, so after some processing I was able to reduce the size of the datasets considerably. I was also able to remove some incomplete entries which would be problematic in future if not addressed.

After this was done, I created a pivot table with Anime titles and the scores that users had rated them. From here I created a sparse matrix of the pivot table for easier computation, and then used the Cosine Similarity model from the [scikit-learn library](https://scikit-learn.org/stable/). The similarity percentages can now be shown as the values in this dataset multiplied by `100`.

For the extra Anime information dataset, I wrote a small Python script which fetched data on all available anime from the [Jikan API](https://jikan.docs.apiary.io/). This was then put into a dataframe and exported to a `.csv` file. If you want to do this yourself, please read through all the rules of using the API so that you do not get banned due to improper use.  

If you want to see in more detail how I processed and generated the ratings for the recommendation dataset, take a look at [this](https://github.com/JonLinkens/whichanimenext-api/blob/main/notebooks/building_recommendation_dataset.ipynb) notebook.

# FastAPI

To serve the data for each set of recommendations, all I needed was a simple backend that served JSON objects at various endpoints. For this use case, [FastAPI](https://fastapi.tiangolo.com/) was a perfect and lightweight choice. It took a matter of minutes to setup and serve everything to the endpoints I needed.

Having said this, there are probably security issues that I have overlooked - but for a simple project like this I did not deem it necessary to spend too much time thinking about these things (especially with no database or need for authorisation).


# Frontend

Consuming the API did not really call for a framework to be used, but I went with React because I'm always looking for opportunities to practice development with it. For styling, I went with Tailwind CSS because of it's fast styling and as this is not a project I plan to maintain for a long period of time.

For the search bar, I used the [react-select](https://react-select.com/home) library, which fetches Anime titles from the API. This way, I don't need to worry too much about input validation or handling them. As there are so many titles to search from, the performance can be slow at times. However, I did implement a custom filter option for slightly better performance (unfortunately not fuzzy search):

```jsx
const customFilterOption = (option, rawInput) => {
  const words = rawInput.split(" ");
  return words.reduce(
    (acc, cur) => acc && option.label.toLowerCase().includes(cur.toLowerCase()),
    true
  );
};
```

Credit for the filter above goes to [this GitHub issue](https://github.com/JedWatson/react-select/issues/3067).

Otherwise, I used [Zustand](https://github.com/pmndrs/zustand) for some lightweight state management. If you're tired of Redux or similar, I would recommend trying it.

I'd love to rewrite the frontend in TypeScript if I find time, but for now I have used JavaScript.

# Deployment

I used Heroku to deploy the FastAPI backend. I'm on the free hobby tier, which means that projects go to sleep after 30 minutes to save resources. As the API is needed to be functioning for the frontend to work, I counteracted this sleep behaviour by creating a [CRON job](https://cron-job.org/en/) to ping the backend at a specific endpoint every 30 minutes.

For the frontend, I deployed on [Vercel](https://vercel.com/) like normal, with no issues encountered.

---

Overall, this was a good project for me to practice handling data and creating a simple API to be consumed by a frontend. Whilst the recommendations are not perfect, the project turned out to be quite well rounded in gaining more experience in all aspects of developing an online tool.

In future, I'd like to reconsider the approach for creating recommendations, and also remove different seasons of an Anime (to avoid the problem explained earlier). I'd also like to eventually rewrite the frontend in TypeScript.

# GitHub Repositories

Below are the GitHub repositories for this project:

- [Frontend](https://github.com/JonLinkens/whichanimenext-fe)
- [Backend and Data](https://github.com/JonLinkens/whichanimenext-api)


A tool for generating similar Anime recommendations based on an inputted title.

large_whichanimenext-fe.vercel.app_.png

medium_whichanimenext-fe.vercel.app_.png

small_whichanimenext-fe.vercel.app_.png

thumbnail_whichanimenext-fe.vercel.app_.png

whichanimenext-fe.vercel.app_.png

whichanimenext?

 [Take a look at thoughts here.](https://thoughts.jonlinkens.com/)

Thoughts came from wanting a centralised space to be able to store small posts on things I had been thinking about and anything else I had been exploring — mainly to do with writing code, but I decided to leave it open-ended in case I wanted to talk about another hobby like photography or design.

This was a fairly straightforward project, and it's very lightweight thanks to the efficiency of the Next.js framework and how well it can work with Markdown files. 

# Next.js with MDX
Each post is stored in an ``.mdx`` file:  a Markdown file that allows JSX to be written inside. This allows me to import and use React components from within Markdown, in the event that I want to add something like a custom button. I'm not currently using any JSX in them but I thought it would be good to implement now so I can take advantage of it in the future if I decide to.

These Markdown files are used in conjunction with Next.js' dynamic routing. Using ``getStaticProps``, I can access the files as objects of data:
```jsx
export function getStaticProps() {
  const apps = getApps();
  return { props: { apps } };
}

export function getApps() {
  const appsPath = join(process.cwd(), "content");

  const appFilePaths = fs
    .readdirSync(appsPath)
    .filter((path) => /\.mdx?$/.test(path));

  return appFilePaths.map((filePath) => {
    const source = fs.readFileSync(join(appsPath, filePath));
    const { content, data } = matter(source);

    return {
      content,
      data,
      filePath,
    };
  });
}
```
# gray-matter
As shown above, I used [gray-matter](https://www.npmjs.com/package/gray-matter) to add metadata functionality to the Markdown. This can be added at the beginning of a ``.mdx`` file like so:

```markdown
---
title: Hello
description: Hello World!
---
```
With gray-matter, these fields can be accessed like an object using ```app.data.title`` and ``app.data.description``, which are used to populate the components.

# react-markdown
To convert the markdown to HTML elements, I used [react-markdown](https://github.com/remarkjs/react-markdown). The implementation was as simple as surrounding my content in a ``ReactMarkdown`` element tag (with some custom props) like so:
```js
<ReactMarkdown remarkPlugins={[gfm]} components={CodeBlock}>
   {app.content}
</ReactMarkdown>
```

# Tailwind
Like most of my recent projects, I used [Tailwind](https://tailwindcss.com/) for styling. In particular, I used [Tailwind Typography](https://github.com/tailwindlabs/tailwindcss-typography) to style the posts to make things easier, because for a small project it didn't make much sense to spend a lot of time deciding on spacing and font sizing when I could use this instead. 
However, I'm not a fan of the way Tailwind Typography styles code blocks - they don't have highlighting and it's a little ugly outside of dark mode. For this, I used [react-syntax-highlighter](https://www.npmjs.com/package/react-syntax-highlighter) so that I could write my own ``CodeBlock`` component, using [prism.js](https://prismjs.com/) themes.

 ***

With thoughts I wanted something minimal and simple, without spending too much time building it. I used it as a nice break away from other projects and work I've been doing, and it felt pretty rewarding despite not being all that challenging! 

If you're interested in looking through the code, you can check out the [Github repository](https://github.com/JonLinkens/thoughts).

An MDX microblog where I post my thoughts on software, hobbies and everything in between.

large_localhost_3000_ (1).png

medium_localhost_3000_ (1).png

small_localhost_3000_ (1).png

thumbnail_localhost_3000_ (1).png

localhost_3000_ (1).png

thoughts

Some submissions were a collaborative effort with peers, whilst most implement my own solutions. They aren't always the most efficient or optimised, but they get the job done. 

All solutions written in Python, with the dataset provided stored in the text files. 

[Click here to find my solutions for the 2020 edition of Advent of Code on GitHub!](https://github.com/JonLinkens/advent-of-code-2020) 

My solutions for the 2020 edition of Advent of Code, written in Python.

large_adventofcode2020.png

medium_adventofcode2020.png

small_adventofcode2020.png

thumbnail_adventofcode2020.png

adventofcode2020.png

Advent of Code 2020

This is a Sudoku Solver I wrote, using Python. 

It implements a backtracking algorithm, which you can consider to be a 'refined' way of brute-forcing. It emulates how a human might decide to solve it, except in much quicker time.

The sudokus are stored in ``.sudoku`` filetypes, which are essentially text files with a fancier extension name: stored as a 9x9 grid of numbers (9 lines of 9 characters).

The speed of the visualisation can be adjusted by changing the value of the ``SPEED`` variable. For the example above, a value of 100 was used - meaning 100 milliseconds between each action.

[Click here to visit the GitHub Repository.](https://github.com/JonLinkens/sudokusolver)

A sudoku solver using a backtracking algorithm, with visualisation. 