-

idimetrix · Oct 29, 2024 · a13de07 · a13de07
1 parent 6532030
commit a13de07
Show file tree

Hide file tree

Showing 16 changed files with 220 additions and 111 deletions.
diff --git a/components/Avatar.tsx b/components/Avatar.tsx
@@ -1,15 +1,15 @@
-import Image from "next/image";
+// import Image from "next/image";
 
 const Avatar = () => {
   return (
     <div className="hidden xl:flex xl:max-w-none pointer-events-none select-none">
-      <Image
-        src="/avatar.png"
-        alt="avatar"
-        width={737}
-        height={678}
-        className="translate-z-0 w-full h-full"
-      />
+      {/*<Image*/}
+      {/*  src="/avatar.png"*/}
+      {/*  alt="avatar"*/}
+      {/*  width={737}*/}
+      {/*  height={678}*/}
+      {/*  className="translate-z-0 w-full h-full"*/}
+      {/*/>*/}
     </div>
   );
 };

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,5 +1,5 @@
-import Image from "next/image";
 import Link from "next/link";
+import { Logotype } from "@/components/Logotype";
 import Socials from "../components/Socials";
 
 const Header = () => {
@@ -8,13 +8,7 @@ const Header = () => {
       <div className="container mx-auto">
         <div className="flex flex-col lg:flex-row justify-between items-center gap-y-6 py-8">
           <Link href="/">
-            <Image
-              src="/logo.svg"
-              alt="logo"
-              width={220}
-              height={48}
-              priority
-            />
+            <Logotype />
           </Link>
 
           <Socials />

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -1,12 +1,12 @@
 import { FC, HTMLAttributes } from "react";
 import { Sora } from "next/font/google";
 import Head from "next/head";
+import { WEBSITE } from "@/constants";
 import { cn } from "@/utils";
 import Header from "../components/Header";
 import Nav from "../components/Nav";
 import TopLeftImg from "../components/TopLeftImg";
 
-// setup font
 const sora = Sora({
   subsets: ["latin"],
   variable: "--font-sora",
@@ -26,16 +26,12 @@ const Layout: FC<Props> = ({ className, children, ...rest }) => {
       {...rest}
     >
       <Head>
-        <title>Ethan Smith | Portfolio</title>
-        <meta
-          name="description"
-          content="Ethan Smith is a Full-stack web developer with 10+ years of experience."
-        />
-        <meta
-          name="keywords"
-          content="react, next, nextjs, html, css, javascript, js, modern-ui, modern-ux, portfolio, framer-motion, 3d-website, particle-effect"
-        />
-        <meta name="author" content="Sanidhya Kumar Verma" />
+        <title>
+          {WEBSITE.name} | {WEBSITE.tagline}
+        </title>
+        <meta name="description" content={WEBSITE.description} />
+        <meta name="keywords" content={WEBSITE.keywords.join(", ")} />
+        <meta name="author" content={WEBSITE.author} />
         <meta name="theme-color" content="#f13024" />
       </Head>
 

diff --git a/components/Logotype.tsx b/components/Logotype.tsx
@@ -0,0 +1,14 @@
+import { FC, HTMLAttributes } from "react";
+import { cn } from "@/utils";
+
+type Props = HTMLAttributes<HTMLDivElement>;
+
+export const Logotype: FC<Props> = ({ className, ...rest }) => {
+  return (
+    <div className={cn("text-3xl", className)} {...rest}>
+      <span className="font-bold">[dmitrii]</span>{" "}
+      <span className="">selikhov</span>{" "}
+      <span className="text-accent font-bold">.</span>
+    </div>
+  );
+};
diff --git a/components/Nav.tsx b/components/Nav.tsx
@@ -33,7 +33,7 @@ const Nav = () => {
 
   return (
     <nav className="flex flex-col items-center xl:justify-center gap-y-4 fixed h-max bottom-0 mt-auto xl:right-[2%] z-50 top-0 w-full xl:w-16 xl:max-w-md xl:h-screen">
-      <div className="flex w-full xl:flex-col items-center justify-between xl:justify-center gap-y-10 px-4 md:px-40 xl:px-0 h-[80px] xl:h-max py-8 bg-white/10 backdrop-blur-sm text-3xl xl:text-xl xl:rounded-full">
+      <div className="flex w-full xl:flex-col items-center justify-between xl:justify-center gap-y-10 px-4 md:px-40 xl:px-0 h-[80px] xl:h-max py-8 bg-white/10 backdrop-blur-sm text-3xl xl:text-2xl xl:rounded-full">
         {navData.map((link, i) => (
           <Link
             className={`${

diff --git a/components/ParticlesContainer.tsx b/components/ParticlesContainer.tsx
@@ -4,7 +4,6 @@ import { loadFull } from "tsparticles";
 import type { Engine } from "tsparticles-engine";
 
 const ParticlesContainer = () => {
-  // init
   const particlesInit = useCallback(async (engine: Engine) => {
     await loadFull(engine);
   }, []);

diff --git a/components/ProjectsBtn.tsx b/components/ProjectsBtn.tsx
@@ -7,7 +7,7 @@ const ProjectsBtn = () => {
     <div className="mx-auto xl:mx-0">
       <Link
         href="/work"
-        className="relative w-[185px] h-[185px] flex justify-center items-center bg-circleStar bg-cover bg-center bg-no-repeat group"
+        className="relative w-[185px] h-[185px] z-10 flex justify-center items-center bg-circleStar bg-cover bg-center bg-no-repeat group"
       >
         <Image
           src="/rounded-text.png"

diff --git a/components/Socials.tsx b/components/Socials.tsx
@@ -1,66 +1,31 @@
-import {
-  RiDribbbleLine,
-  RiFacebookLine,
-  RiGithubLine,
-  RiInstagramLine,
-  RiPinterestLine,
-  RiYoutubeLine,
-} from "react-icons/ri";
 import Link from "next/link";
-
-export const socialData = [
-  {
-    name: "YouTube",
-    link: "https://youtube.com",
-    Icon: RiYoutubeLine,
-  },
-  {
-    name: "Instagram",
-    link: "https://instagram.com",
-    Icon: RiInstagramLine,
-  },
-  {
-    name: "Facebook",
-    link: "https://facebook.com",
-    Icon: RiFacebookLine,
-  },
-  {
-    name: "Dribbble",
-    link: "https://dribbble.com",
-    Icon: RiDribbbleLine,
-  },
-  {
-    name: "Pinterest",
-    link: "https://pinterest.com",
-    Icon: RiPinterestLine,
-  },
-  {
-    name: "Github",
-    link: "https://github.com/sanidhyy/modern-portfolio",
-    Icon: RiGithubLine,
-  },
-];
+import { SOCIALS } from "@/constants";
+import { Social } from "@/types";
+import { cn } from "@/utils";
 
 const Socials = () => {
   return (
-    <div className="flex items-center gap-x-5 text-lg">
-      {socialData.map((social, i) => (
-        <Link
-          key={i}
-          title={social.name}
-          href={social.link}
-          target="_blank"
-          rel="noreferrer noopener"
-          className={`${
-            social.name === "Github"
-              ? "bg-accent rounded-full p-[5px] hover:text-white"
-              : "hover:text-accent"
-          } transition-all duration-300`}
-        >
-          <social.Icon aria-hidden />
-          <span className="sr-only">{social.name}</span>
-        </Link>
-      ))}
+    <div className="flex items-center gap-x-5 text-2xl">
+      {Object.values(SOCIALS)
+        .filter((social) => social.link)
+        .map((social) => (
+          <Link
+            key={social.name}
+            title={social.title}
+            href={social.link}
+            target="_blank"
+            rel="noreferrer noopener"
+            className={cn(
+              social.name === Social.GitHub
+                ? "bg-accent rounded-full p-[5px] hover:text-white"
+                : "hover:text-accent",
+              "transition-all duration-300",
+            )}
+          >
+            <social.icon aria-hidden />
+            <span className="sr-only">{social.name}</span>
+          </Link>
+        ))}
     </div>
   );
 };

diff --git a/constants/index.ts b/constants/index.ts
diff --git a/constants/index.tsx b/constants/index.tsx
@@ -0,0 +1,99 @@
+import type { IconType } from "react-icons";
+import {
+  RiCalendarLine,
+  RiEarthLine,
+  RiFacebookLine,
+  RiGithubLine,
+  RiInstagramLine,
+  RiLinkedinLine,
+  RiMailLine,
+  RiNpmjsLine,
+  RiPhoneLine,
+  RiTelegramLine,
+  RiTwitterLine,
+} from "react-icons/ri";
+import { Social } from "@/types";
+
+export const WEBSITE = {
+  name: "Dmitrii Selikhov",
+  author: "Dmitrii Selikhov",
+  tagline: "CTO, Software Architect, Technical Lead, 3X Founder.",
+  description:
+    "CTO, Software Architect, Technical Lead, 3X Founder. Linking companies with top tech talents.",
+  keywords: [""],
+  about: "",
+};
+
+export const SOCIALS: Record<
+  Social,
+  { name: string; title: string; icon: IconType; link: string }
+> = {
+  [Social.Email]: {
+    name: "Email",
+    title: `Email ${WEBSITE.author}`,
+    icon: RiMailLine,
+    link: "mailto:[email protected]",
+  },
+  [Social.Phone]: {
+    name: "Phone",
+    title: `Call ${WEBSITE.author}`,
+    icon: RiPhoneLine,
+    link: "tel:+18299576440",
+  },
+  [Social.Facebook]: {
+    name: "Facebook",
+    title: `${WEBSITE.author} on Facebook`,
+    icon: RiFacebookLine,
+    link: "",
+  },
+  [Social.Instagram]: {
+    name: "Instagram",
+    title: `${WEBSITE.author} on Instagram`,
+    icon: RiInstagramLine,
+    link: "",
+  },
+  [Social.Twitter]: {
+    name: "Twitter",
+    title: `${WEBSITE.author} on Twitter`,
+    icon: RiTwitterLine,
+    link: "https://x.com/idimetrix",
+  },
+  [Social.LinkedIn]: {
+    name: "LinkedIn",
+    title: `${WEBSITE.author} on LinkedIn`,
+    icon: RiLinkedinLine,
+    link: "https://www.linkedin.com/in/dimetrix",
+  },
+  [Social.Telegram]: {
+    name: "Telegram",
+    title: `${WEBSITE.author} on Telegram`,
+    icon: RiTelegramLine,
+    link: "https://t.me/dmitrii_selikhov",
+  },
+  [Social.Npm]: {
+    name: "NPM",
+    title: `${WEBSITE.author} on NPM`,
+    icon: RiNpmjsLine,
+    link: "https://www.npmjs.com/~dimetrix",
+  },
+  [Social.Website]: {
+    name: "Website",
+    title: `Visit ${WEBSITE.author}’s Website`,
+    icon: RiEarthLine,
+    link: "https://dmitrii-selikhov.vercel.app",
+  },
+  [Social.Calendly]: {
+    name: "Calendly",
+    title: `Schedule with ${WEBSITE.author} on Calendly`,
+    icon: RiCalendarLine,
+    link: "https://calendly.com/dmitry-selikhov",
+  },
+  [Social.GitHub]: {
+    name: "GitHub",
+    title: `${WEBSITE.author} on GitHub`,
+    icon: RiGithubLine,
+    link: "https://github.com/idimetrix",
+  },
+};
+
+export * from "./variants";
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "react-dom": "18.3.1",
     "react-icons": "5.3.0",
     "react-tsparticles": "2.12.2",
+    "react-typed": "2.0.12",
     "swiper": "11.1.14",
     "tailwind-merge": "2.5.4",
     "tailwind-scrollbar": "3.1.0",
@@ -45,7 +46,7 @@
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
-    "@types/node": "22.8.1",
+    "@types/node": "22.8.2",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "autoprefixer": "10.4.20",

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,5 +1,6 @@
+import { ReactTyped } from "react-typed";
 import { motion } from "framer-motion";
-import { fadeIn } from "@/constants";
+import { WEBSITE, fadeIn } from "@/constants";
 import Avatar from "../components/Avatar";
 import ParticlesContainer from "../components/ParticlesContainer";
 import ProjectsBtn from "../components/ProjectsBtn";
@@ -17,21 +18,28 @@ const Home = () => {
             className="h1"
           >
             Transforming Ideas <br /> Into{" "}
-            <span className="text-accent">Digital Reality</span>
+            <ReactTyped
+              className="text-accent"
+              strings={[
+                "Digital Reality",
+                "Growth Business",
+                "Scalable Product",
+              ]}
+              typeSpeed={40}
+              backSpeed={50}
+              loop
+            />
           </motion.h1>
 
-          <motion.p
+          <motion.h2
             variants={fadeIn("down", 0.3)}
             initial="hidden"
             animate="show"
             exit="hidden"
             className="max-w-sm xl:max-w-xl mx-auto xl:mx-0 mb-10 xl:mb-16"
           >
-            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate,
-            exercitationem harum, quia nulla temporibus deleniti libero veniam
-            vero beatae numquam ducimus illum ab similique ipsam tempore fugit
-            quod laudantium debitis.
-          </motion.p>
+            {WEBSITE.name} - {WEBSITE.description}
+          </motion.h2>
 
           <div className="flex justify-center xl:hidden relative">
             <ProjectsBtn />

diff --git a/public/logo.svg b/public/logo.svg