Skip to content

Commit

Permalink
package upgrade
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcoburrometo
marcoburrometo committed Sep 12, 2022
1 parent 83a6fd1 commit 3470e33
Show file tree
Hide file tree
Showing 12 changed files with 30,940 additions and 40,821 deletions.
12 changes: 6 additions & 6 deletions craco.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
postOptions: {
plugins: [require('tailwindcss'), require('autoprefixer')],
},
},
}
eslint: {
enable: false,
},
};
48,694 changes: 20,608 additions & 28,086 deletions package-lock.json
View file

Large diffs are not rendered by default.

79 changes: 41 additions & 38 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,39 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@craco/craco": "^6.4.3",
"@react-spring/three": "^9.4.1",
"@react-three/drei": "^8.4.0",
"@react-three/fiber": "^7.0.24",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.11",
"@types/three": "^0.126.1",
"react": "^17.0.2",
"@craco/craco": "^6.4.5",
"@react-spring/three": "^9.5.3",
"@react-three/drei": "^9.29.1",
"@react-three/fiber": "^8.7.3",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^29.0.1",
"@types/node": "^18.7.16",
"@types/react": "^18.0.19",
"@types/react-dom": "^18.0.6",
"@types/three": "^0.144.0",
"react": "^18.2.0",
"react-animated-css": "^1.2.1",
"react-cool-inview": "^1.2.1",
"react-cool-inview": "^3.0.1",
"react-dark-mode-toggle": "^0.2.0",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"react-spring": "^9.4.1",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"react-spring": "^9.5.3",
"react-three": "^0.9.7",
"react-typist": "^2.0.5",
"three": "^0.136.0",
"typescript": "^4.5.4",
"typewriter-effect": "^2.18.2",
"web-vitals": "^1.0.1"
"three": "^0.144.0",
"typescript": "^4.8.3",
"typewriter-effect": "^2.19.0",
"web-vitals": "^3.0.1"
},
"resolutions": {
"@types/react": "17.0.40"
},
"scripts": {
"build:style": "tailwind build src/index.css -o src/styles/tailwind.css",
"start": "craco start",
"build": "DISABLE_ESLINT_PLUGIN=true craco build",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
Expand All @@ -55,25 +58,25 @@
]
},
"devDependencies": {
"@tailwindcss/postcss7-compat": "^2.2.17",
"@tailwindcss/postcss7-compat": "npm:@tailwindcss/postcss7-compat",
"@types/react-typist": "^2.0.3",
"autoprefixer": "^9",
"eslint": "^7.8.1",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-airbnb-typescript": "^10.0.0",
"eslint-config-prettier": "^6.11.0",
"autoprefixer": "^10.4.9",
"eslint": "^8.23.1",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-prettier": "^8.5.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-i18n-json": "^3.1.0",
"eslint-plugin-i18next": "https://github.com/edvardchen/eslint-plugin-i18next/archive/v5.0.0-0.tar.gz",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.0",
"eslint-plugin-react-native": "^3.9.1",
"postcss": "^7",
"prettier": "^2.5.1",
"prettier-eslint-cli": "^5.0.0",
"tailwindcss": "npm:@tailwindcss/postcss7-compat"
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.31.8",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-native": "^4.0.0",
"postcss": "^8.4.16",
"prettier": "^2.7.1",
"prettier-eslint-cli": "^7.1.0",
"tailwindcss": "^3.1.8"
}
}
172 changes: 92 additions & 80 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
/* eslint-disable no-nested-ternary */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable no-console */
import React, { useEffect, useState } from 'react';
/* eslint-disable react/no-array-index-key */

import React, { useEffect, useMemo, useState } from 'react';
import DarkModeToggle from 'react-dark-mode-toggle';
import './App.css';
import './effects.css';
import Typist from 'react-typist';
import { Canvas } from '@react-three/fiber';
import Experience from './Components/Experience/Experience';
Expand All @@ -13,6 +13,8 @@ import Skill from './Components/Skill/Skill';
import Image from './Components/HoverImage/Image';
import HelloText from './Components/HelloText/HelloText';
import Fluid from './Components/Fluid/Fluid';
import './App.css';
import './effects.css';

const themes = ['red', 'yellow', 'green', 'blue', 'purple', 'indigo', 'pink'];

Expand Down Expand Up @@ -50,16 +52,21 @@ function App(): JSX.Element {
setCount(1);
}, [count]);

const qualitiesEl = qualities.map((q) => (
<span key={q}>
<span>{q}</span>
<Typist.Backspace count={q.length} delay={100 * q.length} />
</span>
));
const qualitiesEl = useMemo(
() =>
qualities.map((q) => (
<span key={q}>
<span>{q}</span>
<Typist.Backspace count={q.length} delay={100 * q.length} />
</span>
)),
[],
);

const header = (
<div className="flex flex-col justify-center items-center bg-gray-300 dark:bg-gray-800 h-screen">
{/* <Canvas
const header = useMemo(
() => (
<div className="flex flex-col justify-center items-center bg-gray-300 dark:bg-gray-800 h-screen">
{/* <Canvas
dpr={window.devicePixelRatio || 1}
linear
camera={{ fov: 75, position: [0, 0, 7] }}
Expand All @@ -70,79 +77,84 @@ function App(): JSX.Element {
>
<Image url="./marco_full.jpg" width={4} />
</Canvas> */}
<img className="img-marco" alt="Marco" src="./marco_full.jpg" />
<div className="mt-8 dark:text-gray-50 text-gray-800 text-4xl font-black">
{'Marco Burrometo'.split('').map((l, i) => (
<span
key={i.toString()}
className={`${l === 'M' ? 'glitch' : l === 'B' ? 'glitch-2' : ''}`}
data-text={l}
>
{l}
</span>
))}
</div>
<div className="flex flex-row">
<span className="text-lg mt-8 dark:text-gray-200 text-gray-600 font-semibold">
{count ? (
<Typist
cursor={{
element: (<span className={textColor}> | </span>) as any,
}}
onTypingDone={() => setCount(0)}
avgTypingDelay={50}
<img className="img-marco" alt="Marco" src="./marco_full.jpg" />
<div className="mt-8 dark:text-gray-50 text-gray-800 text-4xl font-black">
{'Marco Burrometo'.split('').map((l, i) => (
<span
key={i.toString()}
className={`${l === 'M' ? 'glitch' : l === 'B' ? 'glitch-2' : ''}`}
data-text={l}
>
{qualitiesEl}
</Typist>
) : (
' '
)}
{l}
</span>
))}
</div>
<div className="flex flex-row">
<span className="text-lg mt-8 dark:text-gray-200 text-gray-600 font-semibold">
{count ? (
<Typist
cursor={{
element: (<span className={textColor}> | </span>) as any,
}}
onTypingDone={() => setCount(0)}
avgTypingDelay={50}
>
{qualitiesEl}
</Typist>
) : (
' '
)}
</span>
<span className="text-lg mt-8 ml-1 dark:text-gray-200 text-gray-600 font-semibold">
software expert
</span>
</div>
<span className="text-md font-normal mt-8 dark:text-gray-400 text-gray-500">
Just a passionate person based in Italy.
</span>
<span className="text-xs mt-28 mr-16 transform -rotate-90 dark:text-gray-400 text-gray-500">
Scroll down
</span>
<span className="text-lg mt-8 ml-1 dark:text-gray-200 text-gray-600 font-semibold">
software expert
<span className="cursor-pointer mt-2">
<svg
className={`hardware-acceleration animate-bounce fill-current transform origin-center ml-6 justify-center items-center ${textColor}`}
width="60"
height="60"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M11 21.883l-6.235-7.527-.765.644 7.521 9 7.479-9-.764-.645-6.236 7.529v-21.884h-1v21.883z" />
</svg>
</span>
</div>
<span className="text-md font-normal mt-8 dark:text-gray-400 text-gray-500">
Just a passionate person based in Italy.
</span>
<span className="text-xs mt-28 mr-16 transform -rotate-90 dark:text-gray-400 text-gray-500">
Scroll down
</span>
<span className="cursor-pointer mt-2">
<svg
className={`hardware-acceleration animate-bounce fill-current transform origin-center ml-6 justify-center items-center ${textColor}`}
width="60"
height="60"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
>
<path d="M11 21.883l-6.235-7.527-.765.644 7.521 9 7.479-9-.764-.645-6.236 7.529v-21.884h-1v21.883z" />
</svg>
</span>
</div>
),
[count, qualitiesEl, textColor],
);
const presentation = (
<div>
<p className="text-gray-700 dark:text-gray-400">
I&apos;m <b>Marco Burrometo</b>, nice to meet you!
{/* 👋 */}
</p>
<p className="text-gray-700 dark:text-gray-400 mt-5">
Born in 1992. Based in northern Italy 🇮🇹. Citizen of the world 🌍.
</p>
<p className="text-gray-700 dark:text-gray-400 mt-5">My greatest passions are Technology and Music.</p>
<p className="text-gray-700 dark:text-gray-400 mt-5">
I like to put user experience in first place and focus on customer&apos;s needs to archieve the best
results. I have fun creating unique things and keeping myself updated on newest technologies..
</p>
<p className="text-gray-700 dark:text-gray-400 mt-5">Bass guitar player since I was 15.</p>
<p className="text-gray-700 dark:text-gray-400">Vynil and Music addicted. 🎧</p>
<p className="text-gray-700 dark:text-gray-400">Proud dachshund owner and lover. 🌭</p>
<p className="text-gray-700 dark:text-gray-400">Captain and head fisher of a boat. 🚤🎣</p>
<p className="text-gray-700 dark:text-gray-400">I try to play tennis. 🎾</p>
<p className="text-gray-700 dark:text-gray-400">Rubber duck debugger. 🐤</p>
</div>
const presentation = useMemo(
() => (
<div>
<p className="text-gray-700 dark:text-gray-400">
I&apos;m <b>Marco Burrometo</b>, nice to meet you!
{/* 👋 */}
</p>
<p className="text-gray-700 dark:text-gray-400 mt-5">
Born in 1992. Based in northern Italy 🇮🇹. Citizen of the world 🌍.
</p>
<p className="text-gray-700 dark:text-gray-400 mt-5">My greatest passions are Technology and Music.</p>
<p className="text-gray-700 dark:text-gray-400 mt-5">
I like to put user experience in first place and focus on customer&apos;s needs to archieve the best
results. I have fun creating unique things and keeping myself updated on newest technologies..
</p>
<p className="text-gray-700 dark:text-gray-400 mt-5">Bass guitar player since I was 15.</p>
<p className="text-gray-700 dark:text-gray-400">Vynil and Music addicted. 🎧</p>
<p className="text-gray-700 dark:text-gray-400">Proud dachshund owner and lover. 🌭</p>
<p className="text-gray-700 dark:text-gray-400">Captain and head fisher of a boat. 🚤🎣</p>
<p className="text-gray-700 dark:text-gray-400">I try to play tennis. 🎾</p>
<p className="text-gray-700 dark:text-gray-400">Rubber duck debugger. 🐤</p>
</div>
),
[],
);

return (
Expand Down
26 changes: 14 additions & 12 deletions src/Components/Experience/Experience.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { memo } from 'react';

export interface ExperienceDef {
period: string;
Expand All @@ -7,14 +7,16 @@ export interface ExperienceDef {
technologies: string;
}

const Experience = ({ description, period, place, technologies }: ExperienceDef): JSX.Element => (
<>
<div className="flex text-sm font-semibold flex-row justify-between text-gray-800 dark:text-gray-300 mt-5">
<span>{period}</span>
<span>{place}</span>
</div>
<p className="text-gray-700 dark:text-gray-400 mt-1">{description}</p>
<p className="text-sm text-gray-500 dark:text-gray-500">{technologies}</p>
</>
);
export default Experience;
function Experience({ description, period, place, technologies }: ExperienceDef): JSX.Element {
return (
<>
<div className="flex text-sm font-semibold flex-row justify-between text-gray-800 dark:text-gray-300 mt-5">
<span>{period}</span>
<span>{place}</span>
</div>
<p className="text-gray-700 dark:text-gray-400 mt-1">{description}</p>
<p className="text-sm text-gray-500 dark:text-gray-500">{technologies}</p>
</>
);
}
export default memo(Experience);
Loading

0 comments on commit 3470e33

Please sign in to comment.