adamalston.com is built using React.
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 across tabs, windows, and page reloads.
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!
Important
This project requires Node.js to run.
- Clone this repository:
git clone https://github.com/adamalston/v2.git
- Navigate into the project directory:
cd v2 - Install dependencies:
npm install
- Start the app in development mode:
npm start
Build and deploy
- Create a production build:
npm run build
- Refer to the React Deployment docs to deploy to platforms like GitHub Pages, Netlify, or Vercel.
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 ! Have a question or feedback? Open an issue or send me an email. I'll respond as soon as possible.