Ethan Bonsignori EthanBonsignori

🐳

Building docker containers...

Full-stack engineer with an eye for design. Lover of learning, problem-solving, and all things web.

EthanBonsignori / resume.json

Last active December 7, 2021 06:37

	{
	"meta": {
	"theme": "paper"
	},
	"basics": {
	"name": "Ethan Bonsignori",
	"label": "A fullstack web developer focusing on clean code and continuous learning.",
	"picture": "https://avatars3.githubusercontent.com/u/47482104?s=460&u=a8fbb1fe73832a210eaf92c72afef07cbd0b6154&v=4",
	"email": "ebonsignori@gmail.com",
	"phone": "(912) 507-3547",

EthanBonsignori / CropModal.js

Last active March 25, 2021 17:05

Second revision of CropModal - adding react-image-crop and configuring the crop

	import { useCallback, useEffect, useRef, useState } from 'react';
	import Modal from 'react-modal';
	import ReactCrop from 'react-image-crop';
	import 'react-image-crop/dist/ReactCrop.css';

	// For accessibility (http://reactcommunity.org/react-modal/accessibility/)
	Modal.setAppElement('#root');


	function CropModal(props) {

EthanBonsignori / App.js

Last active March 25, 2021 17:08

Second revision of App.js - adding handleChange function


	import React from 'react';

	function App() {

	// Placeholder, will fetch url from Database when setup
	const profilePictureUrl = "https://placehold.it/200x200";

	const handleChange = (evt) => {
	const file = evt.target.files[0];

EthanBonsignori / App.js

Last active March 19, 2021 21:26

Second revision of App for tutorial: https://ethanbon.com/blog/uploading-user-cropped-profile-images-to-digital-ocean-spaces#crop

	import React, { useState } from 'react';
	import CropModal from './CropModal';

	function App() {
	const [isOpen, setIsOpen] = useState(false);
	const [imageBase64, setImageBase64] = useState(null);

	// Placeholder, will fetch url from Database when setup
	const profilePictureUrl = "https://placehold.it/200x200"

EthanBonsignori / CropModal.js

Last active March 25, 2021 16:10

First revision of CropModal - simple displaying of Modal and logging of the imageBase64 prop

	import Modal from 'react-modal';

	// For accessibility (http://reactcommunity.org/react-modal/accessibility/)
	Modal.setAppElement('#root');

	function CropModal(props) {
	const {
	isOpen,
	toggleModal,
	imageBase64,

EthanBonsignori / App.js

Last active March 25, 2021 17:03

First revision of App.js for the picture upload tutorial: https://ethanbon.com/blog/uploading-user-cropped-profile-images-to-digital-ocean-spaces-1

	import React from 'react';

	function App() {

	// Placeholder, will fetch url from Database when setup
	const profilePictureUrl = "https://placehold.it/200x200";

	const handleChange = (evt) => {
	const file = evt.target.files[0];
	console.log(file); // log file for now

EthanBonsignori / index.js

Last active March 25, 2021 17:03

	import React from 'react';
	import ReactDOM from 'react-dom';
	import './styles/index.css';
	import App from './components/App';

	ReactDOM.render(
	<App />,
	document.getElementById('root')
	);