Giter VIP home page Giter VIP logo

personalsite's Introduction

My Personal Webpage

With simulated typing

The site is built with the React framework for ease in modularity and quick updating. The simulated typing component I built works by being given 3 pieces of information:

  • Stub: The text to be displayed immediately upon loading
  • Writing: The text that will be written out per the markup language (more below)
  • LineNum (optional): Due to the possibility of wanting to have several components within a single page writing at once, this will sync the line numbers up

The markup was done to allow for html tags/component classes to be applied instantly (such as in the case of quoted text) or retroactively upon completion (keyword 'function' or 'var' etc), to simulate writing code within Sublime text editor. The escape character is "~" and precedes and terminates all markup commands:

  • Pause [character: p]: followed by the amount of time to sit (in ms), used to simulate the fact that humans don't just crank out characters constantly.
  • Delete [character: d]: followed by the number of prior characters to delete, simulating typos and lending a sense of humor/realism to the affair.
  • Class [characters: c & C]: followed by the desired class to add (may use multiple classes by leaving a space between them). Lowercase creates a new span and adds the class to it immediately, uppercase C applies the class to the current span and creates a new, classless blank one for the following text.
    • Use of indent# classes are crucial to properly formatting the output.
  • Linebreak [character: l]: followed by a dummy value, I use 0, ends the current line that's being typed.
  • Quotes [character: q]: followed by a + or -, indicates that a string is being typed. Simulates the auto-complete of the double-quotes.
  • Hyperlinks [character a]: Operates independently of class (though it does override any existing formatting when applied), used to create linked text, the escape character is followed immediately by the link itself.

I've built out the features that seemed necessary to me, but feel free to request/make other additions/changes as you see fit.

Thanks for looking!

personalsite's People

Contributors

mattschiller avatar

Watchers

James Cloos 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.