From 8432167a4cb5738104c4da1f285ceddec42e9836 Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Thu, 30 May 2024 11:27:15 -0400 Subject: [PATCH 1/9] feat: svgs for home page --- src/components/svg/Circle.tsx | 23 +++++++ src/components/svg/FootPrint.tsx | 112 +++++++++++++++++++++++++++++++ src/components/svg/MiniMaps.tsx | 36 ++++++++++ 3 files changed, 171 insertions(+) create mode 100644 src/components/svg/Circle.tsx create mode 100644 src/components/svg/FootPrint.tsx create mode 100644 src/components/svg/MiniMaps.tsx diff --git a/src/components/svg/Circle.tsx b/src/components/svg/Circle.tsx new file mode 100644 index 0000000..4f08a38 --- /dev/null +++ b/src/components/svg/Circle.tsx @@ -0,0 +1,23 @@ +import React from "react" + +interface CircleProps { + color: string +} + +const CircleIcon: React.FC = ({ color }) => { + return ( + <> + + + + + ) +} + +export default CircleIcon diff --git a/src/components/svg/FootPrint.tsx b/src/components/svg/FootPrint.tsx new file mode 100644 index 0000000..29a8428 --- /dev/null +++ b/src/components/svg/FootPrint.tsx @@ -0,0 +1,112 @@ +import React from "react" + +const FootPrint = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default FootPrint diff --git a/src/components/svg/MiniMaps.tsx b/src/components/svg/MiniMaps.tsx new file mode 100644 index 0000000..b17c3f7 --- /dev/null +++ b/src/components/svg/MiniMaps.tsx @@ -0,0 +1,36 @@ +import React from "react" + +const MiniMapSvg = () => { + return ( + + + + + + + + + + + + + ) +} + +export default MiniMapSvg From 1829e5f93c1cd21f405e1b93405d64a4e72bee72 Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Thu, 30 May 2024 11:27:31 -0400 Subject: [PATCH 2/9] feat: add optional lede to layout --- src/layouts/Layout.astro | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 1b26747..e3eb699 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -6,9 +6,10 @@ import Footer from "../components/Footer.astro" interface Props { title: string description: string + lede?: string } -const { title, description } = Astro.props +const { title, description, lede } = Astro.props --- @@ -16,15 +17,16 @@ const { title, description } = Astro.props - +
-
+

{title}

-
+ {lede &&

{lede}

}
+
From 654f3f8fb73faba6ccbb852385a302516aec734c Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Thu, 30 May 2024 11:27:47 -0400 Subject: [PATCH 3/9] feat: home page --- src/pages/index.astro | 66 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 65 insertions(+), 1 deletion(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 479eedb..063bfd2 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,5 +1,69 @@ --- import Layout from "../layouts/Layout.astro" +import CircleIcon from "../components/svg/Circle" +import MiniMapSvg from "../components/svg/MiniMaps" +import FootPrint from "../components/svg/FootPrint" --- - + + +
+
+

+ The Mexican Migration Project (MMP) was created in 1982 by an interdisciplinary team of + researchers to further our understanding of the complex process of Mexican migration to the + United States. The project is a binational research effort co-directed by Jorge Durand, + professor of Social Anthropology at the University of Guadalajara (Mexico), and Douglas S. + Massey, professor of Sociology and Public Affairs, with a joint appointment in the Woodrow + Wilson School, at Princeton University (US). +

+

+ Since its inception, the MMP's main focus has been to gather social as well as economic + information on Mexican-US migration. The data collected has been compiled in a comprehensive + database that is available to the public free of charge for research and educational + purposes through this web-site. +

+

+ The MMP is a unique source of data that enables researchers to track patterns and processes + of contemporary Mexican immigration to the United States. The project is a + multi-disciplinary research effort that generates public use data on the characteristics and + behavior of Mexican migrants. +

+
+
+

Project Aims

+
+
+ +

Gather and maintain high quality data on Mexican migration to the US

+
+
+ +

Make data public and confidential

+
+
+ +

Investigate the evolving transnational dynamics of migration

+
+
+
+
+

Where are we located?

+

+ The MMP has offices, in Mexico, at the Departamento de Investigacion sobre Movimientos + Sociales of the University of Guadalajara and, in the United States, at the Office of + Population Research of Princeton University. To contact our offices in Mexico or the United + States, please contact us at the following addresses or email us: +

+
+ +
+
+
+ From 1ec70a73549603961ad814820dc1a4f8101194b5 Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Fri, 31 May 2024 09:34:18 -0400 Subject: [PATCH 4/9] feat: animate footprints --- src/components/svg/FootPrint.tsx | 346 ++++++++++++++++++++++++++----- 1 file changed, 298 insertions(+), 48 deletions(-) diff --git a/src/components/svg/FootPrint.tsx b/src/components/svg/FootPrint.tsx index 29a8428..5e8400b 100644 --- a/src/components/svg/FootPrint.tsx +++ b/src/components/svg/FootPrint.tsx @@ -11,100 +11,350 @@ const FootPrint = () => { > + fill="none" + > + + + + fill="none" + > + + + + {/* Foot 5 */} + fill="none" + > + + + + fill="none" + > + + + + {/* Foot 9 */} + fill="none" + > + + + + fill="none" + > + + + + {/* Foot 3 */} + fill="none" + > + + + + fill="none" + > + + + + {/* Foot 7 */} + fill="none" + > + + + + fill="none" + > + + + + {/*Foot 11*/} + fill="none" + > + + + + fill="none" + > + + + + {/*Foot 2*/} + fill="none" + > + + + + fill="none" + > + + + + {/*Foot 6*/} + fill="none" + > + + + + fill="none" + > + + + + {/*Foot 10*/} + fill="none" + > + + + + fill="none" + > + + + + {/*Foot 4*/} + fill="none" + > + + + + fill="none" + > + + + + {/*Foot 8*/} + fill="none" + > + + + + fill="none" + > + + + + {/*Foot 12*/} + fill="none" + > + + + + fill="none" + > + + + ) } From 82a86130b6908726d2f86909469db4b28f9d59c5 Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Tue, 4 Jun 2024 11:51:48 -0400 Subject: [PATCH 5/9] chore: install radix hover card --- package-lock.json | 32 ++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 33 insertions(+) diff --git a/package-lock.json b/package-lock.json index abdb73e..cd12e43 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@astrojs/tailwind": "^5.1.0", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", + "@radix-ui/react-hover-card": "^1.0.7", "@radix-ui/react-icons": "^1.3.0", "@staticcms/core": "^4.1.2", "@staticcms/proxy-server": "^4.0.4", @@ -2975,6 +2976,37 @@ } } }, + "node_modules/@radix-ui/react-hover-card": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.0.7.tgz", + "integrity": "sha512-OcUN2FU0YpmajD/qkph3XzMcK/NmSk9hGWnjV68p6QiZMgILugusgQwnLSDs3oFSJYGKf3Y49zgFedhGh04k9A==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.5", + "@radix-ui/react-popper": "1.1.3", + "@radix-ui/react-portal": "1.0.4", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-icons": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz", diff --git a/package.json b/package.json index 9386ca4..76ba8b7 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@astrojs/tailwind": "^5.1.0", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", + "@radix-ui/react-hover-card": "^1.0.7", "@radix-ui/react-icons": "^1.3.0", "@staticcms/core": "^4.1.2", "@staticcms/proxy-server": "^4.0.4", From 71de217a6530b70af0974111ed6bbb83cfe8f17d Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Tue, 4 Jun 2024 11:52:14 -0400 Subject: [PATCH 6/9] feat: minimap svgs show contact info on hover --- src/components/HoverCard.tsx | 49 +++++++++++++++++++++++++++++++++ src/components/svg/MiniMaps.tsx | 42 ++++++++++++++++++++++++++-- src/pages/index.astro | 2 +- src/styles/global.css | 27 ++++++++++++++++++ 4 files changed, 117 insertions(+), 3 deletions(-) create mode 100644 src/components/HoverCard.tsx diff --git a/src/components/HoverCard.tsx b/src/components/HoverCard.tsx new file mode 100644 index 0000000..1b9e603 --- /dev/null +++ b/src/components/HoverCard.tsx @@ -0,0 +1,49 @@ +import React from "react" +import * as HoverCard from "@radix-ui/react-hover-card" + +interface HoverCardItemProps { + image?: string + alt?: string + title: string + content: string | React.ReactNode + footer?: string | React.ReactNode + children: React.ReactNode +} + +const HoverCardItem: React.FC = ({ + children, + alt, + title, + content, + footer, + image, +}) => { + return ( + + + + {children} + + + + +
+ {image && alt && {alt}} +
+

{title}

+
{content}
+ {footer && ( +
+

{footer}

+
+ )} +
+
+ + + + + ) +} + +export default HoverCardItem diff --git a/src/components/svg/MiniMaps.tsx b/src/components/svg/MiniMaps.tsx index b17c3f7..a563bc0 100644 --- a/src/components/svg/MiniMaps.tsx +++ b/src/components/svg/MiniMaps.tsx @@ -1,4 +1,5 @@ import React from "react" +import HoverCardItem from "../HoverCard.tsx" const MiniMapSvg = () => { return ( @@ -18,7 +19,34 @@ const MiniMapSvg = () => { stroke-width="3" mask="url(#path-1-inside-1_65_1451)" /> - + +

Depto. de Estudios Sobre Movimientos Sociales (DESMOS)

+

Universidad de Guadalajara

+

Av. Maestros y Alcalde, Puerta 1

+

Guadalajara, CP 44269

+

Jalisco, México

+ + } + footer={ + <> +
+
+

Tel:

+

(52.33) 38.19.33.27

+
+
+

Fax:

+

(52.33) 38.19.33.28

+
+
+ + } + children={} + > + @@ -28,7 +56,17 @@ const MiniMapSvg = () => { stroke-width="3" mask="url(#path-3-inside-2_65_1451)" /> - + +

Office of Population Research

+

Princeton University

+

Princeton, NJ 08544

+ + } + children={} + > ) } diff --git a/src/pages/index.astro b/src/pages/index.astro index 063bfd2..2ff3028 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -62,7 +62,7 @@ import FootPrint from "../components/svg/FootPrint" States, please contact us at the following addresses or email us:

- +
diff --git a/src/styles/global.css b/src/styles/global.css index 1e11748..1810692 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -124,4 +124,31 @@ @apply gap-1; @apply pt-6; } + + .HoverCardContent { + @apply bg-white; + @apply rounded; + @apply p-5; + @apply w-72; + @apply duration-300; + @apply ease-in-out; + box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px; + will-change: transform, opacity; + } + + .HoverCardContent[data-side='top'] { + animation-name: slideDownAndFade; + } + + .HoverCardContent[data-side='right'] { + animation-name: slideLeftAndFade; + } + + .HoverCardContent[data-side='bottom'] { + animation-name: slideUpAndFade; + } + + .HoverCardContent[data-side='left'] { + animation-name: slideRightAndFade; + } } \ No newline at end of file From 6f96f16a2dae194ec9eba8d1fa38b0f6e6a6ea3b Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Tue, 4 Jun 2024 11:57:33 -0400 Subject: [PATCH 7/9] feat: add udg logo --- public/images/udg.gif | Bin 0 -> 1965 bytes src/components/svg/MiniMaps.tsx | 2 ++ 2 files changed, 2 insertions(+) create mode 100644 public/images/udg.gif diff --git a/public/images/udg.gif b/public/images/udg.gif new file mode 100644 index 0000000000000000000000000000000000000000..4fbb1233a1f6ee827b334ec6263774e04459c3dc GIT binary patch literal 1965 zcmV;e2U7S)Nk%w1VMYK>0K@HYuzar?dHy=k7kQ@WyOR|{rmQFWoTxX zQ_pHXua#rLsb%Kawq8+c`St3}w}hL8WY)x(ew$ZDJ#634r|IFwersjJpg;208uSw6uf$%V--7R(;yI?Q|!!1n=kl(FK;&JBC zF$qBg&QC=w5KtTr5CngHh$0Xj76=6#7mHSjhz=ML4iX%g7#);v2%!)jQxO;s8Uz-R z5TTziT^<(>6A=*|9SjTw1ridyzPtqtxB(Fp77heEiCqpB5gH5t-Os1sN6?gu{b}qb3PN{$ZQiZ7S8N;)K>oAfaPZh!rpdKoBEB0XlTj_!DPU z=r}aNbjjV-D-Aw7;p*YJ*cC(A1}R^d6%bWuHgN_dIQiq?!ZIC!Tp74V$@A_M|-%>&yBIKoOCd1Dn-9AqG23kXbbRzw#@ zVPN4%-4w(? z1i8t;&IB50VqpSxja7mL+(DHX0~zdiB|Nl&rPq>#TmeBl8W8tLSXPqI;WP|HDM0|> ziC}>Q^=#+eA0F^{g%%FE2wIyZ1n_`4H8n}1Qs5L7z=Bu++7gTgut)*{6EtvxKj)N5 z;)mD}g%G4k5MZN=R#lLIr4Ts4TLy9VqDuz#O))|yA&QE`6;LLCBsZ6QfN7d05iu)m z92Brm0ReE~0HY*z!$1S-EHOd<1}>V$50wFoCy+m3ox#8Z1?F@Z1}kd1tw`7uKrOE( zW`n^23)H*70h;2dkE#V!Uk3ykbID9Xy zfmY1kb{QnSfW`|n&;ZH@Oq1-vA=BCw$pZkrvBLm#$u2nVqP#WDPD4!xmsBS)!MNH; z!0^&yk3B%s3O~T5+zp?+^vy)2?L#KpV9oWwgm>AC%=8j&@75jvM`#i&byb1e8!r&R zUfbT4qCc7MbN9vvK!kz+QR`g$k;V--4Hh^47(f998?5||1Q{?+E}d^Y%N^=-Hy~!q z8*K2p0>lfyfnT9cUOVW~Ju!v{!_}h!@2Xc^0P)youR!cD($2U6{%Wvc4+tbBDCI)? zKGFjlXsc+X@|`Eu%9~rg_=XLGG++WClL4mkH97zF4rc<80QNY@!R>wR zfHn)Av@nrEA4I@c0$>330LZ@%W^jfYwBbm+w*U=54Tu`JpAS_uvk_WQRl>ub27=c? z3KW1nA*>g}@MSFjDfWOjObWo;-UdMG2#^9vdm~V~S38?=Og8mV)ItK#h!3cdW+=0u zH#oq>4P;<@8z@l4!bmTUiAFi&^TA|9u$u`6vW}N zmlhN#)eW;|~UWfykIqe3Z(Ll>MAhRw_1C~&; zCKePbHr0jya~eh(nFa=FfC3mUgmxSyC5m~;oTx`5EZYuMAT%uoFfyb0MBptO5Ty)& zQKlm)%ACM=K!>Rm5w%R8J~RbWZ_o~e-V3llNj22rJ`73QSGj0zvD=q(6GO{^D7{c%* zxe&{XX$7rjW31~EPKmg@)r(%3#g|6ZL&1A_wxhIynqbKgfuA)XXn4yTz5pvX00iJ^ z95dq>EC96;rj~2Bwd~RW;H5-(V0yU??rjgSD@shDk-|-`YG?F`4n>E8(2Xtyd3Q4D zO1C~L0T^u`WZ{_Z5}>=!h=4hpwuK9Lx4Y(z&nqNJAL90Ky?kf~eCPX$5C8x>QH)M_ literal 0 HcmV?d00001 diff --git a/src/components/svg/MiniMaps.tsx b/src/components/svg/MiniMaps.tsx index a563bc0..91aaf26 100644 --- a/src/components/svg/MiniMaps.tsx +++ b/src/components/svg/MiniMaps.tsx @@ -21,6 +21,8 @@ const MiniMapSvg = () => { />

Depto. de Estudios Sobre Movimientos Sociales (DESMOS)

From 743c73c75b848cecb9204322032ec565a6b75ee8 Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Tue, 4 Jun 2024 11:59:39 -0400 Subject: [PATCH 8/9] refactor: children to trigger --- src/components/HoverCard.tsx | 6 +++--- src/components/svg/MiniMaps.tsx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/HoverCard.tsx b/src/components/HoverCard.tsx index 1b9e603..f7861f1 100644 --- a/src/components/HoverCard.tsx +++ b/src/components/HoverCard.tsx @@ -7,11 +7,11 @@ interface HoverCardItemProps { title: string content: string | React.ReactNode footer?: string | React.ReactNode - children: React.ReactNode + trigger: React.ReactNode } const HoverCardItem: React.FC = ({ - children, + trigger, alt, title, content, @@ -22,7 +22,7 @@ const HoverCardItem: React.FC = ({ - {children} + {trigger} diff --git a/src/components/svg/MiniMaps.tsx b/src/components/svg/MiniMaps.tsx index 91aaf26..d4a92e5 100644 --- a/src/components/svg/MiniMaps.tsx +++ b/src/components/svg/MiniMaps.tsx @@ -46,7 +46,7 @@ const MiniMapSvg = () => { } - children={} + trigger={} > @@ -67,7 +67,7 @@ const MiniMapSvg = () => {

Princeton, NJ 08544

} - children={} + trigger={} > ) From 5acae49f28508a262fb664e6d03a0573510a867a Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Tue, 4 Jun 2024 13:34:30 -0400 Subject: [PATCH 9/9] fix: tailwind props match full class name --- src/components/svg/Circle.tsx | 6 +++--- src/pages/index.astro | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/svg/Circle.tsx b/src/components/svg/Circle.tsx index 4f08a38..c913f48 100644 --- a/src/components/svg/Circle.tsx +++ b/src/components/svg/Circle.tsx @@ -1,10 +1,10 @@ import React from "react" interface CircleProps { - color: string + styling: string } -const CircleIcon: React.FC = ({ color }) => { +const CircleIcon: React.FC = ({ styling }) => { return ( <> = ({ color }) => { width="48" height="48" viewBox="0 0 24 24" - className={`fill-${color}`} + className={styling} > diff --git a/src/pages/index.astro b/src/pages/index.astro index 2ff3028..46f42d0 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -40,15 +40,15 @@ import FootPrint from "../components/svg/FootPrint"

Project Aims

- +

Gather and maintain high quality data on Mexican migration to the US

- +

Make data public and confidential

- +

Investigate the evolving transnational dynamics of migration