Skip to content
Portfolio Website (Single and Multi-Page Design)
HTML CSS JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
at
css
fonts
img
on
script
.gitignore
404.html
CNAME
README.md
index.html

README.md

Crouther.github.io


Readers,


This repository is a reflection of my web development practices. The site is developed from scratch using personal knowledge and open resources. No major library or framework is leveraged. The site is powered by original code or fundamental HTML, CSS, or Javascript features. This is a digital portfolio of work I've done and a simple resume of my coding capabilities.



GitHub Stats (7/26/19) -

Commits Repos (Evaluated) Lines of code
415 8 43788

Custom Template Styleguides

(Divvied among multiple, customized, base templates; such as AdvantFlat, StrictlyBusiness, and FirstLanding)

HTML CSS JavaScript
~3000+ lines ~1000+ lines 850+ lines




Documentation


This is a collection of documentation and resources I used to build each iteration of my portfolio and many other web stack applications and concepts.


Markup Languages:



HTML:

Best resources for learning and practicing HTML is from major resource libraries and websites that review the fundamentals language.

Documentation:

Other Frequent References:

“10 HTML Tags You Didn’t Know You Needed” by Emma Wedekind https://link.medium.com/tE9k3M4DgVzÆ

CSS:

Best resources for learning and practicing CSS is from major resource libraries and websites that review the fundamentals language. Also listed are various guides for additional markup implementations of CSS like SCSS / SASS

Documentation:

Other Frequent References:

Flexbox & Grid-

Transformations:


Scripting Languages:


JavaScript:

Best resources for learning and practicing JavaScript is from major resource libraries and websites that review the fundamentals language.

Documentation:

Other Frequent References:

PHP:

Learning the basics of PHP and creating WordPress Themes:

Web Components

Animations:

There are various ways to implement web animations. CSS3 released a large library of native transformations, translations, and motions. Leveraging keyframes and “functions” one can animate specific tags and “ID’s”. Writing your own JavaScript animations or jQuery function can also work. SVG is an image format with support for animating its graphics. Review documentation below to get the gist of what’s available.

Documentation:

Other Frequent References:

Concepts:

Growing Roots- "Box with image, image border radius fluctuates, based on time like branches of a tree or roots growing and shrinking"

Launch Animation- An object is selected form the header, the object drops like a diamond/raindrop, hits the bottom of the screen, bounces back up and opens the web page.

The trick to fluid animations is the predication of motion on the display and hyperbolizing the motion to make the gesture more eccentric

Inspiration:

I like how they did these mild motion graphics-
https://discordapp.com/invite/apple

Resources:

Icon Packs:

https://icons8.com/
https://www.flaticon.com/
https://www.flaticon.com/packs/web-seo-3
https://www.flaticon.com/packs/development-47
https://www.flaticon.com/packs/design-thinking

Marketplaces:

WordPress- https://www.linkedin.com/pulse/8-marketplaces-where-you-can-sell-wordpress-plugins-themes-samdani

Inspirational Code Samples:
Mock-ups-
https://dribbble.com/shots/6157473-C4D-Essential-Training-Part-2?utm_campaign=2019-03-18&utm_medium=email&utm_source=replay

https://cdn.dribbble.com/users/1145170/videos/17425/holo_design_system_website_1.mp4

Resources and Design Tools: https://icons8.com/
Landing Pages- Dribbble
Landing Pages- Behance
Web Apps- CoDrops
Design Company- Heckhouse
Animations- https://codemyui.com/
Responsive Company- http://tiguandesign.com/
Web Designers- https://www.reddit.com/r/web_design/comments/3m74v4/looking_for_inspiration_sites_like_codrops_and/?st=jeinryqb&sh=3482c88d
Designers Trends- https://medium.muz.li/dribbble-trend-mondrianizm-c19f3fafa5e9
Design Collection- https://designmodo.com/free-tools-web-developers/

Stock Images / Photography:

Images:

https://unsplash.com/public-domain-images

https://www.flickr.com/photos/biodivlibrary

Technology Photographs:

https://lh3.googleusercontent.com/5gQoY9GL9dHa_Pakl6WQYyWkTeD0jISLdhaqbSBmtdfGJKaTrgsGaGWK1WWuNjbpuqUPWf6yrt74asgXgDlPrkbLDzzQg1d3AIavqjRpxhhbpWq-EQ3mv1GI5nrjEaoTqf853R_j6UBz-twGKN4cv8dtKCxbwOJEd0-ZFkis7qRcbYZYBxuTDVFcPRQNVFfdDjEr6olfzLP8URFpRj9DoCgD-cEQQeudnUWhObfHlvt2Ls_SA0jcwMHHlSb5L44ExPvEv6RYUDYpN9YZZ2DNhmKYnzxg9MzNEopNpMkaAe0Ard0qEUzNho9lsjzPVY7xFTKX-b2bwBDl5XKFCSWvxbhP8KflKEYnFt2ESws3mLpdMlmCeeo37cIF4a1-3dFcS4f3A_80jVznSdM9OwzGCzeE5bh7Mn07TAQ-LAymdIJEegvtd-TpMvWDtzAfmAHxqWH6AFPuHUaQ-Y3G0d2eF_UiguVIyhJJzp1iaxvJDDbVpEGGvv54nfEw2hV3jo6M0-BZ6XeG5ov5Ybot7UgR_v6Tm99fQK6Us8ryOXn_UI6RJnDAvuX6-474yT-LfTDELyVYE-YCU3cNpV8SASG6azCbWVx1pjag3xGHnApdPHs=w2600-h1952-no

https://lh3.googleusercontent.com/rLD-BJRLy0LTroZ9q5ZvEqgAVv46TwY93WCO6leAM_TfirthxpqkutTr8e4f4MnVWabW7BjMuRLJt-QVLl1s5pgjvxzRvXRH7hWxGprYayeRXbUBrCOIG0YYuncWoJgzRZbRXy4Qq4zjjvADXvrP_WmjMMjI42JN69ZSPu0eaY4X7Wlmm1aPt8fEvhjHiHPPIBoMAVaCO3NVh3ZANti9BPLWVwSVSgnZHgzO3BjWYFsOQp9WB8loG4A73Uhtbp0kedESnDZAXzJdrmCjTSwfNBH9fm1lfudwWUPINmzhz32NlHul5mnA5HMiFDpiTBz6bajpDLZLUICG7_gkreTWmu6agHl_I9Sm14VNjT-v3eIUsWxPWOeYyUPuEoeFGYwO994zdEcfaJml9ImKGSApAr0wwvFfBRmRm9T2yrwZmeVLTKfHsxgH6hDmKfmmU0-b8eiyMSeZ-YqQL0yRp3zL1Bjl68WN9c88J88fzO6dzmkwIZt6DXiq_PqYLxPZGQ0Q5WI42P_X_rLw9rcyoSk-KVKZjr3dlDwvSMdpF5RztC5alUWyV-thkLvlfMI4_mDXc8zmvSEAlPhJpy7U9sKI7RycCrkbImgAOjhKzpbINVU=w2600-h1952-no

Concept Idea:

Binary numbers forming diamonds with alternating color schemes. Combining the ideas and producing images based off of the files given from links attached below:

https://www.freepik.com/free-vector/polygonal-shapes-on-a-transparent-background_1074458.htm

https://www.freepik.com/free-vector/vector-background-abstract-polygon-triangle-polygonal-design-geometrical_1374767.htm

Research:

Topics:

https://arxiv.org/pdf/1806.00923.pdf
http://omdbapi.com/
http://github.com/joeldevlearning/javascript-2

You can’t perform that action at this time.