Code Monkey home page Code Monkey logo

canvas-image-map's Introduction

Hi there πŸ‘‹

I'm a Web/Software developer and game creator located in Jacksonville, Florida(The sunshine state 😎)

πŸ‘¨πŸΎβ€πŸ’» Web Dev: ( Vue | Vite | React | NextJS | Wordpress | FaustJS | NodeJS | Django | Python | Heroku | MySQL | TypeORM | AWS S3 | TypeScript | JavaScript | HTML | CSS | Git | Git CLI )

πŸ’» Software Dev: ( Python | Selenium | Chrome Driver )

πŸ‘Ύ Game Dev: ( Unity3D | Unity Ads | C# | JavaScript | C++)

  • πŸ”­ I’m currently working on building my portfolio
  • 🌱 I’m currently learning Full Stack development and UI design
  • πŸ€“ I’m looking to collaborate on any website, software, or game.
  • πŸ“« How to reach me: [email protected]

GitHub Streak

Recent Projects

Turn

Turn is a 2D casual game that involves progressively difficult levels and a unique gameplay mechanic

menu level7 victory

Technologies: Unity3D, Unity Ads, C#, JavaScript, Photoshop

Learn more

The Cliffs

From figma to fully functional frontend application. The Cliffs was the first website I worked on in a professional setting.

image

NOTE: Can't show the full site for privacy reasons.

Open Website

The Carriage House

From pdf design to a fully functional frontend application. The Carriage House is another one of the websites I enjoyed working on.

image

NOTE: Can't show the full site for privacy reasons.

Open Website

Union League at Philadelphia

I built the frontend for the #1 City Club in the Country

image

Open Website

Instagram Bot

This software allows a user to automatically like and follow other Instagram users that post under certain hashtags. For example, I could specify that I want to engage with people who like the hashtag #anime. The bot will then open up that hashtag and retrieve the most recent post. Then the bot will like/follow each post and user of the post respectively.

Technologies: Python, Selenium, Chrome Driver

Learn more

ImageMap

A simple image map component, which takes coordinates and maps interact-able areas to an image. Not to be confused with an html map element, this method allows for styling of interact-able areas as opposed to using an area map

example.mp4

Technologies: Typescript, Vite

Learn more

Msort.js

Style your image gallery in a beautiful mosaic format with one line of code(Not Ratio Algorithm)

Technologies: JavaScript, Git, Git CLI

Learn more

TypeOut.js

Add stylization and dynamic appeal to text on your webpage. TypeOut.js will type out any specified text at an inputted speed.

Technologies: JavaScript, Django, Python, Heroku, Heroku CLI, Git, Git CLI, Html + Css

TypeOut.js GitHub repo

TypeOut.js website

Online Portfolio

This is my online portfolio that I have hosted on heroku and also GitHub pages(with functional contact form) I initially deployed my website onto heroku, but later decided that the dependencies combined with handling Heroku's limitations was not necessary for a simple portfolio site. So I also deployed on GitHub pages.

Technologies: JavaScript, NodeJS, Express, Compress, Heroku, Heroku CLI, Git, Git CLI, Html + Css, Google Forms

Visit Site(Built with vite and uses vue-router)

Visit Old Site(Using Basic Html and CSS)

Current Projects

Black Bricks(Design)

An online coffee brand that personalizes coffee and makes it appealing to the individual rather than the generic masses. This personalization serves to make buying coffee an engaging experience for every user.

Technologies: Clip Studio Paint(Photoshop Alternative)

canvas-image-map's People

Contributors

makanamakesstuff avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

canvas-image-map's Issues

Add Poly Points

Currently the image map component doesn’t map poly point, just rects. Need to allow for poly coordinates

how to use href referenced in imageMaps.ts

Hi, i dived in your code but hasn't been able yet to determine how to use the hrefs referenced in the imageMaps.ts file, can you point me in the right direction ? thanks

Introduce Map Generator

I want to create a simple form that allows me to upload an image, define rect and or poly coordinates on the image(canvas overlay), then return these coordinates in JSON format. This will allow me to easily hardcode and or store this data in a database.

Create CSS Classes for Cursor

When the user hovers over interact-able areas, the cursor will have a custom class applied, which will dictate the cursor style. By default it will be β€œpointer”, but will add other classes for cursor appearance on hover events.

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.