diff --git a/app/routes/home/forensics.tsx b/app/routes/home/forensics.tsx index 7e78807..9d135f6 100644 --- a/app/routes/home/forensics.tsx +++ b/app/routes/home/forensics.tsx @@ -1,7 +1,6 @@ import React, { useState, useEffect } from 'react'; import { Section, Heading, Text, Table, TableRow, TableCell, DecoderText, Transition, - Divider, InViewport, Image, List, ListItem, Link } from '../../components/Components'; - import { media } from '../../utils/style' + Divider, InViewport, Image, List, ListItem, Link } from '../../components/Components'; import styles from './forensics.module.css'; import banner from 'app/static/images/forensics.svg'; import bannerFull from 'app/static/images/forensicsfull.svg'; diff --git a/app/routes/home/research.module.css b/app/routes/home/research.module.css new file mode 100644 index 0000000..1ff579b --- /dev/null +++ b/app/routes/home/research.module.css @@ -0,0 +1,222 @@ +.research { + position: relative; + width: 100vw; + min-height: 100vh; + padding-top: var(--spaceXL); + padding-bottom: var(--space2XL); + justify-content: center; + + @media (--mediaTablet) { + padding-top: 50px; + padding-right: 80px; + padding-left: 160px; + height: auto; + margin-top: 40px; + margin-bottom: 20px; + } + + @media (--mediaMobile) { + margin-top: 0; + padding-top: var(--space4XL); + overflow-x: hidden; + } + + @media (--mediaMobile), (--mediaMobileLS) { + padding-right: var(--spaceOuter); + padding-left: var(--spaceOuter); + } + + @media (max-width: 820px) and (max-height: 420px) { + padding-right: var(--space4XL); + padding-left: var(--space4XL); + } +} + + .backgroundImage { + background-color: var(--background); + position: absolute; + inset: 0; + width: 100%; + max-height: 100vh; + overflow: hidden; + z-index: -1; + opacity: 0; + transition: opacity var(--durationXL) ease var(--durationL); + + &[data-visible='true'] { + opacity: 1; + } + + & img{ + position: absolute; + background-position: bottom center; + background-size: cover; + opacity: .6; + filter: blur(3px); + } +} + + + .gradient { + position: absolute; + inset: 0; + z-index: 0; + width: 100vw; + height: 100vh; + background: linear-gradient( + to bottom, + rgba(0, 0, 0, 1) 0vh, + rgba(0, 0, 0, 0) 20vh, + rgba(0, 0, 0, 1) 100vh, + rgba(0, 0, 0, 0) 120vh + ); + + @media (--mediaTablet) { + background: linear-gradient( + to bottom, + rgba(0, 0, 0, 1) 0vh, + rgba(0, 0, 0, 0) 10vh, + rgba(0, 0, 0, 1) 60vh, + rgba(0, 0, 0, 0) 80vh + ); + } + + @media (--mediaMobile) { + background: linear-gradient( + to bottom, + rgba(0, 0, 0, 1) 0vh, + rgba(0, 0, 0, 0) 5vh, + rgba(0, 0, 0, 1) 25vh, + rgba(0, 0, 0, 0) 40vh + ); + } + + opacity: 0; + transition: opacity var(--durationXL) ease var(--durationL); + + &[data-visible='true'] { + opacity: 1; + } + +} + +.title { + margin-bottom: var(--spaceL); + opacity: 0; + transition: opacity var(--durationXL) ease var(--durationM); + + &[data-visible='true'] { + opacity: 1; + } +} + +.description { + margin-bottom: var(--spaceXL); + opacity: 0; + transition: opacity var(--durationXL) ease var(--durationL); + + &[data-visible='true'] { + opacity: 1; + } +} + +.tag { + margin-top: 220px; + margin-bottom: 40px; + display: grid; + grid-template-columns: 30% 1fr; + gap: 12px; + align-items: center; + max-width: 100%; + + @media (--mediaTablet) { + margin-top: 30px; + } +} + +.tagText { + font-size: var(--fontSizeBodyS); + font-weight: var(--fontWeightMedium); + color: var(--primary); + opacity: 0; + transition-property: opacity; + transition-timing-function: var(--bezierFastoutSlowin); + transition-duration: var(--durationM); + transition-delay: 1.5s; + + @media (--mediaUseMotion) { + transition-property: opacity, transform; + transform: translate3d(calc(var(--spaceM) * -1), 0, 0); + } + + &[data-visible='true'] { + transform: none; + opacity: 1; + } +} + +.image { + position: relative; + width: 100%; +} + +.svg { + position: absolute; + right: 0; + bottom: 0; + transform: translate3d(50%, -20%, 0); + height: 100%; + z-index: var(--zIndex3); + opacity: 0; + transition: opacity var(--durationM) ease var(--durationL); + fill: var(--textTitle); + + &[data-visible='true'] { + opacity: 1; + } +} + +.button { + opacity: 0; + transition: opacity var(--durationXL) ease var(--durationL); + + &[data-visible='true'] { + transform: none; + opacity: 1; + } +} + +.table { + width: 100%; + border-collapse: collapse; + margin-bottom: var(--spaceXL); + opacity: 0; + transition: opacity var(--durationXL) ease var(--durationS); + + &[data-visible='true'] { + opacity: 1; + } +} + + .row { + --rowBorder: 1px solid color-mix(in lab, var(--text) 20%, transparent); + border-top: var(--rowBorder); + opacity: 0; + transition: opacity var(--durationXL) ease var(--durationS); + + &:last-child { + border-bottom: var(--rowBorder); + } + + .head & { + border-top: 0; + } + + &[data-visible='true'] { + opacity: 1; + } + + } + + + diff --git a/app/routes/home/research.tsx b/app/routes/home/research.tsx new file mode 100644 index 0000000..44a0aa8 --- /dev/null +++ b/app/routes/home/research.tsx @@ -0,0 +1,160 @@ +import React, { useState, useEffect } from 'react'; +import { Section, Heading, Text, Table, TableRow, TableCell, DecoderText, Transition, + Divider, InViewport, Image, List, ListItem, Link } from '../../components/Components'; +import styles from './research.module.css'; +import banner from 'app/static/images/research.svg'; +import bannerFull from 'app/static/images/researchfull.svg'; +import bannerPlaceholder from 'app/static/images/research-placeholder.svg'; + +interface ResearchProps { + id?: string; + sectionRef?: React.RefObject; +} + +interface ResearchComponentProps extends ResearchProps { + visible: boolean; +} + +const ResearchText = ({ visible, titleId }: { visible: boolean; titleId: string }) => ( + <> + Crime Scene Investigator and Firearms Examiner + + + + + Previous Employers + + + + + San Diego County Sheriff's Department + FIU Global Forensic Science and Justice Center + Arizona Department of Public Safety + California Department of Justice + + + + + + + Forensic Experience + + + + + Forensic Biology + Forensic Firearms Analysis + Crime Scene Investigation + Bloodstain Pattern Analysis + Trajectory Analysis + Crime Scene and Shooting Incident Reconstruction + + + + + + + Testimony Experience + + + + + Qualified Subjects + + + Forensic Biology + Forensic Firearms Analysis + Crime Scene Investigation and Reconstruction + + + Levels of Court + + + State: Arizona and California + Federal: U.S. District Court for the Central District of California + + + +
+
Detailed Professional History + Throughout his forensic career, Stephen has analyzed over a thousand cases and participated in hundreds of death investigations, including homicides, suicides, officer-involved shootings, autopsies, and custodial deaths. Most recently, he served for ten years as a Criminalist with the San Diego County Sheriff’s Department, specializing in Forensic Biology, Forensic Firearms Analysis, and Crime Scene Investigation and Reconstruction. + +Stephen also spent six years as a contract assessor and trainer with the National Forensic Science Technology Center (now FIU Global Forensic and Justice Center), where he performed DNA laboratory audits and taught courses on DNA amplification, likelihood ratios, and population statistics. Prior to that, Stephen worked with the Arizona Department of Public Safety, performing casework in Forensic Biology, and the California Department of Justice’s Richmond DNA Lab, where he contributed to the FBI’s Combined DNA Index System (CODIS). + +Over his career, Stephen has completed more than 2,000 hours of professional training in areas such as Forensic Biology, Forensic Firearms Analysis, Trajectory Analysis, Bloodstain Pattern Analysis, and courtroom testimony. He has testified as an expert witness in superior courts in Arizona and California, and in federal court for the U.S. District Court for the Central District of California. Stephen's courtroom experience has been noted for his ability to explain complex scientific concepts in an understandable and engaging way for juries and attorneys alike. + +In addition to his forensic science work, Stephen served as the Regional Director South for the California Association of Criminalists (CAC), where he organized regional study groups and hosted presentations by experts, including a keynote address by Jeff Udvarhelyi, an Escondido Police Department Child Abuse Detective, on a significant child abuse case. As the Lead Webmaster for the CAC, he enhanced the organization’s public presence by overhauling its website for better communication and engagement. + + +); +interface ResearchComponentProps extends ResearchProps { + visible: boolean;} + +export const Research = ({ id, visible, sectionRef }: ResearchComponentProps) => { + const [focused, setFocused] = useState(false); + const [isInViewport, setIsInViewport] = useState(false); + const titleId = `${id}-title`; + + return ( +
setFocused(true)} + onBlur={() => setFocused(false)} + as="section" + ref={sectionRef} + id={id} + aria-labelledby={titleId} + tabIndex={-1} + > + + {({ visible, nodeRef }: { visible: boolean; nodeRef: React.RefObject }) => ( + <> +
+ Research banner +
+
+ + +
+ + + {(inViewport) => { + useEffect(() => { + if (inViewport) { + setIsInViewport(true); + } + }, [inViewport]); + return ( +
+ {isInViewport && ( + + )} +
+ ); + }} + +
+ + + )} + +
+ ); +}; diff --git a/app/static/images/forensics-placeholder.svg b/app/static/images/forensics-placeholder.svg index dbf7526..f790ab4 100644 --- a/app/static/images/forensics-placeholder.svg +++ b/app/static/images/forensics-placeholder.svg @@ -1,9 +1,9 @@ - - + + - - + + - + diff --git a/app/static/images/forensics.svg b/app/static/images/forensics.svg index 1e77e4a..8068cad 100644 --- a/app/static/images/forensics.svg +++ b/app/static/images/forensics.svg @@ -1,9 +1,9 @@ - - + + - - + + - + diff --git a/app/static/images/forensicsfull.svg b/app/static/images/forensicsfull.svg index 9365319..c95e5ca 100644 --- a/app/static/images/forensicsfull.svg +++ b/app/static/images/forensicsfull.svg @@ -1,9 +1,9 @@ - - + + - - + + - +