Merge branch 'main' of https://github.com/StephenJLu/stephenjlu

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';

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;
+  }
+
+  }
+
+
+

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<HTMLElement>;
+}
+
+interface ResearchComponentProps extends ResearchProps {
+  visible: boolean;  
+}
+
+const ResearchText = ({ visible, titleId }: { visible: boolean; titleId: string }) => (
+  <>  
+    <Heading className={styles.title} data-visible={visible} level={3} weight={'light'} id={titleId}>Crime Scene Investigator and Firearms Examiner</Heading>
+    <Table className={styles.table} data-visible={visible}>
+  <TableRow className={styles.row} data-visible={visible}>
+    <TableCell>
+      <Heading className={styles.title} data-visible={visible} level={4} weight={'regular'}>
+        Previous Employers
+      </Heading>
+    </TableCell>
+    <TableCell>
+      <List className={styles.description} data-visible={visible} size="l" as={'ul'}>
+        <ListItem><Link secondary href={'https://www.sdsheriff.gov'}>San Diego County Sheriff's Department</Link></ListItem>
+        <ListItem><Link secondary href={'https://gfjc.fiu.edu/'}>FIU Global Forensic Science and Justice Center</Link></ListItem>
+        <ListItem><Link secondary href={'https://www.azdps.gov/'}>Arizona Department of Public Safety</Link></ListItem>
+        <ListItem><Link secondary href={'https://www.oag.ca.gov/'}>California Department of Justice</Link></ListItem>
+      </List>
+    </TableCell>
+  </TableRow>
+  <TableRow className={styles.row} data-visible={visible}>
+    <TableCell>
+      <Heading className={styles.title} data-visible={visible} level={4} weight={'regular'}>
+        Forensic Experience
+      </Heading>
+    </TableCell>
+    <TableCell>
+      <List className={styles.description} data-visible={visible} size="l" as={'ul'}>
+        <ListItem>Forensic Biology</ListItem>
+        <ListItem>Forensic Firearms Analysis</ListItem>
+        <ListItem>Crime Scene Investigation</ListItem>
+        <ListItem>Bloodstain Pattern Analysis</ListItem>
+        <ListItem>Trajectory Analysis</ListItem>
+        <ListItem>Crime Scene and Shooting Incident Reconstruction</ListItem>
+      </List>
+    </TableCell>
+  </TableRow>
+  <TableRow className={styles.row} data-visible={visible}>
+    <TableCell>
+      <Heading className={styles.title} data-visible={visible} level={4} weight={'regular'}>
+        Testimony Experience
+      </Heading>
+    </TableCell>
+    <TableCell>
+      <Heading className={styles.title} data-visible={visible} level={5} weight={'thin'}>
+        Qualified Subjects
+      </Heading>
+      <List className={styles.description} data-visible={visible} size="l" as={'ul'}>
+        <ListItem>Forensic Biology</ListItem>
+        <ListItem>Forensic Firearms Analysis</ListItem>
+        <ListItem>Crime Scene Investigation and Reconstruction</ListItem>
+      </List>
+      <Heading className={styles.title} data-visible={visible} level={5} weight={'thin'}>
+        Levels of Court
+      </Heading>
+      <List className={styles.description} data-visible={visible} size="l" as={'ul'}>
+        <ListItem><b>State</b>: Arizona and California</ListItem>
+        <ListItem><b>Federal</b>: U.S. District Court for the Central District of California</ListItem>
+      </List>
+    </TableCell>
+  </TableRow>
+</Table>
+      <Heading className={styles.title} data-visible={visible} level={4} weight={'regular'}><br />Detailed Professional History</Heading>
+      <Text className={styles.description} data-visible={visible} size={'l'} as={'p'}>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.</Text>
+<Text className={styles.description} data-visible={visible} size={'l'} as={'p'}>
+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).</Text>
+<Text className={styles.description} data-visible={visible} size={'l'} as={'p'}>
+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.</Text>
+<Text className={styles.description} data-visible={visible} size={'l'} as={'p'}>
+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.</Text>
+  </>
+
+);
+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 (
+    <Section       
+      className={styles.research}
+      onFocus={() => setFocused(true)}
+      onBlur={() => setFocused(false)}  
+      as="section"
+      ref={sectionRef}
+      id={id}
+      aria-labelledby={titleId}
+      tabIndex={-1}      
+      >        
+        <Transition in={visible || focused} timeout={0} unmount={false}>
+          {({ visible, nodeRef }: { visible: boolean; nodeRef: React.RefObject<HTMLDivElement> }) => (
+            <>
+            <div className={styles.backgroundImage} data-visible={visible} ref={nodeRef}>
+        <Image                    
+          src={bannerFull}          
+          srcSet={`${banner} 768w, ${bannerFull} 1440w`}
+          placeholder={bannerPlaceholder}
+          width={1487}
+          height={800}
+          sizes={`(max-width: 768px) 100vw, 1440px`}          
+          loading="eager" 
+          alt="Research banner"                    
+        />
+        <div className={styles.gradient} data-visible={visible}/>
+      </div>
+
+
+              <div className={styles.tag} aria-hidden>
+                <Divider                  
+                  notchWidth="50%"
+                  notchHeight="8px"
+                  collapsed={!visible}
+                  collapseDelay={1000}
+                />
+                <InViewport>
+                {(inViewport) => {
+                  useEffect(() => {
+                    if (inViewport) {
+                      setIsInViewport(true);
+                    }
+                  }, [inViewport]);
+                  return (
+                    <div className={styles.tagText} data-visible={visible}>
+                      {isInViewport && (
+                        <DecoderText
+                          text={'Forensic Experience'}
+                          delay={1600}
+                        />
+                      )}
+                    </div>
+                  );
+                }}
+                </InViewport>            
+              </div>
+                <ResearchText visible={visible} titleId={titleId} />          
+          </>
+        )}        
+      </Transition>
+    </Section>
+  );
+};