fdel/portfolio-redesign
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding in more experience sections, and support for webp files in build.

Browse Source
This commit is contained in:
Frank Delaguila
2022-07-10 21:23:03 -06:00
parent d183d9cf27
commit e6d412125c
6 changed files with 69 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/logos/dixie-tech-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
src/assets/logos/lifetime-logo.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

54
src/components/App.jsx
View File

@@ -16,6 +16,8 @@ import logo from '../assets/logos/fd..svg';
import ultradentLogo from '../assets/logos/ultradent-white.svg'; import ultradentLogo from '../assets/logos/ultradent-white.svg';
import monumetricLogo from '../assets/logos/monumetric-stacked-white.svg'; import monumetricLogo from '../assets/logos/monumetric-stacked-white.svg';
import linkedInLogo from '../assets/logos/linkedin-logo.png'; import linkedInLogo from '../assets/logos/linkedin-logo.png';
import lifetimeLogo from '../assets/logos/lifetime-logo.webp';
import dixieTechLogo from '../assets/logos/dixie-tech-logo.png';
import git from '../assets/logos/git-logo.png'; import git from '../assets/logos/git-logo.png';
import { toTitleCase } from '../scripts/utils'; import { toTitleCase } from '../scripts/utils';
@@ -60,7 +62,7 @@ const SocialSphere = ({texture, position, rotation, scale, url}) => {
</mesh> </mesh>
<Html ref={tooltipRef} className="tooltip" position={[position[0], position[1] + 0.6, position[2]]} rotation={rotation}> <Html ref={tooltipRef} className="tooltip" position={[position[0], position[1] + 0.6, position[2]]} rotation={rotation}>
Click to view my {platformTitle()} Click to view my {platformTitle()}
<div class="left-point"></div> <div className="left-point"></div>
</Html> </Html>
</> </>
); );
@@ -140,6 +142,15 @@ const App = () => {
<SocialSphere texture={gitTexture} position={[2.5, 0, -3]} scale={[0.4]} rotation={[0, -2, -0.2]} url="https://github.com/franky212/"/> <SocialSphere texture={gitTexture} position={[2.5, 0, -3]} scale={[0.4]} rotation={[0, -2, -0.2]} url="https://github.com/franky212/"/>
</group> </group>
{!screenClicked ?
<mesh position={[0, -0.6, -1]}>
<Html className="scroll-indicator">
<i className="fa-solid fa-computer-mouse"></i>
<span className="mt-1">Scroll</span>
</Html>
</mesh>
: null}
<spotLight <spotLight
shadow-mapSize-width={1024 * 4} shadow-mapSize-width={1024 * 4}
shadow-mapSize-height={1024 * 4} shadow-mapSize-height={1024 * 4}
@@ -219,7 +230,7 @@ const App = () => {
I have experience with testing libraries such as Jest, Enzyme, and React testing library.<br /><br /> I have experience with testing libraries such as Jest, Enzyme, and React testing library.<br /><br />
Automation tools, and task runners such as Webpack, Grunt, and NPM.<br /><br /> Automation tools, and task runners such as Webpack, Grunt, and NPM.<br /><br />
I also work as a UX/UI designer using tools such as the Adobe Suite(Adobe XD, Adobe Illustrator, etc.), Sketch, and Figma. For UX/UI Design I'm using tools such as the Adobe Suite(Adobe XD, Adobe Illustrator, etc.), Sketch, and Figma.
</p> </p>
</div> </div>
@@ -227,9 +238,10 @@ const App = () => {
<div className="bg-zinc-800 w-full rounded p-4 mb-2"> <div className="bg-zinc-800 w-full rounded p-4 mb-2">
<a target="_blank" href="https://www.monumetric.com/"> <a target="_blank" href="https://www.monumetric.com/">
<img className="w-16 mb-2" src={monumetricLogo} alt="Monumetric Logo - Graphic of the Pale Blue Dot from Caral Sagan with Monumetric below" /> <img className="block mx-auto w-16 mb-2" src={monumetricLogo} alt="Monumetric Logo - Graphic of the Pale Blue Dot from Caral Sagan with Monumetric below" />
</a> </a>
<p> <p>
<span className="font-bold">Monumetric</span><br />
<span className="font-bold">Frontend Developer and UX/UI Designer<br /></span> <span className="font-bold">Frontend Developer and UX/UI Designer<br /></span>
Oct 2021 - Present<br /> Oct 2021 - Present<br />
Technologies Used:<br /> Technologies Used:<br />
@@ -238,14 +250,42 @@ const App = () => {
</div> </div>
<div className="bg-zinc-800 w-full rounded p-4 mb-2"> <div className="bg-zinc-800 w-full rounded p-4 mb-2">
<a target="_blank" href="https://www.ultradent.com/"> <a target="_blank" href="https://www.lifetime.com/">
<img className="w-12 mb-2" src={ultradentLogo} alt="Ultradent Logo - UPI in white for Ultradent Products Inc." /> <img className="block mx-auto w-16 mb-2" src={lifetimeLogo} alt="Lifetime Products Logo - The word Lifetime in a shield" />
</a> </a>
<p> <p>
<span className="font-bold">Front End Developer<br /></span> <span className="font-bold">Lifetime Products Inc.</span><br />
<span className="font-bold">UX &amp; UI Designer and Developer<br /></span>
Dec 2020 - Oct 2021<br />
Technologies Used:<br />
C# environment - UX/UI Design, React, Razor Views, Javascript, jQuery, Webpack, SCSS(Sass), Adobe XD, implementation of React Testing Library.
</p>
</div>
<div className="bg-zinc-800 w-full rounded p-4 mb-2">
<a target="_blank" href="https://www.ultradent.com/">
<img className="block mx-auto w-12 mb-2" src={ultradentLogo} alt="Ultradent Logo - Letters UPI in white for Ultradent Products Inc." />
</a>
<p>
<span className="font-bold">Ultradent Products Inc.</span><br />
<span className="font-bold">Front End Web Developer<br /></span>
May 2018 - Apr 2020<br /> May 2018 - Apr 2020<br />
Technologies Used:<br /> Technologies Used:<br />
React/Preact, Javascript, jQuery, Webpack, Storybook, React Testing Library, SCSS(Sass), Razor Views, Figma, Sketch</p> React/Preact, Javascript, jQuery, Webpack, Storybook, React Testing Library, SCSS(Sass), Razor Views, Figma, Sketch
</p>
</div>
<div className="bg-zinc-800 w-full rounded p-4 mb-2">
<a target="_blank" href="https://www.ultradent.com/">
<img className="block mx-auto w-12 mb-2" src={dixieTechLogo} alt="Ultradent Logo - Letters UPI in white for Ultradent Products Inc." />
</a>
<p>
<span className="font-bold">Dixie Technical College</span><br />
<span className="font-bold">Front End Web Developer<br /></span>
May 2017 - Oct 2017<br />
Technologies Used:<br />
Javascript, jQuery, HTML, CSS, Adobe Illustrator
</p>
</div> </div>
</div> </div>

12
src/styles/styles.scss
View File

@@ -39,6 +39,16 @@ body {
} }
} }
.scroll-indicator {
display: flex;
flex-direction: column;
align-items: center;
color: white;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 8px;
padding: 0.5rem;
}
.tooltip { .tooltip {
background-color: #1a1a1d; background-color: #1a1a1d;
color: white; color: white;
@@ -55,7 +65,7 @@ body {
border-right: 1vh solid transparent; border-right: 1vh solid transparent;
border-top: 2vh solid #1a1a1d; border-top: 2vh solid #1a1a1d;
position: absolute; position: absolute;
top: 65%; top: 70%;
left: -4%; left: -4%;
transform: rotate(50deg); transform: rotate(50deg);
} }

10
src/views/index.html
View File

@@ -7,6 +7,16 @@
<link rel="shortcut icon" type="image/jpg" href="../assets/logos/fd..svg"/> <link rel="shortcut icon" type="image/jpg" href="../assets/logos/fd..svg"/>
<title>Font End Web Developer and Designer</title> <title>Font End Web Developer and Designer</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ELFDQBMQ52"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ELFDQBMQ52');
</script>
<link rel="stylesheet" href="https://use.typekit.net/vkd2vwx.css"> <link rel="stylesheet" href="https://use.typekit.net/vkd2vwx.css">
</head> </head>
<body> <body>

2
webpack.common.js
View File

@@ -62,7 +62,7 @@ module.exports = {
}, },
{ {
test: /\.(png|jpe?g|gif|svg)$/i, test: /\.(png|jpe?g|gif|svg|webp)$/i,
loader: 'file-loader', loader: 'file-loader',
options: { options: {
name: '[name].[ext]', name: '[name].[ext]',