Merge pull request #16 from krckyboy/#10

#10

.gitignore

@@ -0,0 +1 @@
+.idea

next/src/app/about/image-section/ImageSection.tsx

@@ -0,0 +1,18 @@
+import React, { FunctionComponent } from 'react';
+import styles from '@/app/about/styles.module.scss';
+import Image from 'next/image';
+import data from './data';
+
+const ImageSection: FunctionComponent = () => {
+  return (
+    <section className={styles.imagesContainer}>
+      {data.map((item) => (
+        <Image
+          src={item.src} alt={item.alt} key={item.alt} width={250} height={250}
+        />
+      ))}
+    </section>
+  );
+};
+
+export default ImageSection;

next/src/app/about/image-section/data.ts

@@ -0,0 +1,21 @@
+interface Item {
+  src: string;
+  alt: string;
+}
+
+const data: Item[] = [
+  {
+    src: '/images/about/3D037048-F26D-464D-BB7E-13AA8696C6B9_1_105_c.jpeg',
+    alt: 'Dušan on the beach.'
+  },
+  {
+    src: '/images/about/EF46B464-0160-404D-B2B4-33224F118617_1_105_c.jpeg',
+    alt: 'Lilly on a sofa.'
+  },
+  {
+    src: '/images/about/2F6ACD0F-D23F-4006-97D8-5D062B0EB330_1_105_c.jpeg',
+    alt: 'Dušan next to an elephant.'
+  }
+];
+
+export default data;

next/src/app/about/page.tsx

@@ -1,13 +1,72 @@
 import { NextPage } from 'next';
-import gStyles from '../../styles/global.module.scss';
+import gStyles from '@/styles/global.module.scss';
+import styles from './styles.module.scss';
 import React from 'react';
+import Link from 'next/link';
+import ImageSection from '@/app/about/image-section/ImageSection';
 
 const Page: NextPage = () => {
   return (
-    <main>
-      <section className={`${gStyles.section} ${gStyles.paddingInline}`}>
-        <h1 className={gStyles.pageHeading}>About me</h1>
-      </section>
+    <main className={styles.main}>
+      <article className={`${gStyles.section} ${gStyles.paddingInline}`}>
+        <h1 className={gStyles.pageHeading}>About Me</h1>
+        <ImageSection />
+        <section className={`${gStyles.text} ${styles.mainContent}`}>
+          <h2 className={styles.subheading}>Introduction</h2>
+          <p>Hello! I'm Dušan Todorović, a resident of Belgrade, Serbia. You might think I've been coding since
+            I was in diapers, but nope!</p>
+          <p>I come from a long line of musicians - my dad, granddad, and great-granddad were
+            all accordion players.</p>
+          <p>So, you can imagine music has always been a big part of my life. I picked up the accordion at the tender
+            age of 8 and I was pretty good at it!</p>
+          <h2 className={styles.subheading}>Musical Background</h2>
+          <p>I wasn't just limited to the accordion. I also played the keyboard and it became my main source of
+            income for years. I even taught others how to play accordion and keyboard.</p>
+          <p>Oh, really, I could share so much about this. The main point is, my father was rooting for me to
+            prolong our musical roots, but I guess I never really found myself going for it commercially, especially
+            because of the social side in folk music in Serbia.</p>
+          <p>But yes, I had to earn money and I was good at playing, so I kept going for it while exploring other
+            options.</p>
+          <h2 className={styles.subheading}>Transition to Programming</h2>
+          <p>My transition into programming happened quite unexpectedly. During college, I had to take a web design
+            class and that's where I fell in love with coding. After that, I started taking front-end courses on
+            platforms like Udemy and FreeCodeCamp.</p>
+          <p>Eventually, I landed my first job as a junior front-end developer through a friend of a friend. At that
+            time, knowing HTML, CSS (with a bit of Bootstrap), and some JavaScript was enough to get by.</p>
+          <h2 className={styles.subheading}>Early Career</h2>
+          <p>Despite the lack of advanced tools, I made significant progress after leaving my first job. I spent a lot
+            of time reading documentation and working on personal projects to build up my full-stack skills. I also
+            continued to teach music and play on parties to support myself financially.</p>
+          <p>I was pretty disciplined. I worked on my projects every day, as if it was my job. I have to
+            say, the key to pushing me forward was that I was always working on challenging projects. It started off
+            from ideas, designing them myself in Figma, and then handling the front-end and/or back-end if it required
+            it, and then deployment.</p>
+          <h2 className={styles.subheading}>Current Role</h2>
+          <p>After building my portfolio and honing my skills, I landed a job that changed my life. I'm currently a
+            front-end team lead at a reputable company. I love how I've grown not just in my tech skills, but also in
+            my management and soft skills.</p>
+          <p>I enjoy both the operational side of work, and also managing people.</p>
+          <h2 className={styles.subheading}>Interests</h2>
+          <p>I have a few quirky habits that might surprise you. For instance, I used to watch streams of League of
+            Legends, even though I don't play the game anymore. I also enjoy playing PlayStation 5 from time to time,
+            but lately, I've been more inclined towards working on personal projects than playing video games.</p>
+          <p>I absolutely love dogs and other animals, but dogs are my favorite, that's for sure. They are pure, and
+            lovable and they are our best friends! I always get fascinated, over and over, by how much positive energy
+            I get from Lilly. Lilly is my dog, Shi Tzuh!</p>
+          <p>I also like TV shows and movies. Some of my favorites include The Sopranos, Dexter, Mad Men.</p>
+          <h2 className={styles.subheading}>Contact Information</h2>
+          <p>Feel free to reach out to me if you want to chat about coding, or anything else. I'm always open to new
+            connections and opportunities:</p>
+          <ul>
+            <li>
+              <Link href="https://www.linkedin.com/in/dusan-todorovic-krcky/">Linkedin</Link>
+            </li>
+            <li>
+              <Link href="mailto:[email protected]">Mail</Link>
+            </li>
+          </ul>
+        </section>
+      </article>
     </main>
   );
 };

next/src/app/about/styles.module.scss

@@ -0,0 +1,62 @@
+.main {
+  h1 {
+    margin-bottom: 2rem;
+  }
+
+  .imagesContainer {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+
+    @media (min-width: 480px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    img {
+      max-width: 100%;
+      height: auto;
+      object-fit: cover;
+    }
+  }
+
+  .mainContent {
+    margin-top: 3rem;
+
+    .subheading {
+      font-weight: 500;
+      font-size: clamp(1.4rem, 1.1vw, 1.6rem);
+      margin-bottom: 1rem;
+
+      &:not(:first-of-type) {
+        margin-top: 2rem;
+      }
+
+      + img {
+        + p {
+          margin-top: 1rem;
+        }
+      }
+    }
+
+    p {
+      margin-top: 1rem;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  ul, ol {
+    display: flex;
+    flex-direction: column;
+    row-gap: 1rem;
+    padding-left: 1.5rem;
+    list-style-type: decimal;
+    margin-top: 1.5rem;
+  }
+}

next/src/app/blog/[slug]/blog-content/styles.scss

@@ -11,7 +11,7 @@
   }
 
   p, ul, ol {
-    margin-bottom: 1.1rem;
+    margin-bottom: 1.5rem;
   }
 
   img {
@@ -21,27 +21,19 @@
   .rehype-code-title {
     background-color: darken($color-background, 2%);
     color: lighten($color-background, 35%);
-    padding: .5em;
-    padding-inline: 1em;
+    padding: .5em 1em;
   }
 
   pre {
-    font-size: clamp(1rem, .8vw, 1.2rem);
-    margin-bottom: 1.1rem;
-  }
-
-  ul {
-    list-style-type: disc;
-  }
-
-  ol {
-    list-style-type: decimal;
+    font-size: clamp(1rem, 1vw, 1.2rem);
+    margin-bottom: 1.5rem;
   }
 
   ul, ol {
     display: flex;
     flex-direction: column;
     row-gap: 1rem;
     padding-left: 1.5rem;
+    list-style-type: decimal;
   }
 }

next/src/app/blog/[slug]/blog-footer/styles.module.scss

@@ -3,7 +3,7 @@
 .container {
   display: flex;
   width: 100%;
-  margin-top: 3rem;
+  margin-top: 1.5rem;
   padding-top: 3rem;
   border-top: solid lighten($color-background, 3%) 6px;
 

next/src/app/blog/[slug]/blog-header/BlogHeader.tsx

@@ -1,5 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import gStyles from '@/styles/global.module.scss';
+import styles from './styles.module.scss';
 import { Post } from '@/components/blog-post-item/types';
 
 interface Props {
@@ -11,7 +12,7 @@ const BlogHeader: FunctionComponent<Props> = ({ post }) => {
 
   return (
     <header>
-      <h1 className={`${gStyles.pageHeadingMini}`}>{post.attributes.title}</h1>
+      <h1 className={`${gStyles.pageHeading} ${styles.heading}`}>{post.attributes.title}</h1>
       {categories && (
         <ul>
           {categories.map((category) => (

next/src/app/blog/[slug]/blog-header/styles.module.scss

@@ -0,0 +1,3 @@
+.heading {
+  text-transform: initial;
+}

next/src/app/blog/styles.module.scss

@@ -6,7 +6,6 @@
 }
 
 .categories {
-  margin-top: 2rem;
   justify-content: flex-start;
   display: flex;
   gap: .5rem;

next/src/app/skills/jobs/Jobs.tsx

@@ -0,0 +1,26 @@
+import React, { FunctionComponent } from 'react';
+import styles from './styles.module.scss';
+import jobsData from './data';
+import JobItem from './job-item/JobItem';
+
+const Jobs: FunctionComponent = () => {
+  return (
+    <>
+      <h2>Work Experience</h2>
+      <section className={styles.container}>
+        {jobsData.map((item, index) => (
+          <JobItem key={index}
+                   jobTitle={item.jobTitle}
+                   companyName={item.companyName}
+                   location={item.location}
+                   startDate={item.startDate}
+                   endDate={item.endDate}
+                   achievements={item.achievements}
+          />
+        ))}
+      </section>
+    </>
+  );
+};
+
+export default Jobs;

next/src/app/skills/jobs/data.ts

@@ -0,0 +1,41 @@
+export interface JobItem {
+  jobTitle: string;
+  companyName: string;
+  startDate: Date;
+  endDate?: Date;
+  location: string;
+  achievements: string[];
+}
+
+const data: JobItem[] = [
+  {
+    jobTitle: 'Lead Front-End Developer',
+    companyName: 'Citrus Systems',
+    location: 'Belgrade, Serbia',
+    startDate: new Date(2021, 6),
+    achievements: ['Successfully led the team in migrating to React and Vue, resulting in improved performance and maintainability',
+      'Developed and maintained internal front-end framework used across multiple projects'
+    ]
+  }, {
+    jobTitle: 'Front-End Developer',
+    companyName: 'Citrus Systems',
+    location: 'Belgrade, Serbia',
+    startDate: new Date(2020, 7),
+    endDate: new Date(2021, 5),
+    achievements: ['Revamped the outdated codebase into a more streamlined, modular structure while preserving our proprietary internal front-end framework utilized across various iGaming projects.',
+      'This involved extensive use of technologies such as HTML5, ES6+, SASS, and TWIG.'
+    ]
+  },
+  {
+    jobTitle: 'Front-End Web Developer',
+    companyName: 'Boca Tech',
+    location: 'Belgrade, Serbia',
+    startDate: new Date(2018, 4),
+    endDate: new Date(2019, 2),
+    achievements: ['As the sole front-end developer in my first role, I successfully executed numerous projects, including a complex appointment scheduling platform for beauty services.',
+      'My contributions extended beyond coding, integrating UI/UX designs with functional requirements and managing data entries.'
+    ]
+  }
+];
+
+export default data;

next/src/app/skills/jobs/job-item/JobItem.tsx

@@ -0,0 +1,33 @@
+import React, { FunctionComponent } from 'react';
+import styles from './styles.module.scss';
+import gStyles from '@/styles/global.module.scss';
+import { JobItem } from '../data';
+import { convertToString, formatDuration } from './scripts';
+
+const JobItem: FunctionComponent<JobItem> = ({
+                                               jobTitle,
+                                               companyName,
+                                               location,
+                                               achievements,
+                                               startDate,
+                                               endDate
+                                             }) => {
+  return (
+    <div className={`${styles.container} ${gStyles.text}`}>
+      <div>
+        <p className={styles.companyName}>{companyName}</p>
+        <p
+          className={styles.duration}>{convertToString(startDate, endDate)} | {formatDuration(startDate, endDate)}</p>
+        <p className={styles.location}>{location}</p>
+      </div>
+      <h3 className={styles.title}>{jobTitle}</h3>
+      <ul>
+        {achievements.map((achievement, index) => (
+          <li key={index}>{achievement}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default JobItem;

next/src/app/skills/jobs/job-item/scripts.ts

@@ -0,0 +1,22 @@
+import { differenceInMonths, format } from 'date-fns';
+
+export const formatDuration = (startDate: Date, endDate?: Date) => {
+  const monthsDifference = differenceInMonths(endDate ?? new Date(), startDate);
+  const years = Math.floor(monthsDifference / 12);
+  const months = monthsDifference % 12;
+
+  const durationParts = [];
+
+  if (years > 0) {
+    durationParts.push(`${years} years`);
+  }
+  if (months > 0) {
+    durationParts.push(`${months} months`);
+  }
+
+  return durationParts.join(', ');
+};
+
+export const convertToString = (startDate: Date, endDate?: Date) => {
+  return `${format(startDate, 'MMM yyyy')} - ${endDate ? format(endDate, 'MMM yyyy') : 'present'}`;
+};