My Portfolio

My personal developer portfolio and blog. Designed from scratch with React and Styled Components, bundled with Webpack. Features:

• toggleable light 🌞 and dark 🌙 theme!
• blog with markdown support
• mobile responsive design with standard breakpoints
• contact form that sends emails

Live Site

See it live at ethanbon.com

Running Locally

1. git clone [email protected]:EthanBonsignori/portfolio.git

2. Copy the .env.example file to .env and fill in the necessary environment variables, found on the Firebase Console > Project Settings > General > Your Apps > Firebase SDK snippet > Config

3. npm install

4. npm run dev

Adding a new Blog

Run the following command replacing the brackets with the title:

npm run blog {blog title here}

This creates a new entry in the posts folder such as: src/assets/posts/x-title.md where:

• x: numerical order of blog based on when it was created
• title: up to the first 15 characters (lower cased and spaces removed) of the blog, for normalized file names

Adding a new Project

TODO: automate this with script: Add a new project to the top of the projects array in src/assets/data/projects.js:

{
  title: 'Project Title',
  projectLink: 'project-route',
  active: boolean, // true if project is live, false if not
  image: 'project-image.png',
  description: 'Project Description',
  mdLink: 'project-markdown.md',
  site: 'project-site.com', // optional
  github: 'https://github.com/EthanBonsignori/repo-name', // optional
  tags: ['tag1', 'tag2', 'tag3']
  screenshots: ['screenshot1.png', 'screenshot2.png']
}