Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.

README.md

atom adamalston.com · Build Status Netlify status

The second iteration of adamalston.com built with React and hosted with Netlify.

Previous iteration: v1

Desktop Preview Mobile Preview

This website's design is both simple and accessible. Dynamic particles create an experience that is interactive and visually inviting. The site offers two themes via a toggle, dark mode (default) and light mode. Once toggled, the selected theme should persist between tabs, windows, and page reloads.

Mobile support for the site ranges from 4 in. displays through 6.7 in. all the way up to 13 in. tablets.

Open Source

I made this website open source under the assumption that others would use the code to create their own websites. I only ask that this code be used with attribution as a significant amount of time was spent writing and optimizing it. Please give proper credit by linking back to adamalston.com. Thanks!

Installation & Setup
  1. Clone this repository
  2. Install packages/dependencies: npm install
  3. Start the development server: npm start
  4. Feel free to change anything like icons or particle colors

Building & Deployment

  1. Create a production build of the website: npm run build
  2. The React/Deployment docs detail how to deploy to gh-pages, Netlify, and many other services

Icons

Font Awesome Icons

Use Icon Short-Code
Dark Mode fas moon
Light Mode fas sun
GitHub fab github
LinkedIn fab linkedin
Resume fas file-alt
Email fas paper-plane

Color Reference

Text and icons have a color contrast ratio greater than 7:1 satisfying WCAG 2.1 Section 1.4.6

Name Color Hex
Black 000000 000000
Slate 333333 333333
Red FF2600 FF2600
Orange FF8000 FF8000
Yellow FFD500 FFD500
Green 22DD22 22DD22
Blue 00BFFF 00BFFF
Purple C912ED C912ED
Silver CCCCCC CCCCCC
White FFFFFF FFFFFF

Themes

Themes have their own branch

Current themes include fireworks, snow, and holidays - more will be added soon


If you found this project useful, please consider giving it a ! If you have any questions or feedback, open an issue and I will get back to you :​)