rename works to projects

src/App.tsx

@@ -8,7 +8,7 @@ import ThreeJS from "./components/ThreeJS/ThreeJS";
 import AboutPage from "./pages/About/About";
 import ContactPage from "./pages/Contact/Contact";
 import HomePage from "./pages/Home/Home";
-import WorksPage from "./pages/Works/Works";
+import ProjectsPage from "./pages/Projects/projects";
 
 const App: FC = () => {
   return (
@@ -18,7 +18,7 @@ const App: FC = () => {
         <Routes key="routes">
           <Route path="/" element={<HomePage />} />
           <Route path="/about" element={<AboutPage />} />
-          <Route path="/works" element={<WorksPage />} />
+          <Route path="/projects" element={<ProjectsPage />} />
           <Route path="/contact" element={<ContactPage />} />
         </Routes>
       </AnimatePresence>

src/components/Carousel/Carousel.tsx

@@ -1,8 +1,8 @@
 import { FC, Fragment, useState } from "react";
 import { motion, AnimatePresence, DragHandlers } from "framer-motion";
 import { sliderAnimation } from "../../animations";
-import data from "../../data/works.json";
-import { IWorkItem } from "../../models/WorksModel";
+import data from "../../data/projects.json";
+import { IProjectItem } from "../../models/ProjectsModel";
 import IconArrow from "../../icons/Arrow";
 import { socialIcons } from "../../constants/socials";
 
@@ -16,7 +16,7 @@ const transition = {
 };
 
 const Carousel: FC = (): JSX.Element => {
-  const works = data as IWorkItem[];
+  const projects = data as IProjectItem[];
   const [[page, dir], setPage] = useState([0, 0]);
   const [pos, setPos] = useState(true);
 
@@ -41,7 +41,7 @@ const Carousel: FC = (): JSX.Element => {
   };
 
   const changePage = (newDir: number) => {
-    const numOfPages = works.length - 1;
+    const numOfPages = projects.length - 1;
     switch (newDir) {
       case -1:
         if (page > 0) {
@@ -84,8 +84,8 @@ const Carousel: FC = (): JSX.Element => {
     <Fragment>
       <AnimatePresence exitBeforeEnter initial={false} custom={dir}>
         <motion.div
-          className="works__main"
-          key={works[page].name}
+          className="projects__main"
+          key={projects[page].name}
           custom={dir}
           variants={sliderAnimation}
           initial="sliderEnter"
@@ -98,49 +98,49 @@ const Carousel: FC = (): JSX.Element => {
           dragElastic={1}
         >
           <div
-            className="works__main__container"
+            className="projects__main__container"
             style={{ alignSelf: pos === false ? "flex-start" : "flex-end" }}
           >
             <div
-              className="works__main__container__title"
+              className="projects__main__container__title"
               style={{
                 justifyContent: pos === false ? "flex-start" : "flex-end",
               }}
             >
-              {`${works[page].id}. ${works[page].name}`}
+              {`${projects[page].id}. ${projects[page].name}`}
             </div>
             <div
-              className="works__main__container__category"
+              className="projects__main__container__category"
               style={{
                 justifyContent: pos === false ? "flex-start" : "flex-end",
               }}
             >
-              {works[page].categ}
+              {projects[page].categ}
             </div>
             <div
-              className="works__main__container__descr"
+              className="projects__main__container__descr"
               style={{ textAlign: pos === false ? "start" : "end" }}
             >
-              {works[page].descr}
+              {projects[page].descr}
             </div>
-            <div className="works__main__container__tags">
+            <div className="projects__main__container__tags">
               <ul
                 style={{
                   justifyContent: pos === false ? "flex-start" : "flex-end",
                 }}
               >
-                {works[page].tags.map((tag) => (
+                {projects[page].tags.map((tag) => (
                   <li key={tag}>{tag}</li>
                 ))}
               </ul>
             </div>
             <div
-              className="works__main__container__links"
+              className="projects__main__container__links"
               style={{
                 justifyContent: pos === false ? "flex-start" : "flex-end",
               }}
             >
-              {works[page].links.map((link) => {
+              {projects[page].links.map((link) => {
                 const Icon = socialIcons[link.icon];
                 return (
                   <a
@@ -156,30 +156,34 @@ const Carousel: FC = (): JSX.Element => {
             </div>
           </div>
           <div
-            className="works__main__img"
+            className="projects__main__img"
             style={{ alignSelf: pos === false ? "flex-end" : "flex-start" }}
           >
-            <img src={works[page].img} draggable="false" alt="works main img" />
+            <img
+              src={projects[page].img}
+              draggable="false"
+              alt="projects main img"
+            />
           </div>
         </motion.div>
       </AnimatePresence>
-      <div className="works__arrows">
+      <div className="projects__arrows">
         <IconArrow
           direction="left"
-          className="works__arrows__left"
+          className="projects__arrows__left"
           onClick={handlePrevPage}
         />
         <IconArrow
           direction="right"
-          className="works__arrows__right"
+          className="projects__arrows__right"
           onClick={handleNextPage}
         />
       </div>
-      <div className="works__pages">
-        {works.map((item, index) => {
+      <div className="projects__pages">
+        {projects.map((item, index) => {
           return (
             <div
-              className="works__pages__item"
+              className="projects__pages__item"
               id={`page${index}`}
               key={item.name}
               style={{ background: page === index ? "white" : "#1b1b1b" }}

src/components/Navigation/Navigation.tsx

@@ -11,9 +11,9 @@ const links = [
   },
   {
     id: 2,
-    selector: "works",
-    name: "Works",
-    pathname: "/works",
+    selector: "projects",
+    name: "Projects",
+    pathname: "/projects",
   },
   {
     id: 3,

src/components/Navigation/navigation.scss

@@ -49,7 +49,7 @@
     top: $links_pos;
     left: $links_pos;
   }
-  #works {
+  #projects {
     top: $links_pos;
     right: $links_pos;
   }
@@ -91,7 +91,7 @@
       top: $links_pos_mobile;
       left: $links_pos_mobile;
     }
-    #works {
+    #projects {
       top: $links_pos_mobile;
       right: $links_pos_mobile;
     }

src/data/works.json → src/data/projects.json

@@ -4,7 +4,7 @@
     "name": "A-Z",
     "categ": "Mobile Game | Android",
     "descr": "The first serious project. A small text puzzle game based on the alphabet. Written on Kotlin. The Volley library was used to make HTTP requests to the web leaderboard.",
-    "img": "./img/works/a-z.png",
+    "img": "./img/projects/a-z.png",
     "tags": ["ANDROID", "KOTLIN", "VOLLEY"],
     "links": [
       {
@@ -22,7 +22,7 @@
     "name": "Camo Tracker",
     "categ": "Web App | React | Express",
     "descr": "Camo Tracker for Call of Duty Black Ops Cold War. Built with MERN stack. Authentication is made using JWT tokens. User progress is managed by Redux and stored in MongoDB. Design is adapted for desktop and mobile devices. Hosted on Vercel",
-    "img": "./img/works/camo-tracker.png",
+    "img": "./img/projects/camo-tracker.png",
     "tags": [
       "NODE.JS",
       "EXPRESS.JS",
@@ -48,7 +48,7 @@
     "name": "Rick and Morty Characters Wiki",
     "categ": "Web App | React",
     "descr": "A test project for typescript practice. The user can view information about a character, search by character name, type, species, and filter by status and gender. Hosted on Vercel",
-    "img": "./img/works/rickandmorty.png",
+    "img": "./img/projects/rickandmorty.png",
     "tags": ["REACT", "AXIOS", "TYPESCRIPT", "BOOTSTRAP", "VERCEL", "MOBX"],
     "links": [
       {
@@ -66,7 +66,7 @@
     "name": "Image Editor",
     "categ": "Web App | Vue",
     "descr": "The web analog of the Snipping Tool app. The user can upload an image, mark some important detail on the image and save the edited image. Import and export works both from a file and from the clipboard.",
-    "img": "./img/works/image-editor.png",
+    "img": "./img/projects/image-editor.png",
     "tags": ["VUE", "VUEX", "TYPESCRIPT", "HTML5 CANVAS", "VERCEL"],
     "links": [
       {
@@ -84,7 +84,7 @@
     "name": "Next Posts",
     "categ": "Web App | Next.JS",
     "descr": "A simple news website. Authorized users can create posts, rate them and leave comments. Authorization is done with Magic Link. The posts are stored in Supabase. The UI is built on Mantine.",
-    "img": "./img/works/next-posts.png",
+    "img": "./img/projects/next-posts.png",
     "tags": [
       "NEXT.JS",
       "SSR",
@@ -110,7 +110,7 @@
     "name": "Image Aware Background",
     "categ": "Web App | Vue",
     "descr": "An application that identifies one dominant and 5 most used colors from a given image. The search for colors is implemented using the Canvas API.",
-    "img": "./img/works/image-aware-background.png",
+    "img": "./img/projects/image-aware-background.png",
     "tags": ["VUE", "VITE", "TYPESCRIPT", "HTML5 CANVAS", "VERCEL"],
     "links": [
       {
@@ -128,7 +128,7 @@
     "name": "Trophy List Fetcher",
     "categ": "Web App | Next.JS",
     "descr": "Trophy List Fetching Tool. The application is able to fetch trophy lists from psnprofiles by parsing and directly from PSN API by authorization. The application was created to automate the import of trophy lists.",
-    "img": "./img/works/trophy-list-fetcher.png",
+    "img": "./img/projects/trophy-list-fetcher.png",
     "tags": ["NEXT.JS", "SSR", "TYPESCRIPT", "PSN", "COOKIES", "CHEERIO"],
     "links": [
       {
@@ -146,7 +146,7 @@
     "name": "Dimension C-137",
     "categ": "Web App | Angular",
     "descr": "A project for practicing in Angular. Apollo Client (GraphQL) is used for data fetching. The application has two views - Table and Cards. Infinite Scroll is implemented in each view.",
-    "img": "./img/works/dimension-c137.png",
+    "img": "./img/projects/dimension-c137.png",
     "tags": [
       "ANGULAR",
       "TYPESCRIPT",
@@ -171,7 +171,7 @@
     "name": "Ramutable",
     "categ": "Web App | Nuxt",
     "descr": "A project for practicing in Nuxt. The application uses an SSR approach to render pages. Pagination is controlled by query params. UI built with Tailwind",
-    "img": "./img/works/ramutable.png",
+    "img": "./img/projects/ramutable.png",
     "tags": ["VUE", "NUXT", "TYPESCRIPT", "TAILWIND", "SSR"],
     "links": [
       {
@@ -189,7 +189,7 @@
     "name": "Breeween",
     "categ": "Web App | Angular",
     "descr": "A project for practicing in Angular. Web audio player. User can add recordings to Firebase Database. Audio player has the ability to rewind, change volume and pause/resume. Audio player control logic is placed in a dedicated service.",
-    "img": "./img/works/breeween.png",
+    "img": "./img/projects/breeween.png",
     "tags": [
       "ANGULAR",
       "FIREBASE",

src/models/WorksModel.ts → src/models/ProjectsModel.ts

@@ -1,16 +1,16 @@
 import { SocialIconType } from "./IconsModel";
 
-export interface IWorkLink {
+export interface IProjectLink {
   icon: SocialIconType;
   src: string;
 }
 
-export interface IWorkItem {
+export interface IProjectItem {
   id: number;
   name: string;
   categ: string;
   descr: string;
   img: string;
   tags: string[];
-  links: IWorkLink[];
+  links: IProjectLink[];
 }

src/pages/Home/Home.tsx

@@ -69,9 +69,9 @@ const Home: FC = () => {
           animate="animate"
           transition={{ duration: 0.5, delay: 0.8 }}
         >
-          <Link to={"/works"}>
-            <button className="home__buttons__button" id="works">
-              My Works
+          <Link to={"/projects"}>
+            <button className="home__buttons__button" id="projects">
+              My Projects
             </button>
           </Link>
         </motion.div>

src/pages/Works/works.scss → src/pages/Projects/projects.scss

@@ -1,7 +1,7 @@
 @import "../../styles/variables";
 @import "../../styles/colors";
 
-.works {
+.projects {
   width: 100%;
   height: 100%;
   margin: auto;
@@ -144,7 +144,7 @@
 }
 
 @media (max-width: 1400px) {
-  .works {
+  .projects {
     &__main {
       max-width: 70%;
       &__img {
@@ -174,7 +174,7 @@
 }
 
 @media (max-width: 1200px) {
-  .works {
+  .projects {
     width: 80%;
     &__main {
       height: fit-content;
@@ -226,7 +226,7 @@
 }
 
 @media (max-width: 1200px) and (orientation: landscape) {
-  .works {
+  .projects {
     width: 100%;
     &__main {
       max-width: 45%;
@@ -238,7 +238,7 @@
 }
 
 @media (max-width: 992px) and (orientation: landscape) {
-  .works {
+  .projects {
     &__main {
       max-width: 80%;
       &__container {
@@ -296,7 +296,7 @@
 }
 
 @media (max-width: 320px) {
-  .works {
+  .projects {
     &__main {
       max-width: 75%;
       &__container {

src/pages/Works/Works.tsx → src/pages/Projects/projects.tsx

@@ -1,16 +1,16 @@
 import { FC } from "react";
-import "./works.scss";
+import "./projects.scss";
 import { motion } from "framer-motion";
 import { containerAnimation } from "../../animations";
 import Carousel from "../../components/Carousel/Carousel";
 import useTitle from "../../hooks/useTitle";
 
-const Works: FC = () => {
-  useTitle("Works");
+const Projects: FC = () => {
+  useTitle("Projects");
 
   return (
     <motion.div
-      className="works"
+      className="projects"
       variants={containerAnimation}
       initial="hidden"
       animate="visible"
@@ -21,4 +21,4 @@ const Works: FC = () => {
   );
 };
 
-export default Works;
+export default Projects;