Merge pull request #28 from miksrv/develop

Develop

components/about/About.tsx

@@ -1,22 +1,30 @@
 import React from 'react'
+import Image from 'next/image'
 
+import photo from './photo.jpg'
 import styles from './styles.module.sass'
 
 export const About: React.FC = () => {
     return (
         <section className={styles.aboutSection}>
             <h2 className={'pageTitle'}>{'About me'}</h2>
             <div className={styles.aboutContainer}>
-                <p>
-                    {
-                        'Programming is both my profession and my hobby, which is why I truly enjoy my work as a developer. With over 14 years of experience, I have the skills to tackle a wide range of challenges, from building interactive web applications to leading development teams.'
-                    }
-                </p>
-                <p>
-                    {
-                        'Outside of coding, my hobbies are a big part of my life. I’m an amateur astronomer and have built a fully automated remote observatory that I can control from anywhere in the world. I also love traveling, especially hiking and exploring nature with my family. My children are a constant source of inspiration, motivating me both in life and in work.'
-                    }
-                </p>
+                <Image
+                    src={photo}
+                    alt={'Photo of me'}
+                />
+                <div>
+                    <p>
+                        {
+                            'Programming is both my profession and my hobby, which is why I truly enjoy my work as a developer. With over 14 years of experience, I have the skills to tackle a wide range of challenges, from building interactive web applications to leading development teams.'
+                        }
+                    </p>
+                    <p>
+                        {
+                            'Outside of coding, my hobbies are a big part of my life. I’m an amateur astronomer and have built a fully automated remote observatory that I can control from anywhere in the world. I also love traveling, especially hiking and exploring nature with my family. My children are a constant source of inspiration, motivating me both in life and in work.'
+                        }
+                    </p>
+                </div>
             </div>
         </section>
     )

components/about/styles.module.sass

@@ -8,6 +8,24 @@
     background-color: var(--container-background)
     border-radius: var(--border-radius)
     color: var(--text-color-secondary)
+    display: flex
+    justify-content: space-between
+    flex-direction: row-reverse
+    gap: 10px
 
     p:not(:last-of-type)
         margin-bottom: 10px
+
+    img
+        height: 100%
+        width: 158px
+        object-fit: cover
+        border-radius: var(--border-radius)
+        box-shadow: var(--box-shadow)
+
+    @media screen and (max-width: $mobileMaxWidth)
+        display: block
+
+        img
+            float: right
+            margin: 0 10px

components/github-activity/GithubActivity.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import GitHubCalendar from 'react-github-calendar'
+
+import styles from './styles.module.sass'
+
+export const GithubActivity: React.FC = () => {
+    return (
+        <section className={styles.activitySection}>
+            <h2 className={'pageTitle'}>{'Work activity'}</h2>
+            <GitHubCalendar username={'miksrv'} />
+        </section>
+    )
+}
+
+export default GithubActivity

components/github-activity/index.ts

@@ -0,0 +1 @@
+export { default } from './GithubActivity'

components/github-activity/styles.module.sass

@@ -0,0 +1,7 @@
+@import ../../styles/variables
+
+.activitySection
+    margin: 40px auto 0
+
+    footer
+        color: var(--text-color-secondary)

components/introduce/styles.module.sass

@@ -14,6 +14,7 @@ $avatarDesktopWidth: 45%
 
         img
             border-radius: var(--border-radius)
+            box-shadow: var(--box-shadow)
 
         @media screen and (max-width: $mobileMaxWidth)
             margin-bottom: 20px

package.json

@@ -34,6 +34,7 @@
         "next-seo": "^6.6.0",
         "react": "18.3.1",
         "react-dom": "18.3.1",
+        "react-github-calendar": "^4.3.1",
         "typescript": "5.6.2"
     },
     "devDependencies": {

pages/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { NextSeo } from 'next-seo'
 
 import About from '@/components/about'
+import GithubActivity from '@/components/github-activity'
 import Introduce from '@/components/introduce'
 import StarField from '@/components/star-field'
 
@@ -35,6 +36,8 @@ const MainPage: React.FC = () => (
         <Introduce />
 
         <About />
+
+        <GithubActivity />
     </>
 )
 

styles/theme.css

@@ -16,4 +16,6 @@
     --text-color-primary: #e1e3e6;
     --text-color-secondary: #a5a5a9;
     --text-color-third: #76787a;
+
+    --box-shadow: 0 20px 25px -5px rgba(0,0,0,.4),0 8px 10px -6px rgba(0,0,0,.4);
 }

yarn.lock

@@ -365,6 +365,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.12.5":
+  version: 7.25.6
+  resolution: "@babel/runtime@npm:7.25.6"
+  dependencies:
+    regenerator-runtime: "npm:^0.14.0"
+  checksum: 10c0/d6143adf5aa1ce79ed374e33fdfd74fa975055a80bc6e479672ab1eadc4e4bfd7484444e17dd063a1d180e051f3ec62b357c7a2b817e7657687b47313158c3d2
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.24.7, @babel/template@npm:^7.3.3":
   version: 7.24.7
   resolution: "@babel/template@npm:7.24.7"
@@ -1033,6 +1042,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/chroma-js@npm:^2.4.3":
+  version: 2.4.4
+  resolution: "@types/chroma-js@npm:2.4.4"
+  checksum: 10c0/8acd341c523fc960686ed9e60f23ae643da35bddf012b4b18cb0d941ee3bf82087262245ffa8c886ea31571cd5dc6eb553e849fab3c0509ea2c3a045a246178c
+  languageName: node
+  linkType: hard
+
 "@types/graceful-fs@npm:^4.1.3":
   version: 4.1.9
   resolution: "@types/graceful-fs@npm:4.1.9"
@@ -1857,6 +1873,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chroma-js@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "chroma-js@npm:3.1.1"
+  checksum: 10c0/fb5e3cd958a954b8cd44017f70aff42ae37bc561cdcea0ebeeb6d2df5989e7402e02c674274af2eefd1478ee172e05ce51ac353e3cbe1db139f599b338523339
+  languageName: node
+  linkType: hard
+
 "ci-info@npm:^3.2.0":
   version: 3.9.0
   resolution: "ci-info@npm:3.9.0"
@@ -2024,6 +2047,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"date-fns@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "date-fns@npm:4.1.0"
+  checksum: 10c0/b79ff32830e6b7faa009590af6ae0fb8c3fd9ffad46d930548fbb5acf473773b4712ae887e156ba91a7b3dc30591ce0f517d69fd83bd9c38650fdc03b4e0bac8
+  languageName: node
+  linkType: hard
+
 "debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4":
   version: 4.3.5
   resolution: "debug@npm:4.3.5"
@@ -2123,6 +2153,7 @@ __metadata:
     prettier: "npm:^3.3.3"
     react: "npm:18.3.1"
     react-dom: "npm:18.3.1"
+    react-github-calendar: "npm:^4.3.1"
     sass: "npm:^1.78.0"
     typescript: "npm:5.6.2"
     typescript-eslint: "npm:^8.6.0"
@@ -5013,6 +5044,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-activity-calendar@npm:^2.5.2":
+  version: 2.5.2
+  resolution: "react-activity-calendar@npm:2.5.2"
+  dependencies:
+    "@types/chroma-js": "npm:^2.4.3"
+    chroma-js: "npm:^3.1.1"
+    date-fns: "npm:^4.1.0"
+  peerDependencies:
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  checksum: 10c0/364a0260791a3bd10a19b0c7b39c9a4978b4ab484d108e83c98c950580ad8cfc493f6783ebaf36b24742f6f418c93de5c4a7b5852589b34092ec11267daa845a
+  languageName: node
+  linkType: hard
+
 "react-dom@npm:18.3.1":
   version: 18.3.1
   resolution: "react-dom@npm:18.3.1"
@@ -5025,6 +5070,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-error-boundary@npm:^4.0.12":
+  version: 4.0.13
+  resolution: "react-error-boundary@npm:4.0.13"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+  peerDependencies:
+    react: ">=16.13.1"
+  checksum: 10c0/6f3e0e4d7669f680ccf49c08c9571519c6e31f04dcfc30a765a7136c7e6fbbbe93423dd5a9fce12107f8166e54133e9dd5c2079a00c7a38201ac811f7a28b8e7
+  languageName: node
+  linkType: hard
+
+"react-github-calendar@npm:^4.3.1":
+  version: 4.3.1
+  resolution: "react-github-calendar@npm:4.3.1"
+  dependencies:
+    react-activity-calendar: "npm:^2.5.2"
+    react-error-boundary: "npm:^4.0.12"
+  peerDependencies:
+    react: ^17.0.0 || ^18.0.0
+    react-dom: ^17.0.0 || ^18.0.0
+  checksum: 10c0/4533baed2973c30eaee038bac2eca915646c4e87e8b2ff6d5e61239db072aba3976851482f866e80ce8b64932393381b30d0f9e9e8ecef4d04bd4db98a5ac6a0
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.1":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -5072,6 +5141,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"regenerator-runtime@npm:^0.14.0":
+  version: 0.14.1
+  resolution: "regenerator-runtime@npm:0.14.1"
+  checksum: 10c0/1b16eb2c4bceb1665c89de70dcb64126a22bc8eb958feef3cd68fe11ac6d2a4899b5cd1b80b0774c7c03591dc57d16631a7f69d2daa2ec98100e2f29f7ec4cc4
+  languageName: node
+  linkType: hard
+
 "regexp.prototype.flags@npm:^1.5.2":
   version: 1.5.2
   resolution: "regexp.prototype.flags@npm:1.5.2"