Skip to content

Commit

Permalink
Add framer-motion (#32)
Browse files Browse the repository at this point in the history
* Add motion

* Update motion
  • Loading branch information
rvillanueva authored Dec 6, 2023
1 parent 9d290ac commit 6fa078c
Show file tree
Hide file tree
Showing 10 changed files with 188 additions and 118 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"@fortawesome/free-regular-svg-icons": "^5.11.2",
"@fortawesome/free-solid-svg-icons": "^5.11.2",
"@fortawesome/react-fontawesome": "^0.1.7",
"framer-motion": "^10.16.14",
"p5": "^1.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Expand Down
6 changes: 3 additions & 3 deletions src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,14 @@ class App extends React.Component {
this.setState({
loadBackground: true,
}),
2000
1000,
);
setTimeout(
() =>
this.setState({
loadPortfolio: true,
}),
750
750,
);
this.setState({
isLoaded: true,
Expand All @@ -72,7 +72,7 @@ class App extends React.Component {
selectOpenProject = () => {
return (
portfolioData.items.filter(
(item) => item._id === this.state.openProjectId
(item) => item._id === this.state.openProjectId,
)[0] || null
);
};
Expand Down
180 changes: 101 additions & 79 deletions src/data/portfolioData.js
Original file line number Diff line number Diff line change
@@ -1,83 +1,105 @@
const data = {
items: [{
_id: 'jomalone',
title: 'Jo Malone',
thumbnailUrl: '/images/jomalone.jpg',
description: 'At Perch Interactive, we were tasked by Jo Malone to create an immersive experience that merged digital and physical interactions. We created a display case that detected when a customer picked up a fragrance and delivered beautiful floral animations.'
}, {
_id: 'leif',
title: 'Leif',
thumbnailUrl: '/images/leif-macbook.png',
description: 'At Leif, I led a team of software engineers building technology to increase access to education. Leif\'s income share agreements have helped tens of thousands of students get an education with less financial risk.'
}, {
_id: 'ibmresearch',
title: 'IBM Research: Innovation Lab',
thumbnailUrl: '/images/thinklab.jpg',
description: 'At the IBM Research THINKLab, I created immersive experiences to demonstrate our research capabilities and to identify new opportunities with Fortune 500 partners. I was in charge of the life sciences, healthcare, and material sciences engagements that helped accelerate millions in new business.'
}, {
_id: 'mobilebanking',
title: 'Waypost: Mobile Banking',
thumbnailUrl: '/images/waypost-mobile.png',
description: 'Developed a mobile banking platform for the independent workforce. We focused on making it easy to set aside money for taxes, track expenses, and remind clients about unpaid invoices. Built on React Native with a Node.js backend and Plaid integration.'
}, {
_id: 'voter',
title: 'Vot-ER',
thumbnailUrl: '/images/voter-mockup.jpg',
description: 'Designed and created a mobile-responsive webapp for Vot-ER to help healthcare providers to register their patients to vote.'
}, {
_id: 'foster',
title: 'NYC Child Services: Foster Care',
thumbnailUrl: './images/agingout.png',
thumbnailPosition: 'left top',
description: `Worked with the NYC Administration for Child Services and to create a resources for foster children aging out of the system. Interviewed users who were formerly in the foster care system and created digital resources around job search, scholarships, and housing assistance.`
}, {
_id: 'waypost',
title: 'Waypost: Web App',
thumbnailUrl: '/images/waypost-web.png',
thumbnailPosition: 'left center',
description: 'In the Waypost web app, we reimagined how to make invoicing more intuitive and effective for the freelancers struggling to get paid on time. We redesigned invoicing work like an inbox, decreasing the number of clicks required to request payment and intelligently identifying which clients have overdue bills.'
}, {
_id: 'ibmresearchcrm',
title: 'IBM Research: CRM',
thumbnailUrl: './images/compass.png',
thumbnailPosition: 'left top',
description: `The Compass was originally developed as a standalone catalog of IBM Research projects. Over time, it expanded to become the central platform for managing client visits to the flagship innovation lab. Over two years it processed over 400 clients.\n\nI started this project as a way to distribute information about IBM Research projects around the world. As we continued operations in our innovation lab, we began to receive a much higher volume of visit requests and needed to process them systematically.\n\nAs tool lead, I regularly worked with our team and other internal stakeholders to map out requirements, develop features, and deploy them for use.`
}, {
_id: 'sentiment',
title: 'Twitter Sentiment Analysis',
thumbnailUrl: './images/sentiment.png',
thumbnailPosition: 'right center',
description: `Created a small personal project that used sentiment analysis and probability theory to discover positive and negative influencers on Twitter.`
}, {
_id: 'sarmapper',
title: 'Search and Rescue: Mapping',
thumbnailUrl: './images/sarmapper.png',
thumbnailPosition: 'left center',
description: 'Helps rescuers visualize probability models of lost person behavior. Used by dozens of search and rescue teams for briefings and planning operations, including state emergency management agencies.'
}, {
_id: 'neutrogena',
title: 'Neutrogena',
thumbnailUrl: './images/neutrogena.jpg',
description: `Create an interactive retail display for Neutrogena that detected which products were picked up and delivered relevant information.`
}, {
_id: 'news-nlp',
title: 'News Analytics',
thumbnailUrl: './images/news/timeline.png',
thumbnailPosition: 'left top',
description: `Created for an IBM challenge to integate Watson services. The application pulled scraped news articles and analyzed the natural language to visualize information across timeline, map, and entity relationships. `
}, {
_id: 'geovis',
title: 'Location History Visualization',
thumbnailUrl: './images/gps.png',
thumbnailPosition: 'left center',
description: `Personal project that compiled and visualized my Google Maps location history across half a decade.`
}, {
_id: 'harrypotter',
title: 'Harry Potter Fan Website',
thumbnailUrl: './images/harrypotter.png',
thumbnailPosition: 'top center',
description: `Created a Harry Potter fan website when I was 10 years old. Featured a realistic simulations of several literary scenes.`
}]
items: [
{
_id: "jomalone",
title: "Jo Malone",
thumbnailUrl: "/images/jomalone.jpg",
description:
"At Perch Interactive, we were tasked by Jo Malone to create an immersive experience that merged digital and physical interactions. We created a display case that detected when a customer picked up a fragrance and delivered beautiful floral animations.",
},
{
_id: "leif",
title: "Leif",
thumbnailUrl: "/images/leif-macbook.png",
description:
"At Leif, I led a team of software engineers building technology to increase access to education. Leif's income share agreements have helped tens of thousands of students get an education with less financial risk.",
},
{
_id: "ibmresearch",
title: "IBM Research: Innovation Lab",
thumbnailUrl: "/images/thinklab.jpg",
description:
"At the IBM Research THINKLab, I created immersive experiences to demonstrate our research capabilities and to identify new opportunities with Fortune 500 partners. I was in charge of the life sciences, healthcare, and material sciences engagements that helped accelerate millions in new business.",
},
{
_id: "mobilebanking",
title: "Waypost: Mobile Banking",
thumbnailUrl: "/images/waypost-mobile.png",
description:
"Developed a mobile banking platform for the independent workforce. We focused on making it easy to set aside money for taxes, track expenses, and remind clients about unpaid invoices. Built on React Native with a Node.js backend and Plaid integration.",
},
{
_id: "voter",
title: "Vot-ER",
thumbnailUrl: "/images/voter-mockup.jpg",
description:
"Designed and created a mobile-responsive webapp for Vot-ER to help healthcare providers to register their patients to vote.",
},
{
_id: "foster",
title: "NYC Child Services: Foster Care",
thumbnailUrl: "./images/agingout.png",
thumbnailPosition: "left top",
description: `Worked with the NYC Administration for Child Services and to create a resources for foster children aging out of the system. Interviewed users who were formerly in the foster care system and created digital resources around job search, scholarships, and housing assistance.`,
},
{
_id: "waypost",
title: "Waypost: Web App",
thumbnailUrl: "/images/waypost-web.png",
thumbnailPosition: "left center",
description:
"In the Waypost web app, we reimagined how to make invoicing more intuitive and effective for the freelancers struggling to get paid on time. We redesigned invoicing work like an inbox, decreasing the number of clicks required to request payment and intelligently identifying which clients have overdue bills.",
},
{
_id: "ibmresearchcrm",
title: "IBM Research: CRM",
thumbnailUrl: "./images/compass.png",
thumbnailPosition: "left top",
description: `The Compass was originally developed as a standalone catalog of IBM Research projects. Over time, it expanded to become the central platform for managing client visits to the flagship innovation lab. Over two years it processed over 400 clients.\n\nI started this project as a way to distribute information about IBM Research projects around the world. As we continued operations in our innovation lab, we began to receive a much higher volume of visit requests and needed to process them systematically.\n\nAs tool lead, I regularly worked with our team and other internal stakeholders to map out requirements, develop features, and deploy them for use.`,
},
{
_id: "sentiment",
title: "Twitter Sentiment Analysis",
thumbnailUrl: "./images/sentiment.png",
thumbnailPosition: "right center",
description: `Created a small personal project that used sentiment analysis and probability theory to discover positive and negative influencers on Twitter.`,
},
{
_id: "sarmapper",
title: "Search and Rescue: Mapping",
thumbnailUrl: "./images/sarmapper.png",
thumbnailPosition: "left center",
description:
"Helps rescuers visualize probability models of lost person behavior. Used by dozens of search and rescue teams for briefings and planning operations, including state emergency management agencies.",
},
{
_id: "neutrogena",
title: "Neutrogena",
thumbnailUrl: "./images/neutrogena.jpg",
description: `Create an interactive retail display for Neutrogena that detected which products were picked up and delivered relevant information.`,
},
{
_id: "news-nlp",
title: "News Analytics",
thumbnailUrl: "./images/news/timeline.png",
thumbnailPosition: "left top",
description: `Created for an IBM challenge to integate Watson services. The application pulled scraped news articles and analyzed the natural language to visualize information across timeline, map, and entity relationships. `,
},
{
_id: "geovis",
title: "Location History Visualization",
thumbnailUrl: "./images/gps.png",
thumbnailPosition: "left center",
description: `Personal project that compiled and visualized my Google Maps location history across half a decade.`,
},
{
_id: "harrypotter",
title: "Harry Potter Fan Website",
thumbnailUrl: "./images/harrypotter.png",
thumbnailPosition: "top center",
description: `Created a Harry Potter fan website when I was 10 years old. Featured realistic simulations of several literary scenes.`,
},
],
};

export default data;
8 changes: 0 additions & 8 deletions src/pages/Home/HomePage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,7 @@ function HomePage({
return (
<div className="home-page">
{loadBackground ? <Background /> : null}
<CSSTransition
mountOnEnter
unmountOnExit
in={isLoaded}
timeout={2000}
classNames="fade-in-up"
>
<Header />
</CSSTransition>
{loadPortfolio ? null : <div className="home-page__header__spacer" />}
<CSSTransition
mountOnEnter
Expand Down
5 changes: 2 additions & 3 deletions src/pages/Home/components/Header/Header.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,12 @@
}

.home__header__text {
max-width: 600px;
max-width: 800px;
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: justify;
line-height: 1.45em;
font-size: calc(10px + 2vmin);
font-size: calc(18px + 1vmin);
font-family: "Merriweather", "Helvetica Neue", Helvetica, sans-serif;
}

Expand Down
20 changes: 16 additions & 4 deletions src/pages/Home/components/Header/Header.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from "react";
import { motion } from "framer-motion";
import "./Header.css";

class Header extends React.Component {
Expand Down Expand Up @@ -34,20 +35,31 @@ class Header extends React.Component {
return (
<header className="home__header">
<div className="home__header__text">
<div className="home__header__profile">
<motion.div
className="home__header__profile"
initial={{ opacity: 0, y: 40 }}
viewport={{ once: true }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, ease: "easeOut" }}
>
<img
src="./images/profile-photo.jpg"
className="home__header__profile__photo"
alt="Ryan Villanueva"
/>
</div>
<div>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
viewport={{ once: true }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2, ease: "easeOut" }}
>
Ryan Villanueva is a full stack software engineer in New York City
with over {yearsExperienceText} years of professional experience
leading technical projects and teams. He graduated from Wharton and
worked at IBM Research's innovation lab before moving on to
venture-backed startups.
</div>
</motion.div>
</div>
</header>
);
Expand Down
21 changes: 14 additions & 7 deletions src/pages/Home/components/Portfolio/Portfolio.jsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
import React from 'react';
import PortfolioItem from './PortfolioItem';
import './portfolio.css';
import React from "react";
import PortfolioItem from "./PortfolioItem";
import "./portfolio.css";
import { motion } from "framer-motion";

function Portfolio({items, openProjectById}) {
function Portfolio({ items, openProjectById }) {
return (
<div className="portfolio flex-container">
{items.map(item => <PortfolioItem openProjectById={openProjectById} key={item._id} item={item} />)}
</div>
<motion.div className="portfolio flex-container">
{items.map((item) => (
<PortfolioItem
openProjectById={openProjectById}
key={item._id}
item={item}
/>
))}
</motion.div>
);
}

Expand Down
34 changes: 25 additions & 9 deletions src/pages/Home/components/Portfolio/PortfolioItem.jsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,33 @@
import React from 'react';
import React from "react";
import { motion } from "framer-motion";

function PortfolioItem({item, openProjectById}) {
const thumbnailStyle = item.thumbnailUrl ? {
backgroundImage: `url(${item.thumbnailUrl})`,
backgroundPosition: item.thumbnailPosition || undefined
} : null;
function PortfolioItem({ item, openProjectById, motionVariants }) {
const thumbnailStyle = item.thumbnailUrl
? {
backgroundImage: `url(${item.thumbnailUrl})`,
backgroundPosition: item.thumbnailPosition || undefined,
}
: null;
return (
<div className="portfolio__item flex-cell" onClick={() => openProjectById(item._id)}>
<div className="portfolio__item__thumbnail flex-item" style={thumbnailStyle}>
<motion.div
className="portfolio__item flex-cell"
onClick={() => openProjectById(item._id)}
whileHover={{
scale: 0.97,
transition: {
duration: 0.2,
ease: "easeInOut",
},
}}
>
<div
className="portfolio__item__thumbnail flex-item"
style={thumbnailStyle}
>
<div className="portfolio__item__thumbnail__overlay"></div>
</div>
<div className="portfolio__item__text">{item.title}</div>
</div>
</motion.div>
);
}

Expand Down
5 changes: 0 additions & 5 deletions src/pages/Home/components/Portfolio/portfolio.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

.portfolio {
padding: 32px 56px;
display: flex;
Expand Down Expand Up @@ -51,13 +50,9 @@
opacity: 0;
}



.portfolio__item__text {
position: absolute;
bottom: 6px;
color: rgb(96, 96, 96);
font-weight: 300;
font-size: 0.85em;
text-transform: uppercase;
}
Loading

0 comments on commit 6fa078c

Please sign in to comment.