98 lines
No EOL
3.8 KiB
TypeScript
98 lines
No EOL
3.8 KiB
TypeScript
import { sociallinks } from "@/shared/config/social-links/links";
|
||
import styles from "@/static/hero/hero.module.css";
|
||
|
||
import FlashlightText from "./FlashlightText";
|
||
|
||
const socialIcon = (label: string) => {
|
||
switch (label.trim().toLowerCase()) {
|
||
case "telegram":
|
||
return (
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
width="20"
|
||
height="20"
|
||
fill="currentColor"
|
||
aria-hidden="true"
|
||
>
|
||
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
|
||
</svg>
|
||
);
|
||
case "github":
|
||
return (
|
||
<svg
|
||
viewBox="0 0 16 16"
|
||
width="20"
|
||
height="20"
|
||
fill="currentColor"
|
||
aria-hidden="true"
|
||
>
|
||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A5.98 5.98 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||
</svg>
|
||
);
|
||
default:
|
||
return null;
|
||
}
|
||
};
|
||
|
||
const Hero = () => {
|
||
return (
|
||
<section className={styles.hero} data-scroll-section>
|
||
<div className={`cont-header ${styles.inner}`}>
|
||
<div className={styles.left}>
|
||
<div className={styles.info}>
|
||
<span className={styles.role}>
|
||
<span className={styles.dot} />
|
||
веб-разработчик
|
||
</span>
|
||
|
||
<h1 className={styles.name} data-cursor-hover>
|
||
<FlashlightText text="Egorov Nikita" />
|
||
</h1>
|
||
|
||
<p className={styles.desc}>
|
||
Создаю современные, быстрые и продуманные веб-сайты и
|
||
веб-приложения под ключ.
|
||
</p>
|
||
|
||
<div className={styles.actions}>
|
||
<a href="#projects" className={styles.button}>
|
||
Смотреть проекты
|
||
</a>
|
||
|
||
<ul className={styles.socials}>
|
||
{sociallinks.map((link) => (
|
||
<li key={link.href}>
|
||
<a
|
||
href={link.href}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className={styles.social}
|
||
aria-label={link.label}
|
||
>
|
||
{socialIcon(link.label)}
|
||
</a>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className={styles.right}>
|
||
<div className={styles.visual}>
|
||
<span className={styles.index} aria-hidden="true">
|
||
<i>портфолио</i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className={styles.hint} aria-hidden="true">
|
||
листай
|
||
<span className={styles.hintLine} />
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default Hero; |