Code Monkey home page Code Monkey logo

doofi's Introduction

thedoofi.com

My brother-in-law is in a band. They're really good. I designed, developed, and deployed a website for them in 2019, and still maintain it from time to time.

doofi's People

Contributors

bowernite avatar

Stargazers

Benjamin Keating avatar

Watchers

James Cloos avatar

doofi's Issues

Get messaging link from Rick

I think you might need to be an admin for the page to get a direct link to message a page.

If we wanted to add a direct link for someone to start messaging them on their Facebook page, we'll need to get that link from Rick.

Add overlay for video captions

Attempted this, and ran into the following problems:

  • The overlay covers the controls. Looks weird, and prevents user from clicking controls
  • If you give space at the bottom for the controls, it looks weird and you have to worry about cross-browser compatibility (for controls height)

We could just modify the poster image for each video to include the text. But this isn't trivial (at least for me), since it involves some image editing I'm not comfortable with, and I'd have to figure out how to download and use the Fjalla One font for it.

WIP is up at origin/WIP__video-overlay

Implement feedback from Ben

  • Background-repeat fix
  • Contact buttons implemented under logo on hero
    • Link directly to events page on facebook? Separate button for this?
  • More color on desktop hero
  • Try out blue/purple for website theme color
  • Try out full-bleed photo among collage
  • One video at a time, with a list of song titles to the left that they can choose from
  • Maybe use a TV to surround the currently playing video

Simplify favicon

The favicon isn't super clear.

Maybe something more icon-y/simplified. Or put a shape around Doofi or something.

Store videos somewhere else (?)

Would a CDN be more performant?

Got this warning from GitHub:

remote: Resolving deltas: 100% (15/15), completed with 2 local objects.
remote: warning: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com.
remote: warning: See http://git.io/iEPt8g for more information.
remote: warning: File assets/live-performances/psycho-killer.mp4 is 62.59 MB; this is larger than GitHub's recommended maximum file size of 50.00 MB
remote: warning: File assets/live-performances/twist-and-shout.mp4 is 67.89 MB; this is larger than GitHub's recommended maximum file size of 50.00 MB

Convert video files into audio files (?)

The wedding videos are kind of rough at times. It might be OK if I can showcase just one video that shows more of them.

  • Convert videos into audio
  • Maybe have a button that plays them in the background while scrolling the site?
    • Not sure if this works on mobile -- might have to be full screen while you're playing an audio file

Minimize video downloads on mobile

Somehow improve bandwidth consumption on mobile. Minimizing the image and video width will obviously help.

Maybe don't preload videos? I think that does happen automatically.

Edit: It looks like iOS by default will only preload the first video? Pretty good if so.

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.