- About the Project
- Usage
- Videos and Screenshots
- Getting Started
- Built With
- Authors
- Acknowledgements
- License
March 2021
- I wasn't happy with my professional portfolio being a template attached to the static personal site I built before starting my full-stack web development classes. While I've been job hunting, I've been building this site as a side project, and diving into aspects of front-end I love. It's built in React and CSS, incorporating react-transition-group. The landing page has the first svg I coded myself, and I've learned a lot about keyframes! I spent a lot of time on the light/dark mode - building the toggle, flipping it, adjusting its size, and making sure it shows the correct side no matter which theme is loaded. I enjoyed learning about CSS variables to create the dark and light themes, including getting the svgs to switch colors! This was the first project I deployed with Netlify, and setting up a serverless contact form was a breeze! Read about how I made the dark mode toggle.
July 2021
- I've updated the blog portion of my site to pull my posts from https://dev.to/abbeyperini using Netlify AWS Lambda Functions. Read the walkthrough.
August 2021
- I designed, made, and added Shiba Inu loading and error SVGs and animated one of them. Read about how I did it.
November 2021
- I accessibility audited my site and have written a series of blogs on the audit and the fixes.
May 2022
- I updated my favicons and wrote about it.
April 2023
- I've made some content updates and added site analytics in the last year. Most recently, I've updated some packages, removed some deprecated things, and added a
prefers-color-schemecheck to my theme utilities. I've removed my blogs from this site, because I will be putting them in my digital garden.
- Visit abbeyperini.dev
To set up a local copy of the project follow the steps below.
- In an empty folder initialize a new Node.js project.
npm init- Clone to local machine
git clone https://github.com/abbeyperini/Portfolio2.0.git- Install NPM packages
npm install - Start program
npm start- Javascript
- CSS
- React
- react-transition-group
Deployed with Netlify.
- Abbey Perini - abbeyperini
I keep my code public to help other people learn. If you build inspired by my code or tutorial, an acknowledgment in your README would be nice. To use my code exactly in your own project, personal or commercial, all you have to do is credit me in an acknowledgment in your README and visibly on the page that uses it on your site. For example: <div class="copyright">© Untitled. All rights reserved. Includes code by: <a href="https://abbeyperini.dev">Abbey Perini</a>.</div>