const introTiles = [ { id: 1, size: "wide", content: ( <div style={{ display: "flex", flexDirection: "column", justifyContent: "flex-start", alignItems: "flex-start", textAlign: "left", width: "100%", height: "100%", }}> <h2>Hello, I’m Dylan Dalal</h2> <p>Welcome to my web development portfolio!</p> </div> ), }, { id: 2, size: "tall", content: ( <blockquote> I build websites with clear, coherent messaging and a strong focus on brand identity. </blockquote> ), }, { id: 3, size: "square", content: <img src={reactLogo} alt="React" />, }, { id: 4, size: "square", content: <img src={framer} alt="Framer" />, }, function WebCard({ project }) { const revealRef = useReveal(); return ( <article ref={revealRef} className="web-card"> <div className="web-card__preview"> {project.embed ? ( <SitePreview src={project.embed} title={project.name} width={400} height={225} /> ) : ( <div className="scroll-preview"> <img src={kofskyShot} alt={`${project.name} preview`} /> </div> )} </div> <div className="web-card__body"> <div className="tech-logos" style={{ justifyContent: "left" }}> {project.tech.map( (t) => logos[t] && ( <img key={t} src={logos[t]} alt={t} className="tech-logo" style={{ opacity: ".8", maxWidth: "70px" }} /> ) )} </div> <h2 className="web-card__title" style={{ margin: "0", padding: "0" }}> {project.name} </h2> <p className="web-card__desc">{project.description}</p> <a href={project.url} target="_blank" rel="noopener noreferrer" className="web-card__link" > Visit live site → </a> </div> </article> ); }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque lorem nec mi hendrerit efficitur eu a sapien. Mauris scelerisque tempus sem. Donec non gravida ante, eu lobortis tortor. Pellentesque dapibus enim ornare massa pharetra, id finibus tellus vehicula. Integer in nisl id augue dignissim blandit at vel justo. Praesent elit magna, pellentesque at mattis vitae, laoreet sit amet tellus. Vestibulum interdum arcu volutpat risus mattis tempor. Nam consequat mi quis neque convallis lacinia ut eget eros. Proin euismod, justo et condimentum laoreet, odio dolor ullamcorper enim, at dignissim ante erat sed ligula. Duis condimentum ligula quis dui egestas bibendum. In eget commodo sapien. Praesent eget mollis orci. Nunc posuere elit purus, non vehicula turpis venenatis sit amet. Etiam rhoncus malesuada dictum. Praesent venenatis purus ut sapien scelerisque ornare. Cras auctor sodales risus non vulputate. Quisque sed justo non ante faucibus tempor. Nam est mi, ultrices sit amet molestie molestie, hendrerit volutpat elit. Morbi accumsan congue purus fringilla faucibus. Pellentesque id lorem iaculis, fermentum nibh at, placerat ligula. Curabitur placerat interdum finibus. Nulla posuere hendrerit faucibus. Aliquam et mauris congue, volutpat quam eget, congue quam. Curabitur ante elit, fermentum non pharetra sit amet, pharetra eget elit. Vivamus semper turpis nec mi congue pretium. Ut malesuada tincidunt ante sit amet porttitor. Morbi ut vestibulum neque. Sed posuere, odio sed accumsan bibendum, nisi ex scelerisque dui, ut auctor lorem ligula ac risus. Sed dictum condimentum semper. Curabitur urna tellus, luctus eu convallis non, venenatis nec eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

BUILT FOR YOUR BRAND
BUILT FOR YOUR BRAND
BUILT FOR YOUR BRAND
BUILT FOR YOUR BRAND
BUILT FOR YOUR BRAND
BUILT FOR YOUR BRAND
BUILT FOR YOUR BRAND
BUILT FOR YOUR BRAND
BUILT FOR YOUR BRAND
BUILT FOR YOUR BRAND

Dylan
Dalal