Coder Social home page Coder Social logo

heinerbehrends / giphy-concentration-next Goto Github PK

View Code? Open in Web Editor NEW
0.0 0.0 0.0 133 KB

A concentration/memory game that uses animated gifs fetched by searching the Giphy API. Build with Nextjs.

Home Page: https://giphy-concentration-next.vercel.app

TypeScript 88.65% CSS 11.35%
concentration concentration-game giphy giphy-api memory react vercel

giphy-concentration-next's Introduction

Heiner S. Behrends

I'm a web developer and designer with a background in stage design. It comes naturally to me to care about user experience and so I specialize in front-end development. My main expertise is with building web apps with React and ecosystem that surrounds it.

💻 After a great start at Embrace - the Human Cloud ☁️ I'm currently working at Mediahuis Noord 📰 as a front-end developer, building the app and the new website with React and TypeScript. Before I worked as my own boss at flyfi web development. flyfi specialized in building performant progressive web apps ⚡.

About me

  • ‍👨‍👩‍👧‍👦 Husband and father of two
  • 🧑‍💻🚀 Self-taught developer
  • ✏️ Designer with experience in stage design, graphic design and web design
  • 🧩 Experience with:
    • React
    • React Native
    • TypeScript
    • Unit test with Jest and react-testing-library and mock service worker
    • Integration and end-to-end testing with Cypress
    • serverless backend and database services
    • basic backend skills
    • writing code that's well structured and easy to understand
    • designing beautiful websites
  • ⚽🚲🧘‍♂️ Sports lover
  • 🎸🪕🎹🎶🎛 Versatile musician
  • 🎨🎭 Creative mind
  • 🔪🍴🥘 Cook and food lover
  • 📫 How to reach me: [email protected]

My programming tools


HTML     CSS     JavaScript     TypeScript    React    xstate    Node.js     Tailwind logo     VS Code     Figma     Git    Google Chrome     Nextjs logo     GraphQL     Jest     Testing library

My personal projects

On my journey to become a developer I learned a lot by building personal projects, that challenged different kinds of skills and helped me to learn different technologies like react, css-in-js, testing, redux, gatsby and nextjs, immutable data structures and serverless functions. Here are some of the more recent examples.

🦠 Simulating Virus Dynamics

An implementation of the problem set 12 of the MIT course 6.00 Introduction to computer science and programming using the Nextjs framework to combine nodejs server code and react client code. It is build using typescript and relies on functional programming priciples like closures for information hiding, pure functions and immutable data structures. This approach leads to a more maintable code base and less mental overload, compared to an object oriented approach that uses shared mutable state. Uses the ramda library for its map and mapAccum functions, recharts for data visualisation, react-query to manage server state and the nextjs framework. Check out the interactive simulation on Vercel: https://virus-simulation-next.vercel.app/

🔠 Pizzazz - An online multiplayer micro-scrabble game

Pizzazz is to scrabble what a blog post is to a tweet. Pizzazz consists of a react frontend that uses Redux and Redux-Saga for async state management and a nodejs backend. Web sockets are used for fast bi-directional communication between the server and the client. Check out the railway app.

🎸 We're The Buzz - website

Design and implementation of a website for my New Wave band The Buzz. Featuring a videowall that adapts its height to the screen size, a custom hook parallax effect using requestAnimationFrame and a special audio player. Uses a Hasura database and Netlify functions to save the heart count of each song. Build with Gatsby and TypeScript. Check it out on Netlify: https://werethebuzz.netlify.app/

🧠 Giphy concentration/memory

Giphy concentration is an online version of the children's game concentration, known as Memory in Europe. It uses a search box and the Giphy API to fetch animated gifs. Build with TypeScript and Remix it uses serverless functions and environment variables to hide the Giphy API Key. Check it out on Vercel: https://remix-vercel-test-b84xhuwpu-heinerbehrends.vercel.app/

🌱 Game of Life React

An implementation of Conwell's Game of Life for the react library. It features the possibility to seed many different patterns like methusalems, oscillators and space ships, controls for the speed and a start/stop button. Check it out on Netlify: https://game-of-life-immer.netlify.app/ Game of Life is build using Redux for state management and the immer library for immutable data structures. The size of the game automatically adapts to the size of the screen.

giphy-concentration-next's People

Contributors

heinerbehrends avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.