The adamalston.com website is built using React and hosted on Netlify.
This website is designed to be simple and accessible. Dynamic particles create an interactive experience for visitors. The site offers two themes via a toggle: a dark theme (default) and a light theme. The selected theme persists between tabs, windows, and page reloads.
Optimized for mobile devices with screen sizes ranging from 4-inch smartphones to 13-inch tablets.
This website is open source with the hope that others will use the code to create their own websites. I ask that this code be used with attribution, as a significant amount of time was spent on writing and optimizing it. Please give proper credit by linking back to adamalston.com. Thank you!
Install and setup
- Clone this repository.
- Install dependencies:
npm install
. - Start the development server:
npm start
.
Build and deploy
- Create a production build:
npm run build
. - Refer to the React Deployment docs for deploying to
gh-pages
, Netlify, and other services.
The website uses Font Awesome icons for various interactive elements.
Use | Icon | Short-Code |
---|---|---|
Dark Mode | far moon |
|
Light Mode | far sun |
|
GitHub | fab github |
|
fab linkedin |
||
Resume | fal file-alt |
|
fal paper-plane |
Text and icons are designed with a color contrast ratio greater than 7:1, satisfying WCAG 2.1 Section 1.4.6.
Name | Color | Hex |
---|---|---|
Black | 000000 |
|
Slate | 333333 |
|
Red | ff2600 |
|
Orange | ff8000 |
|
Yellow | ffd500 |
|
Green | 22dd22 |
|
Blue | 00bfff |
|
Purple | c912ed |
|
Silver | cccccc |
|
White | ffffff |
For a look at the first version of my website, and to see how it has evolved, visit v1.
If you find this project useful, consider giving it a ! For questions or feedback, feel free to open an issue and I'll respond as soon as possible.