body.portfolio-home * { box-sizing: content-box; } body .col { margin-left: 0; margin-right: 0; } body.portfolio-home main.main { background-color: var(--bg-dynamic-secondary); } body.portfolio-home .post-content > *, body.portfolio-home .footer-info { max-width: var(--max-width-wide); } body.portfolio-home .footer-info { padding-left: var(--general-page-padding); padding-right: var(--general-page-padding);} body.portfolio-home .is-style-portfolio-caption-1 { font-size: var(--font-size-p-caption-1); color: var(--text-color-secondary); } body.portfolio-home .is-style-wide { max-width: var(--max-width-wide) !important; margin: var(--grid-gap-xlarge) auto var(--grid-gap-xlarge); } body.portfolio-home .is-style-expanded { max-width: var(--max-width-expanded); } body.portfolio-home [class*="work-group-"] { max-width: var(--max-width-fullwidth); } body.portfolio-home .is-style-wide.greetings { display: flex; gap: var(--content-spacing-medium) !important; justify-content: center; align-items: flex-end; margin-bottom: 0 !important; } .portfolio-home .greetings .animoji { width: 68px; height: 68px; border-radius: 68px; border: 1px solid var(--border-card-edge-dynamic-secondary); box-sizing: border-box; padding: 0; background-image: url('https://media.chiawei.com/images/chiawei_animoji@light.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; } @media (prefers-color-scheme: dark) { .portfolio-home .greetings .animoji { background-image: url('https://media.chiawei.com/images/chiawei_animoji@dark.jpg'); } } .portfolio-home .greetings .message.wrapper { padding: 14px 28px; background-color: var(--cyan-50); border-radius: 32px; flex-shrink: 0; flex-grow: 0; } .portfolio-home .greetings .message.wrapper::before { content: ''; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCA0MCAzOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQwIDBDNDAgMjAuOTg2OCAyMi45ODY4IDM4IDIgMzhIMS41OTI3N0M0LjYyOTY5IDM1LjAyNSA2Ljk4OTkyIDMxLjM2MjUgOC40Mjk2OSAyNy4yNDhDMTAuMDAxIDIyLjc1NzYgMTAuMDAxIDE3LjE3MTYgMTAuMDAxIDZWMEg0MFoiIGZpbGw9IiMxMTkyRTgiLz4KPC9zdmc+"); background-repeat: no-repeat; background-size: 40px 38px; width: 40px; height: 38px; position: absolute; left: -10px; bottom: 0; z-index: 0; } .portfolio-home .greetings .message .text { font-size: 32px; color: var(--text-color-cta-reversed); white-space: nowrap; } .portfolio-home .greetings .message .text { line-height: var(--line-height-paragraph-en-m); } @media (prefers-reduced-motion: no-preference) { html { animation: enableScroll 2600ms steps(1, end) forwards; } body.portfolio-home .is-style-wide.greetings { margin-top: calc( ( 100vh - 64px - 64px ) / 2 - 72px ); opacity: 0; animation: opening-fade-in 480ms ease 300ms both, opening-jump 750ms ease 2s both, opening-fade-out 160ms ease 2200ms forwards; } body.admin-bar.portfolio-home .is-style-wide.greetings { margin-top: calc( ( 100vh - 64px - 64px - var(--wp-admin--admin-bar--height) ) / 2 - 72px ); } .portfolio-home .greetings + * { animation: opening-fade-in 240ms ease 2300ms both, opening-move-up 560ms ease 2300ms both; } .portfolio-home .greetings + * + * { animation: opening-fade-in 240ms ease 2500ms both, opening-move-up 560ms ease 2500ms both; } .portfolio-home .greetings + * + * + * { animation: opening-fade-in 240ms ease 2700ms both, opening-move-up 560ms ease 2700ms both; } .portfolio-home .greetings + * + * + * + * { animation: opening-fade-in 240ms ease 2900ms both, opening-move-up 560ms ease 2900ms both; } .portfolio-home .greetings + * + * + * + * + * { animation: opening-fade-in 240ms ease 3100ms both, opening-move-up 560ms ease 3100ms both; } } @media (prefers-reduced-motion: reduce) { .portfolio-home .greetings .animoji video { display: none; } } @keyframes enableScroll { from { overflow: hidden; } to { overflow: unset; } } @keyframes opening-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes opening-fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } :root { --opening-jump-mt: -72px; } @keyframes opening-jump { to { margin-top: var(--opening-jump-mt); } } @keyframes opening-move-up { from { transform: translateY(120px); } to { transform: translateY(0); } } .portfolio-home .profile-basic { margin-bottom: var(--section-spacing-bottom); row-gap: 60px; } .portfolio-home .profile-basic h1 { font-weight: 400; margin-top: 80px; margin-bottom: 0; } html:lang(en-US) .portfolio-home .profile-basic h1 { line-height: var(--line-height-title-en); } html:lang(zh-CN) .portfolio-home .profile-basic h1 { line-height: var(--line-height-title-zh); } .portfolio-home .profile-basic h1 .line { display: block; color: var(--text-color-tertiary); font-weight: 300; will-change: color, font-weight; } @media screen and (max-width: 520px) { .portfolio-home .profile-basic h1 .line:not(:first-child) { margin-top: var(--content-spacing-xsmall); } } @keyframes toPrimary { to { color: var(--text-color-primary); font-weight: 400; } } @media (prefers-reduced-motion: reduce) { .portfolio-home .profile-basic h1 .line { color: var(--text-color-primary); font-weight: 400; } } @media (prefers-reduced-motion: no-preference) { .portfolio-home .profile-basic h1 .line { animation: toPrimary 480ms ease forwards; } .portfolio-home .profile-basic h1 .line:nth-child(1) { animation-delay: 3.5s; } .portfolio-home .profile-basic h1 .line:nth-child(2) { animation-delay: 4.5s; } .portfolio-home .profile-basic h1 .line:nth-child(3) { animation-delay: 5.5s; } } html:lang(en-US) .portfolio-home .profile-basic h1 + p { line-height: var(--line-height-paragraph-en-s); } html:lang(zh-CN) .portfolio-home .profile-basic h1 + p { line-height: var(--line-height-paragraph-zh-s); } .portfolio-home .profile-basic .info-stack { padding-top: var(--content-spacing-large); row-gap: var(--grid-gap-none) !important; gap: var(--content-spacing-medium) !important; } .portfolio-home .profile-basic .avatar { -webkit-user-select: none; user-select: none; } .portfolio-home .profile-basic .avatar * { cursor: default; pointer-events: none; } .portfolio-home .info-stack .name-and-pronoun { align-items: baseline; column-gap: var(--content-spacing-small) !important; flex-wrap: wrap; } .portfolio-home .info-stack .name-and-pronoun h1.name { font-size: var(--font-size-40); font-weight: 400; font-style: italic; margin: 0; margin-left: -2px; line-height: 1; } .portfolio-home .info-stack .name-and-pronoun .pronoun { color: var(--text-color-tertiary); } .portfolio-home .info-stack h2.title { font-size: var(--font-size-28); margin: var(--content-spacing-xsmall) 0 0 0; width: 100%; } .portfolio-home .info-stack .experience-year { font-size: var(--font-size-p-secondary); font-style: italic; color: var(--text-color-secondary); margin-top: 4px; margin-bottom: 4px; } html:lang(en-US) .portfolio-home .info-stack .experience-year { line-height: var(--line-height-paragraph-en-l); } html:lang(zh-CN) .portfolio-home .info-stack .experience-year { line-height: var(--line-height-paragraph-zh-l); } .portfolio-home .info-stack .field-tags { margin-top: var(--content-spacing-small); gap: var(--content-spacing-xsmall) !important; flex-wrap: wrap; } .portfolio-home .info-stack .field-tags > p { background-color: var(--bg-dynamic-secondary); border-radius: 40px; padding: var(--content-spacing-xsmall) var(--content-spacing-small); } html:lang(en-US) .portfolio-home .info-stack .field-tags > p { line-height: var(--line-height-paragraph-en-l); } html:lang(zh-CN) .portfolio-home .info-stack .field-tags > p { line-height: var(--line-height-paragraph-zh-l); } .portfolio-home p.chevron a::after { content: ''; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMiAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMzQyNzcgNi41QzkuMzQyNzcgNi41ODY1OSA5LjMyNDU0IDYuNjY4NjIgOS4yODgwOSA2Ljc0NjA5QzkuMjU2MTggNi44MTkwMSA5LjIwODMzIDYuODg3MzcgOS4xNDQ1MyA2Ljk1MTE3TDMuNzMwNDcgMTIuMjQ5QzMuNjA3NDIgMTIuMzcyMSAzLjQ1NzAzIDEyLjQzMzYgMy4yNzkzIDEyLjQzMzZDMy4xNjUzNiAxMi40MzM2IDMuMDYwNTUgMTIuNDA2MiAyLjk2NDg0IDEyLjM1MTZDMi44NjkxNCAxMi4yOTY5IDIuNzkzOTUgMTIuMjIxNyAyLjczOTI2IDEyLjEyNkMyLjY4NDU3IDEyLjAzNDggMi42NTcyMyAxMS45MyAyLjY1NzIzIDExLjgxMTVDMi42NTcyMyAxMS42NDI5IDIuNzE2NDcgMTEuNDk0OCAyLjgzNDk2IDExLjM2NzJMNy44MTE1MiA2LjVMMi44MzQ5NiAxLjYzMjgxQzIuNzE2NDcgMS41MDUyMSAyLjY1NzIzIDEuMzU3MSAyLjY1NzIzIDEuMTg4NDhDMi42NTcyMyAxLjA2OTk5IDIuNjg0NTcgMC45NjUxNjkgMi43MzkyNiAwLjg3NDAyM0MyLjc5Mzk1IDAuNzc4MzIgMi44NjkxNCAwLjcwMzEyNSAyLjk2NDg0IDAuNjQ4NDM4QzMuMDYwNTUgMC41OTM3NSAzLjE2NTM2IDAuNTY2NDA2IDMuMjc5MyAwLjU2NjQwNkMzLjQ1NzAzIDAuNTY2NDA2IDMuNjA3NDIgMC42MjU2NTEgMy43MzA0NyAwLjc0NDE0MUw5LjE0NDUzIDYuMDQ4ODNDOS4yMDgzMyA2LjExMjYzIDkuMjU2MTggNi4xODMyNyA5LjI4ODA5IDYuMjYwNzRDOS4zMjQ1NCA2LjMzMzY2IDkuMzQyNzcgNi40MTM0MSA5LjM0Mjc3IDYuNVoiIGZpbGw9IiMxMTkyRTgiLz4KPC9zdmc+Cg==); width: 12px; height: 12px; display: inline-block; position: relative; margin-left: 4px; } .portfolio-home .orgs > div { padding: var(--content-spacing-large); background-color: var(--bg-dynamic-primary); gap: var(--grid-gap-large) !important; margin-top: var(--section-spacing-top); margin-bottom: var(--section-spacing-bottom); border-radius: 16px; } .portfolio-home .orgs > div > div:first-child { padding-bottom: var(--content-spacing-medium); border-bottom: 1px solid var(--border-on-bg-dynamic-secondary); } .portfolio-home .orgs > div > div.org-logo-wall { column-gap: 40px; row-gap: var(--grid-gap-large); } @media (prefers-color-scheme: dark) { .portfolio-home .orgs .org-logo-wall svg { filter: brightness(0) invert(1); } } .portfolio-home .value { margin-bottom: var(--content-spacing-xlarge); } .portfolio-home .info-stack p.is-style-portfolio-highlight { font-size: var(--font-size-p-highlight-2) !important; } html:lang(en-US) .portfolio-home .info-stack p.is-style-portfolio-highlight { line-height: var(--line-height-paragraph-en-m); } html:lang(zh-CN) .portfolio-home .info-stack p.is-style-portfolio-highlight { line-height: var(--line-height-paragraph-zh-m); } .portfolio-home .info-stack p.is-style-default { font-size: var(--font-size-p) !important; } html:lang(en-US) .portfolio-home .info-stack p.is-style-default { line-height: var(--line-height-paragraph-en-l); } html:lang(zh-CN) .portfolio-home .info-stack p.is-style-default { line-height: var(--line-height-paragraph-zh-l); } .portfolio-home [class*="link-wrapper-block"] { display: contents; padding: 0; } .portfolio-home .work.is-style-wide { background-color: var(--bg-dynamic-secondary); overflow: hidden; } .portfolio-home .work.is-style-wide .content > div { padding: var(--content-spacing-large); margin: 0; height: 100%; flex-direction: column; justify-content: space-between; align-items: stretch; gap: var(--content-spacing-medium) !important; box-sizing: border-box; } .portfolio-home .work.is-style-wide .content .header h4.tag { font-size: var(--font-size-p-caption-1); margin: 0 auto 0 0 !important; } .portfolio-home .work.is-style-wide .content .body { gap: var(--content-spacing-xsmall) !important; } .portfolio-home .work.is-style-wide .content .body .intro { font-size: var(--font-size-28); font-weight: bold; } html:lang(en-US) .portfolio-home .work.is-style-wide .content .body .intro { line-height: var(--line-height-paragraph-en-m); } html:lang(zh-CN) .portfolio-home .work.is-style-wide .content .body .intro { line-height: var(--line-height-paragraph-zh-m); } .portfolio-home .work.is-style-wide .content .body .subtitle { font-size: var(--font-size-heading-3); } html:lang(en-US) .portfolio-home .work.is-style-wide .content .body .subtitle { line-height: var(--line-height-paragraph-en-m); } html:lang(zh-CN) .portfolio-home .work.is-style-wide .content .body .subtitle { line-height: var(--line-height-paragraph-zh-m); } .portfolio-home .work:not(.testimonial) { transition: all 240ms ease 20ms; } .portfolio-home .work:not(.testimonial):hover { transform: translateY(-8px); box-shadow: 0 16px 16px -2px rgba(0, 0, 0, 0.05); } .portfolio-home .work.is-style-wide .content .footer { padding: 0; gap: var(--content-spacing-medium) !important; } .portfolio-home .work .content .footer .btn, .portfolio-home .work-group-connect p.btn { font-size: var(--font-size-btn-l-title); font-weight: 700; color: var(--text-color-primary); padding: var(--content-spacing-xsmall) var(--content-spacing-medium); border-radius: 4px; background-color: var(--bg-dynamic-primary); transition: background-color 160ms ease; } .portfolio-home [class*="link-wrapper-block"]:hover .work .footer .btn { background-color: var(--bg-dynamic-primary-hover); transition: none; } .portfolio-home .work .content .footer .skill-tags { column-gap: var(--content-spacing-small) !important; row-gap: 0 !important; } .portfolio-home .work .content .footer .skill-tags p { font-size: var(--font-size-p-caption-1); color: var(--text-color-tertiary); } .portfolio-home .work .content .footer .skill-tags p::before { content: '#'; margin-right: 2px; } .portfolio-home .work .featured-image img { transition: transform 640ms ease; will-change: transform; } .portfolio-home .work:hover .featured-image img { transform: scale3d(1.05, 1.05, 1); } .portfolio-home .work.is-style-wide .featured-image > div { aspect-ratio: 1 / 1; min-height: 100%; padding: 0; } .portfolio-home .work.is-style-default { background-color: var(--bg-dynamic-primary); border-radius: 16px; overflow: hidden; } .portfolio-home .work.is-style-default.column-full { grid-column: span 6; } .portfolio-home .work.is-style-default .content { padding: var(--content-spacing-medium); flex-grow: 1; } .portfolio-home .work.is-style-default .content .body { gap: var(--content-spacing-xsmall); } .portfolio-home .work.is-style-default.testimonial { background-color: var(--bg-dynamic-secondary); border: 1px solid var(--border-card-edge-dynamic-secondary); border-radius: 16px; } .portfolio-home .work.is-style-default.testimonial .content { padding: var(--grid-gap-large); align-items: stretch; flex-grow: 1; min-height: 320px; } .portfolio-home .work.is-style-default.testimonial .content .body { flex-grow: 1; justify-content: space-evenly; align-items: center; text-align: center; gap: var(--content-spacing-large) !important; } .portfolio-home .work.is-style-default.testimonial .content .body .quote { font-size: var(--font-size-p-highlight-3); font-style: italic; color: var(--text-color-secondary); max-width: var(--max-width-default); } html:lang(en-US) .portfolio-home .work.is-style-default.testimonial .content .body .quote { line-height: var(--line-height-paragraph-en-m); } html:lang(zh-CN) .portfolio-home .work.is-style-default.testimonial .content .body .quote { line-height: var(--line-height-paragraph-zh-m); } .portfolio-home .work.is-style-default.testimonial .content .body .quote strong { color: var(--text-color-primary); } .portfolio-home .work.is-style-default.testimonial .content .body .referrer { font-size: var(--font-size-p-caption-2); color: var(--text-color-secondary); } html:lang(en-US) .portfolio-home .work.is-style-default.testimonial .content .body .referrer { line-height: var(--line-height-paragraph-en-l); } html:lang(zh-CN) .portfolio-home .work.is-style-default.testimonial .content .body .referrer { line-height: var(--line-height-paragraph-zh-l); } .portfolio-home .work.is-style-default.testimonial .content .footer { align-items: center; } .portfolio-home [class*="work-group-"] { margin-bottom: var(--content-spacing-xlarge); } .portfolio-home .project-group-secondary, .portfolio-home .project-group-tertiary { margin-top: var(--grid-gap-xlarge); margin-bottom: var(--grid-gap-xlarge); gap: var(--grid-gap-xlarge); } .portfolio-home .project-group-tertiary > a > div.work { grid-column: span 2; } .portfolio-home .work.is-style-default { margin-top: 0; margin-bottom: 0; } .portfolio-home .work.is-style-default .featured-image { padding: 0; width: 100%; min-height: 144px; aspect-ratio: 2 / 1; } .portfolio-home .work.is-style-default .content .header h4.tag { font-size: var(--font-size-p-caption-2); margin-top: 0; margin-bottom: var(--content-spacing-small); } .portfolio-home .work.is-style-default .content .body { min-height: 80px; gap: var(--content-spacing-xsmall) !important; } .portfolio-home .work.is-style-default .content .body .type { font-size: var(--font-size-p-caption-2); font-weight: 600; color: var(--text-color-tertiary); } .portfolio-home .work.is-style-default .content .body .intro { font-size: var(--font-size-heading-3); font-weight: bold; } .portfolio-home .project-group-tertiary .work.is-style-default .content .body .intro { font-size: var(--font-size-heading-4); } html:lang(en-US) .portfolio-home .work.is-style-default .content .body .intro { line-height: var(--line-height-paragraph-en-m); } html:lang(zh-CN) .portfolio-home .work.is-style-default .content .body .intro { line-height: var(--line-height-paragraph-zh-m); } .portfolio-home .work.is-style-default .content .body .subtitle { font-size: var(--font-size-heading-4); } .portfolio-home .project-group-tertiary .work.is-style-default .content .body .subtitle { font-size: var(--font-size-p-caption-2); } html:lang(en-US) .portfolio-home .work.is-style-default .content .body .subtitle { line-height: var(--line-height-paragraph-en-m); } html:lang(zh-CN) .portfolio-home .work.is-style-default .content .body .subtitle { line-height: var(--line-height-paragraph-zh-m); } .portfolio-home .work.is-style-default .content .footer { gap: var(--content-spacing-small) !important; padding: var(--content-spacing-large) 0 0 0; } .portfolio-home .work.is-style-default .content .footer .btn, .portfolio-home .work-group-connect p.btn { font-size: var(--font-size-btn-m-title); background-color: var(--bg-dynamic-secondary); padding-left: var(--content-spacing-small); padding-right: var(--content-spacing-small); } .portfolio-home [class*="link-wrapper-block"]:hover .work.is-style-default .footer .btn, .portfolio-home .work-group-connect .info-stack p.btn:hover { background-color: var(--bg-dynamic-primary-hover); } .portfolio-home .work.is-style-default .content .footer .skill-tags { column-gap: var(--content-spacing-xsmall) !important; } .portfolio-home .work.is-style-default .content .footer .skill-tags p { font-size: var(--font-size-p-caption-2); } .portfolio-home [class*="work-group-"] .value { padding-top: var(--section-spacing-top); } .portfolio-home [class*="work-group-"] .value .title h2 { font-weight: 400; margin: 0 auto 0 0 !important; font-size: var(--font-size-32); } .portfolio-home .work-group-gallery .visual-gallery { gap: var(--content-spacing-xsmall); margin-bottom: var(--content-spacing-small) !important; position: relative; } .portfolio-home .work-group-gallery .visual-gallery:not(.show-more)::after { content: ''; height: 50%; width: 100%; background: linear-gradient(0deg, var(--bg-dynamic-secondary), transparent); position: absolute; z-index: 5; display: block; bottom: 0; pointer-events: none; } .portfolio-home .work-group-gallery .visual-gallery > * { aspect-ratio: 1 / 1; min-height: unset; border-radius: 16px; } .portfolio-home .work-group-gallery .visual-gallery:not(.show-more) > *:nth-child(n+7) { display: none; } .portfolio-home .work-group-gallery .visual-gallery video { border-radius: 0; } .portfolio-home [class*="work-group-"] [class*="btn-"] a { padding: var(--content-spacing-small) var(--content-spacing-large); border-radius: 32px; font-size: var(--font-size-p-elevated); font-weight: bold; color: var(--text-color-cta-reversed) !important; background: var(--bg-dynamic-cta-cyan) !important; transition: background-color 160ms ease; box-sizing: border-box; min-width: 108px; } .portfolio-home .work-group-gallery .is-style-wide.btn-more { margin-top: var(--content-spacing-small) !important; } .portfolio-home [class*="work-group-"] [class*="btn-"] a:hover { background-color: var(--bg-dynamic-cta-cyan-hover) !important; transition: none; } .portfolio-home .work-group-project [class*="btn-"] a { margin-top: var(--content-spacing-large); } .portfolio-home .work-group-project .cta { padding-top: var(--content-spacing-large); border-top: 1px solid var(--border-portfolio-home-value-top); } .portfolio-home .work-group-project .cta p { font-size: var(--font-size-p-highlight-3); color: var(--text-color-secondary); } .portfolio-home .work-group-project .cta .btn-more a { margin-top: 0; } .portfolio-home .work-group-project .cta .is-style-wide.btn-more { margin-top: var(--content-spacing-medium) !important; } .portfolio-home .work-group-gallery .btn-with-chevron { position: relative; } .portfolio-home .work-group-gallery .btn-with-chevron > a { padding-right: calc( 32px + 12px + 20px ) !important; } .portfolio-home .work-group-gallery .btn-with-chevron > a::after { content: ''; display: block; width: 20px; height: 20px; position: absolute; right: 32px; top: calc( 50% - 10px ); background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5088 15.2773C10.0869 15.2773 9.7002 15.1045 9.34863 14.7588L2.84473 8.10547C2.71582 7.9707 2.61621 7.82422 2.5459 7.66602C2.48145 7.50195 2.44922 7.32617 2.44922 7.13867C2.44922 6.875 2.51074 6.6377 2.63379 6.42676C2.7627 6.20996 2.93262 6.04004 3.14355 5.91699C3.35449 5.78809 3.58887 5.72363 3.84668 5.72363C4.23926 5.72363 4.58496 5.87305 4.88379 6.17188L10.8691 12.333H10.1572L16.125 6.17188C16.4238 5.87305 16.7666 5.72363 17.1533 5.72363C17.4111 5.72363 17.6455 5.78809 17.8564 5.91699C18.0674 6.04004 18.2344 6.20996 18.3574 6.42676C18.4863 6.6377 18.5508 6.875 18.5508 7.13867C18.5508 7.51953 18.4189 7.8418 18.1553 8.10547L11.6602 14.7588C11.4844 14.9346 11.3027 15.0635 11.1152 15.1455C10.9277 15.2275 10.7256 15.2715 10.5088 15.2773Z' fill='white'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center; background-size: contain; } .portfolio-home .work-group-gallery .btn-with-chevron.up > a::after { background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.4912 5.72266C10.9131 5.72266 11.2998 5.89551 11.6514 6.24121L18.1553 12.8945C18.2842 13.0293 18.3838 13.1758 18.4541 13.334C18.5186 13.498 18.5508 13.6738 18.5508 13.8613C18.5508 14.125 18.4893 14.3623 18.3662 14.5732C18.2373 14.79 18.0674 14.96 17.8564 15.083C17.6455 15.2119 17.4111 15.2764 17.1533 15.2764C16.7607 15.2764 16.415 15.127 16.1162 14.8281L10.1309 8.66699L10.8428 8.66699L4.875 14.8281C4.57617 15.127 4.2334 15.2764 3.84668 15.2764C3.58887 15.2764 3.35449 15.2119 3.14355 15.083C2.93262 14.96 2.76563 14.79 2.64258 14.5732C2.51367 14.3623 2.44922 14.125 2.44922 13.8613C2.44922 13.4805 2.58105 13.1582 2.84473 12.8945L9.33984 6.24121C9.51563 6.06543 9.69727 5.93652 9.88477 5.85449C10.0723 5.77246 10.2744 5.72851 10.4912 5.72266Z' fill='white'/%3E%3C/svg%3E%0A"); } .portfolio-home .work-group-connect > div { background-color: var(--bg-dynamic-primary); padding: var(--content-spacing-large); box-sizing: border-box; border-radius: 16px; } .portfolio-home [class*="work-group-"] .title h3 { margin-top: 0; margin-bottom: var(--content-spacing-medium); font-size: var(--font-size-18); font-weight: bold; word-wrap: normal; } html:lang(en-US) .portfolio-home [class*="work-group-"] .title h3 { line-height: var(--line-height-paragraph-en-m); } html:lang(zh-CN) .portfolio-home [class*="work-group-"] .title h3 { line-height: var(--line-height-paragraph-zh-m); } .portfolio-home .work-group-connect .info-stack p:last-of-type { margin-bottom: var(--content-spacing-large); } .portfolio-home .work-group-connect .info-stack .contact { margin-left: -3px; column-gap: var(--content-spacing-small) !important; } .portfolio-home .work-group-connect .info-stack .contact a > div { margin-top: 0; margin-bottom: 0; } .portfolio-home .work-group-connect .info-stack .contact a svg { transition: fill 240ms ease 20ms; } .portfolio-home .work-group-connect .info-stack .contact a.linkedin:hover svg { fill: #0a66c2; } .portfolio-home .work-group-connect .info-stack .contact a.email:hover svg { fill: #0071e3; } @media only screen and ( max-width: 1280px ) { .portfolio-home .work.is-style-wide .content > div { padding-right: var(--content-spacing-large); } } @media only screen and ( max-width: 1024px ) { .portfolio-home .work.is-style-wide .content > div { padding-right: var(--content-spacing-large); } .portfolio-home .work.is-style-wide .content .body .intro { font-size: var(--font-size-20); } .portfolio-home .work.is-style-wide .content .footer { gap: var(--content-spacing-small) !important; } body.portfolio-home .is-style-wide { margin: var(--content-spacing-large) auto var(--content-spacing-large); } .portfolio-home .project-group-secondary, .portfolio-home .project-group-tertiary { margin-top: var(--content-spacing-large); gap: var(--content-spacing-large); } .portfolio-home .project-group-tertiary > a > div.work { grid-column: span 3; } } @media only screen and ( max-width: 736px ) { .portfolio-home .value { margin-bottom: var(--content-spacing-large); } .portfolio-home .work.is-style-wide, .portfolio-home .work.is-style-wide .content { order: 2; } .portfolio-home .work.is-style-wide .content .intro { font-size: var(--font-size-18); } .portfolio-home .work.is-style-wide .content .footer .btn { padding: var(--content-spacing-xsmall) var(--content-spacing-small); margin-top: var(--content-spacing-medium); } .portfolio-home .work.is-style-wide .featured-image { order: 1; } .portfolio-home .work.is-style-wide .featured-image > div { aspect-ratio: 2; } .portfolio-home .work.is-style-default .content .body .intro { font-size: var(--font-size-16); } .portfolio-home .work.is-style-default.testimonial .content { padding-top: var(--content-spacing-large); } .portfolio-home .work.is-style-default.testimonial .content .body .quote { font-size: var(--font-size-p); } .portfolio-home .work-group-connect .title, .portfolio-home .work-group-connect .info-stack { grid-column: span 6; } } @media only screen and ( max-width: 600px ) { .portfolio-home .project-group-secondary > a > div.work { grid-column: span 2; } .portfolio-home .project-group-tertiary > a > div.work { grid-column: span 6; } } @media only screen and ( max-width: 576px ) { .portfolio-home .profile-basic .avatar { grid-column: 1 / 4; } .portfolio-home .profile-basic .info-stack { grid-column: 1 / 7; padding-top: var(--content-spacing-small); } .portfolio-home .value .info-stack { grid-column: 2 / 7; } .portfolio-home .work.is-style-default.testimonial .content .body .quote { font-size: var(--font-size-p-highlight-3); } .portfolio-home .work.is-style-wide .content > div { padding: var(--content-spacing-medium); } .portfolio-home [class*="work-group-"]:last-of-type, .portfolio-home [class*="work-group-"]:last-of-type .value { margin-bottom: var(--content-spacing-large) !important; } } @supports (padding: max(0px)) { body.portfolio-home .col.post-content > *:not([class*="-fullbleed"]), body.portfolio-home .footer-info { padding-left: max(var(--general-page-padding), env(safe-area-inset-left)) !important; padding-right: max(var(--general-page-padding), env(safe-area-inset-right)) !important; } } @media screen and (min-width: 769px) { @supports (padding: max(0px)) { body.portfolio-home .col.post-content > header.local-nav { padding-right: max( calc( var(--general-page-padding) + 4px ), calc( env(safe-area-inset-right) + 16px ), env(safe-area-inset-right)) !important; } } } @media screen and (max-width: 768px) { @supports (padding: max(0px)) { header.local-nav p.has-theme-font-family { padding-left: max(var(--page-padding-wide), env(safe-area-inset-left)) !important; } body.portfolio-home .col.post-content > header.local-nav { padding-left: 0 !important; padding-right: max(0px, env(safe-area-inset-right)) !important; } } .portfolio-home .profile-basic h1 { font-size: var(--font-size-p-highlight-2); } body.portfolio-home .is-style-wide.greetings { gap: var(--content-spacing-small) !important; } .portfolio-home .greetings .animoji { width: 56px; height: 56px; min-height: 56px !important; flex-basis: 56px; } .portfolio-home .greetings .message.wrapper { padding: 12px 24px; } .portfolio-home .greetings .message.wrapper::before { width: 28px; height: 26.6px; background-size: 28px 26.6px; background-repeat: no-repeat; background-position: center bottom; left: -7px; } .portfolio-home .greetings .message .text { font-size: 24px; } } @media screen and ( max-width: 576px ) { @supports (padding: max(0px)) { header.local-nav p.has-theme-font-family { padding-left: max(var(--page-padding-default), env(safe-area-inset-left)) !important; } .col.post-content > header.local-nav { padding-left: 0 !important; padding-right: max(var(--page-padding-default), env(safe-area-inset-right)) !important; } } } @media screen and (min-width: 769px) { .portfolio-home .work-group-gallery .visual-gallery > *::after { width: 100%; height: 100%; background: linear-gradient( to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.2)) !important; position: absolute; display: flex; flex-direction: column; font-size: 14px; justify-content: flex-end; align-items: stretch; text-align: left; padding: 24px; color: white; box-sizing: border-box; z-index: 7; opacity: 0; transition: all 240ms ease 20ms; } .portfolio-home .work-group-gallery .visual-gallery > *:hover::after { opacity: 1; } } .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(1)::after { content: 'Strengthen brand trust by linking the brand logo with each industry to showcase customer success.'; } .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(2)::after { content: 'Help users monitor complex systems through a web-based dashboard with widgets and data visualizations.'; } .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(3)::after { content: 'Consistent icons with delightful motion.'; } .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(4)::after { content: 'Adapt layouts to information density to create effective enterprise-level product brochures.'; } .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(5)::after { content: 'Clarify complex concepts through animation and sound in product videos.'; } .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(6)::after { content: 'Differentiate from legacy vendors and signal a user-friendly brand through clear product stack diagrams.'; } .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(7)::after { content: 'Increase trust through customized palettes for finance, healthcare, and manufacturing.'; } .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(8)::after { content: 'Build brand trust through unified solution concept visuals across all touchpoints.'; } .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(9)::after { content: 'Convey technical depth by blending the brand green with scenario imagery in background visuals.'; } .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(10)::after { content: 'Keep the brand message focused through bold headlines and striking imagery.'; } .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(11)::after { content: 'Project a global brand presence through direct layouts, wide-angle images with landmarks, and concise headlines.'; } .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(12)::after { content: 'Maintain a consistent style across speakers and topics.'; } .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(13)::after { content: 'Show how HCI streamlines data centers and operations through contrast-based visuals.'; } .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(14)::after { content: 'Reinforce brand cues through a simulated boot sequence for the appliance.'; } .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(15)::after { content: 'Build intuitive app interfaces with SwiftUI.'; } .portfolio-home .work-group-gallery .visual-gallery:not(.show-more) > *:nth-child(4)::after { content: 'Adapt layouts to information density to create effective enterprise-level product brochures. (Click the button below to see the full view.)'; } .portfolio-home .work-group-gallery .visual-gallery:not(.show-more) > *:nth-child(5)::after { content: 'Clarify complex concepts through animation and sound in product videos. (Click the button below to see the full view.)'; } .portfolio-home .work-group-gallery .visual-gallery:not(.show-more) > *:nth-child(6)::after { content: 'Differentiate from legacy vendors and signal a user-friendly brand through clear product stack diagrams. (Click the button below to see the full view.)'; } html:lang(zh-CN) .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(1)::after { content: '通过结合品牌标志与各行业图像来展示客户成功，强化品牌信任。'; } html:lang(zh-CN) .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(2)::after { content: '通过带有小组件和数据可视化的 Web 仪表盘，帮助用户监控复杂系统。'; } html:lang(zh-CN) .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(3)::after { content: '以一致的图标和流畅的动效提升体验。'; } html:lang(zh-CN) .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(4)::after { content: '根据信息密度调整版式，打造高效的企业级产品彩页。'; } html:lang(zh-CN) .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(5)::after { content: '通过产品视频中的动画和音效，帮助理解复杂概念。'; } html:lang(zh-CN) .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(6)::after { content: '以清晰的产品栈架构图区别于传统厂商，塑造用户友好的品牌形象。'; } html:lang(zh-CN) .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(7)::after { content: '为金融、医疗、制造行业定制主题色，提升信任感。'; } html:lang(zh-CN) .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(8)::after { content: '在各个用户接触点使用具有一致性的解决方案概念图，以建立品牌信任。'; } html:lang(zh-CN) .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(9)::after { content: '在背景视觉中融合品牌绿色与场景化图像，传递技术深度。'; } html:lang(zh-CN) .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(10)::after { content: '醒目的标题与强烈的视觉效果，帮助聚焦品牌核心信息。'; } html:lang(zh-CN) .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(11)::after { content: '直观的版式、带地标的广角图片和简洁标题，帮助塑造国际化市场的品牌形象。'; } html:lang(zh-CN) .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(12)::after { content: '在不同演讲者和主题间保持一致的风格。'; } html:lang(zh-CN) .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(13)::after { content: '通过对比效果展示超融合如何简化机房与运维。'; } html:lang(zh-CN) .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(14)::after { content: '以模拟一体机开机动效强化品牌记忆点。'; } html:lang(zh-CN) .portfolio-home .work-group-gallery .visual-gallery > *:nth-child(15)::after { content: '使用 SwiftUI 构建直观的 app 界面。'; } html:lang(zh-CN) .portfolio-home .work-group-gallery .visual-gallery:not(.show-more) > *:nth-child(4)::after { content: '根据信息密度调整版式，打造高效的企业级产品彩页。（点击下方按钮查看全貌）'; } html:lang(zh-CN) .portfolio-home .work-group-gallery .visual-gallery:not(.show-more) > *:nth-child(5)::after { content: '通过产品视频中的动画和音效，帮助理解复杂概念。（点击下方按钮查看全貌）'; } html:lang(zh-CN) .portfolio-home .work-group-gallery .visual-gallery:not(.show-more) > *:nth-child(6)::after { content: '以清晰的产品栈架构图区别于传统厂商，塑造用户友好的品牌形象。（点击下方按钮查看全貌）'; }