Giter VIP home page Giter VIP logo

jeremymorrison.ca-new's Introduction

jeremymorrison.ca

Inspiration

Colour Schemes

Colour gradient on this logo: btp Would pair well with white background and grey accents.

The background and "code" style font from this site: fairlay

Fonts

I like the idea of doing a code-style monospaced font firacode

Landing page text can be animated like so: text-animated

Websites

This guy's landing page, particularly how the image / text / nav bar are animated.

Simple example of scrolling single page website. My nav bar elements modelled off his as well.

Big Picture

  • single page website with scroll, so that when you click an element on the nav bar it just scrolls down (second website above scroll example)
  • the idea is that it is basically an animated, extended resume, with similar sections to my resume
  • thinking either white background with accents like colour schemes above, or something more creative like fairlay.com, where the background stays static and content scrolls on top of it, like what I did with deaf-fire-art.ca
  • nav bar on top instead of side like my current website
  • each project will have a description similar to current website's individual project descriptions (styling sucks)
    • maybe there is a better way to do this

navbar elements:

Not sure what to do about the project page. Each project description could be part of scroll, or it can be its own 'sub-page' like my current website.

Complex background will require simple features. Undecided on which to choose.

Issues

Simple background vs complex background

If I use a single colour as a background, I can have more interesting features like gradient buttons: g button g button

Portrait

How to include my picture on the landing page without it looking corny?

Short page sections

How to handle short page sections - see current website's stupid sections that are just icons.

Overlays on image / CSS art background

See current website's project page here

This looks horrible, but what's the solution to overlaying a video / text / more images on top of a complex background without resorting to something really ugly like this white box? If I use a white background, it's easy to just fill in text wherever I need it.

How to demonstrate my projects

Currently I have a description + video (see current website project descriptions) but I kind of hate it. Is there some other way? Just linking to the website doesn't tell the whole story.

Mixing fonts

Display font vs content fonts?

jeremymorrison.ca-new's People

Contributors

jemorriso 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.