Fix icons. Fix examples

components/Footer/Footer.module.css

@@ -8,31 +8,12 @@
   flex-direction: column;
 }
 
-.footer p {
-  font-size: 0.8rem;
-  font-weight: 400;
-}
-
+.footer p,
 .footer a {
   font-size: 0.8rem;
   font-weight: 400;
 }
 
-.logo {
-  display: inline-block;
-  margin-right: 4px;
-}
-
-.logo img {
-  height: 100%;
-}
-
-.ccLogo {
-  height: 14px;
-  margin-left: 3px;
-  vertical-align: text-bottom;
-}
-
 .ccLink {
   margin-right: 4px;
 }
@@ -41,3 +22,8 @@
   display: flex;
   align-items: center;
 }
+
+.gitLink img {
+  vertical-align: middle;
+  margin: 0 8px;
+}

components/Footer/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @next/next/no-img-element */
 import Image from 'next/image';
 import styles from './Footer.module.css';
 
@@ -7,15 +6,20 @@ export default (): JSX.Element => {
     <footer className={styles.footer}>
       <div>
         <p>
-          Powered by{' '}
-          <a href="https://github.com/4-life/4life.work" target="_blank" rel="noreferrer">
+          Powered by
+          <a
+            href="https://github.com/4-life/4life.work"
+            target="_blank"
+            rel="noreferrer"
+            className={styles.gitLink}
+          >
             <Image
-              src="/images/footer-logo.png"
+              src="/icons/logo.svg"
               alt="4life Logo"
               width={32}
               height={13}
               className={styles.logo}
-            />{' '}
+            />
             {process.env.version || '0.0.0'}
           </a>
         </p>
@@ -28,26 +32,6 @@ export default (): JSX.Element => {
           className={styles.ccLink}
         >
           License
-          <img
-            className={styles.ccLogo}
-            src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"
-            alt=""
-          />
-          <img
-            className={styles.ccLogo}
-            src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"
-            alt=""
-          />
-          <img
-            className={styles.ccLogo}
-            src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1"
-            alt=""
-          />
-          <img
-            className={styles.ccLogo}
-            src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1"
-            alt=""
-          />
         </a>
         <p>{new Date(Number(process.env.date) * 1000).getFullYear() || ''}</p>
       </div>

components/Home/Home.module.css

@@ -30,6 +30,12 @@
   text-align: right;
 }
 
+.titleLinks {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
 .header {
   position: absolute;
   top: 0;

components/Home/index.tsx

@@ -14,33 +14,35 @@ export default (): JSX.Element => {
       <h1 className={styles.title}>
         My name is <i>Pavel</i> <br /> I&apos;m Full-stack web developer from Kazakhstan
         <br />
-        <a href="mailto:ezmvib4nk@mozmail.com" title="Email me" rel="noreferrer">
-          <Image src="/images/email.png" alt="Email" width={28} height={20} />
-        </a>
-        <a
-          href="https://t.me/js4life"
-          title="Write me in Telegram"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <Image src="/images/telegram.png" alt="Telegram" width={25} height={25} />
-        </a>
-        <a
-          href="https://github.com/4-life/"
-          title="My Github Account"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <Image src="/images/github.png" alt="Github" width={25} height={25} />
-        </a>
-        <a
-          href="http://linkedin.com/in/js4life"
-          title="My Linkedin Account"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <Image src="/images/linkedin.png" alt="Linkedin" width={25} height={25} />
-        </a>
+        <div className={styles.titleLinks}>
+          <a href="mailto:ezmvib4nk@mozmail.com" title="Email me" rel="noreferrer">
+            <Image src="/icons/email.svg" alt="Email" width={25} height={25} />
+          </a>
+          <a
+            href="https://t.me/js4life"
+            title="Write me in Telegram"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <Image src="/icons/tg.svg" alt="Telegram" width={25} height={25} />
+          </a>
+          <a
+            href="https://github.com/4-life/"
+            title="My Github Account"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <Image src="/icons/git.svg" alt="Github" width={25} height={25} />
+          </a>
+          <a
+            href="http://linkedin.com/in/js4life"
+            title="My Linkedin Account"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <Image src="/icons/linkedin.svg" alt="Linkedin" width={25} height={25} />
+          </a>
+        </div>
       </h1>
     </main>
   );

components/Portfolio/Portfolio.module.css

@@ -68,10 +68,9 @@
   font-size: 80%;
 }
 
-.company-link {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.iconLink img {
+  vertical-align: middle;
+  margin-right: 8px;
 }
 
 @media screen and (max-width: 900px) {

components/Portfolio/index.tsx

@@ -14,7 +14,7 @@ export default (): JSX.Element => {
         <span className={styles.homeLink}>
           <Link href="/" passHref>
             <span className={styles.homeIcon}>
-              <Image src="/images/homeIcon.png" alt="Home" width={25} height={25} />
+              <Image src="/icons/home.svg" alt="Home" width={25} height={25} />
             </span>
             Home
           </Link>
@@ -34,46 +34,78 @@ export default (): JSX.Element => {
 
       <div className={styles.milestone}>
         <div className={styles.text}>
-          <p>Code examples of my work:</p>
+          <p>Work examples:</p>
           <p>
-            <a href="https://github.com/4-life/chat-io" target="_blank" rel="noreferrer">
-              Simple chat app
+            <a
+              href="https://github.com/4-life/chat-io"
+              target="_blank"
+              rel="noreferrer"
+              className={styles.iconLink}
+            >
+              <Image src="/icons/git.svg" alt="Github" width={20} height={20} />
+              Group chat app
             </a>
-            &nbsp;(Typescript, React, Redux-saga, Socket.io, CRA, MUI, tests)
+            &nbsp;(React, Socket.io, CRA, MUI, tests)
           </p>
           <p>
-            <a href="https://github.com/4-life/backend-ts" target="_blank" rel="noreferrer">
+            <a
+              href="https://github.com/4-life/backend-ts"
+              target="_blank"
+              rel="noreferrer"
+              className={styles.iconLink}
+            >
+              <Image src="/icons/git.svg" alt="Github" width={20} height={20} />
               Rest-Api service
             </a>
-            &nbsp;(Typescript, Express, PostgreSQL, Sequelize, tests)
+            &nbsp;(Express, PostgreSQL, Sequelize, tests)
           </p>
           <p>
-            <a href="https://github.com/4-life/4life.work" target="_blank" rel="noreferrer">
-              My Website
+            <a
+              href="https://github.com/4-life/storybook-boilerplate"
+              target="_blank"
+              rel="noreferrer"
+              className={styles.iconLink}
+            >
+              <Image src="/icons/git.svg" alt="Github" width={20} height={20} />
+              Storybook boilerplate
             </a>
-            &nbsp;(NextJS, React)
+            &nbsp;(Storybook, React, Sass)
           </p>
           <p>
-            <a href="https://github.com/4-life/ad-dashboard" target="_blank" rel="noreferrer">
-              AD Dashboard
+            <a
+              href="https://github.com/4-life/nft-marketplace"
+              target="_blank"
+              rel="noreferrer"
+              className={styles.iconLink}
+            >
+              <Image src="/icons/git.svg" alt="Github" width={20} height={20} />
+              NFT Marketplace
             </a>
-            &nbsp;(Typescript, Vite, React)
+            &nbsp;(React, Sass)
           </p>
           <p>
-            <a href="https://github.com/4-life/nft-marketplace" target="_blank" rel="noreferrer">
-              NFT Marketplace
+            <a
+              href="https://github.com/4-life/ad-dashboard"
+              target="_blank"
+              rel="noreferrer"
+              className={styles.iconLink}
+            >
+              <Image src="/icons/git.svg" alt="Github" width={20} height={20} />
+              AD Dashboard
             </a>
-            &nbsp;(Typescript, React, Sass)
+            &nbsp;(Vite, React, Sass)
           </p>
           <p>
             <a
-              href="https://github.com/4-life/storybook-boilerplate"
+              href="https://play.google.com/store/apps/details?id=io.nwave.splacing2&hl=en_US"
               target="_blank"
               rel="noreferrer"
+              className={styles.iconLink}
             >
-              Storybook boilerplate
+              <Image src="/icons/play.svg" alt="Github" width={20} height={20} />
+              PWA Mobile app
             </a>
-            &nbsp;(Storybook, Typescript, React, Sass)
+            &nbsp;(Ionic, Angular)
           </p>
         </div>
       </div>
@@ -89,7 +121,7 @@ export default (): JSX.Element => {
               href="https://kupsilla.com/"
               target="_blank"
               rel="noreferrer"
-              className={styles['company-link']}
+              className={styles.iconLink}
             >
               <Image src="/images/companies/kupsilla.png" alt="Kupsilla" width={20} height={22} />
               <span>Kupsilla LLC</span>
@@ -163,7 +195,7 @@ export default (): JSX.Element => {
               href="https://www.strata.co.jp/"
               target="_blank"
               rel="noreferrer"
-              className={styles['company-link']}
+              className={styles.iconLink}
             >
               <Image src="/images/companies/strata.png" alt="Strata" width={30} height={30} />
               <span>Strata K.K.</span>
@@ -234,7 +266,7 @@ export default (): JSX.Element => {
               href="https://www.nwave.io/"
               target="_blank"
               rel="noreferrer"
-              className={styles['company-link']}
+              className={styles.iconLink}
             >
               <Image src="/images/companies/nwave.png" alt="Nwave" width={30} height={30} />
               <span>Nwave Technologies Ltd.</span>
@@ -302,7 +334,7 @@ export default (): JSX.Element => {
               href="https://adguard.com/"
               target="_blank"
               rel="noreferrer"
-              className={styles['company-link']}
+              className={styles.iconLink}
             >
               <Image src="/images/companies/adguard.png" alt="Adguard" width={30} height={30} />
               <span>AdGuard</span>