Add PlainBudget landing

Beelink · Beelink · commit 1fc59953abc6 · 2025-02-26T18:20:01.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -13,7 +13,6 @@ dist-ssr
 *.local
 
 # Editor directories and files
-.vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,10 @@
+{
+  "search.exclude": {
+    "**/.git": true,
+    "**/node_modules": true,
+    "**/docs": true,
+    "**/dist": true,
+    "**/tmp": true
+  },
+  "editor.formatOnSave": true
+}
diff --git a/public/assets/images/icons/google-material-icons/ic:baseline-android.svg b/public/assets/images/icons/google-material-icons/ic:baseline-android.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="m17.6 9.48l1.84-3.18c.16-.31.04-.69-.26-.85a.637.637 0 0 0-.83.22l-1.88 3.24a11.46 11.46 0 0 0-8.94 0L5.65 5.67a.643.643 0 0 0-.87-.2c-.28.18-.37.54-.22.83L6.4 9.48A10.78 10.78 0 0 0 1 18h22a10.78 10.78 0 0 0-5.4-8.52M7 15.25a1.25 1.25 0 1 1 0-2.5a1.25 1.25 0 0 1 0 2.5m10 0a1.25 1.25 0 1 1 0-2.5a1.25 1.25 0 0 1 0 2.5"/></svg>
diff --git a/public/assets/images/iphone.png b/public/assets/images/iphone.png
diff --git a/public/assets/images/projects/plain-budget/1.webp b/public/assets/images/projects/plain-budget/1.webp
diff --git a/public/assets/images/projects/plain-budget/2.webp b/public/assets/images/projects/plain-budget/2.webp
diff --git a/public/assets/images/projects/plain-budget/icon.webp b/public/assets/images/projects/plain-budget/icon.webp
diff --git a/src/assets/scss/global.scss b/src/assets/scss/global.scss
@@ -22,6 +22,7 @@ code {
 
 img {
   vertical-align: top;
+  -webkit-user-drag: none;
 }
 
 a {
diff --git a/src/components/App/index.scss b/src/components/App/index.scss
@@ -9,6 +9,8 @@
   &__page {
     padding: var(--size-xl) 0;
     flex: 1;
+    display: flex;
+    flex-direction: column;
   }
 
   &__effects {
diff --git a/src/components/ProjectsList/Props.ts b/src/components/ProjectsList/Props.ts
@@ -1,6 +1,6 @@
-import { Project } from '@/interfaces/Project'
+import { Platform } from '@/enums/Platform'
 
 export interface Props {
-  projects: Project[]
+  projects: { title: string; description: string; href: string; image: string; platforms: Platform[] }[]
   size?: 'large' | 'small'
 }
diff --git a/src/components/ProjectsList/index.tsx b/src/components/ProjectsList/index.tsx
@@ -13,10 +13,10 @@ export const ProjectsList: FC<Props> = ({ projects, size = 'large' }) => {
             key={index}
             className="projects-list__project"
             title={project.title}
-            description={project.shortDescription}
+            description={project.description}
             href={project.href}
-            image={project.images[0]}
-            platforms={project.downloads.map((d) => d.platform)}
+            image={project.image}
+            platforms={project.platforms}
             size={size}
           />
         )
diff --git a/src/enums/Platform.ts b/src/enums/Platform.ts
@@ -1,4 +1,6 @@
 export enum Platform {
   win = 'Win',
   mac = 'Mac',
+  ios = 'iOS',
+  android = 'Android',
 }
diff --git a/src/pages/HomePage/index.tsx b/src/pages/HomePage/index.tsx
@@ -2,13 +2,33 @@ import { FC } from 'react'
 import { ProjectsList } from '@/components/ProjectsList'
 import { mainConfig } from '@/config/Main'
 import { PageMeta } from '@/components/PageMeta'
+// import { Platform } from '@/enums/Platform'
 
 export const HomePage: FC = () => {
+  const projects = mainConfig.projects.map((project) => ({
+    title: project.title,
+    description: project.shortDescription,
+    image: project.images[0],
+    href: project.href,
+    platforms: project.downloads.map((download) => download.platform),
+  }))
+
   return (
     <div className="home-page">
       <PageMeta title={mainConfig.title} />
 
-      <ProjectsList projects={mainConfig.projects} />
+      <ProjectsList
+        projects={[
+          // {
+          //   href: '/plainbudget',
+          //   image: '/assets/images/projects/plain-budget/2.webp',
+          //   title: 'PlainBudget',
+          //   description: 'Expense and income tracking app that will help you keep an eye on your finances',
+          //   platforms: [Platform.ios, Platform.android],
+          // },
+          ...projects,
+        ]}
+      />
     </div>
   )
 }
diff --git a/src/pages/PlainBudgetPage/index.scss b/src/pages/PlainBudgetPage/index.scss
@@ -0,0 +1,146 @@
+.plain-budget-page {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &__head {
+    display: flex;
+    gap: var(--size-mx);
+  }
+
+  &__head-col {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    &:first-child {
+      flex-basis: 40%;
+    }
+
+    &:last-child {
+      flex: 1;
+    }
+  }
+
+  &__phone-holder {
+    position: relative;
+  }
+
+  &__phone {
+    width: 100%;
+    position: relative;
+    z-index: 1;
+  }
+
+  &__screenshot {
+    position: absolute;
+    left: 8%;
+    width: 84%;
+    top: 2.5%;
+    height: 94.8%;
+    border-radius: 30px;
+    overflow: hidden;
+
+    & > img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  &__app-icon {
+    filter: var(--shadow-lg);
+  }
+
+  &__title {
+    font-size: var(--font-size-mx);
+    margin: var(--size-lg) 0;
+    font-weight: var(--font-weight-lg);
+    line-height: var(--font-size-mx2);
+  }
+
+  &__description {
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-md);
+  }
+
+  &__buttons {
+    display: flex;
+    padding-top: var(--size-xl);
+    animation-name: mount-slide;
+    animation-duration: var(--duration-t);
+    flex-wrap: wrap;
+    margin: calc(-1 * var(--size-md));
+  }
+
+  &__button-holder {
+    display: flex;
+    flex-direction: column;
+    padding: var(--size-md);
+  }
+
+  &__button-holder:hover &__button {
+    filter: var(--shadow-xl);
+    transform: translateY(calc(var(--size-md) * -1));
+  }
+
+  &__button {
+    border: none;
+    padding: var(--size-md) var(--font-size-lg) var(--size-md) var(--size-lg);
+    display: flex;
+    align-items: center;
+    border-radius: var(--size-md);
+    cursor: pointer;
+    text-decoration: none;
+    justify-content: center;
+    background: var(--color-text);
+    color: var(--color-bg);
+    filter: var(--shadow-lg);
+    transition: filter var(--duration-t), transform var(--duration-t);
+
+    img {
+      filter: invert(1);
+      margin-right: var(--size-lg);
+    }
+  }
+
+  &__button-text {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+  }
+
+  &__button-text-prefix {
+    opacity: 0.5;
+    font-size: var(--font-size-sm);
+    margin-bottom: calc(-1 * var(--size-sm));
+    margin-top: var(--size-xs);
+  }
+
+  &__button-text-postfix {
+    font-size: var(--font-size-lg);
+  }
+
+  @media (max-width: 992px) {
+    &__head {
+      gap: var(--size-lg);
+    }
+  }
+
+  @media (max-width: 768px) {
+    &__head {
+      flex-direction: column-reverse;
+      text-align: center;
+      gap: var(--size-mx);
+    }
+
+    &__buttons {
+      justify-content: center;
+    }
+
+    &__head-col {
+      align-items: center;
+    }
+  }
+}
diff --git a/src/pages/PlainBudgetPage/index.tsx b/src/pages/PlainBudgetPage/index.tsx
@@ -0,0 +1,59 @@
+import { FC } from 'react'
+import { Link } from '@/components/Link'
+import './index.scss'
+import { PageMeta } from '@/components/PageMeta'
+
+export const PlainBudgetPage: FC = () => {
+  const authorName = 'Eugene Volynko'
+  const authorUrl = 'https://www.linkedin.com/in/eugene-volynko-a98564193'
+  const appIcon = '/assets/images/projects/plain-budget/icon.webp'
+  const title = 'PlainBudget'
+  const shortDescription = 'Expense and income tracking app that will help you keep an eye on your finances'
+  const iosUrl = ''
+  const androidUrl = ''
+
+  return (
+    <div className="plain-budget-page">
+      <PageMeta title={`${title} - ${shortDescription}`} />
+
+      <div className="plain-budget-page__head">
+        <div className="plain-budget-page__head-col">
+          <div className="plain-budget-page__phone-holder">
+            <img className="plain-budget-page__phone" src="/assets/images/iphone.png" alt="" />
+            <div className="plain-budget-page__screenshot">
+              <img src="/assets/images/projects/plain-budget/1.webp" alt="" />
+            </div>
+          </div>
+        </div>
+        <div className="plain-budget-page__head-col">
+          <img width={128} height={128} className="plain-budget-page__app-icon" src={appIcon} alt={title} />
+          <h1 className="plain-budget-page__title">{title}</h1>
+          <h2 className="plain-budget-page__description">
+            {shortDescription}.<br />
+            Developed by <Link className="plain-budget-page__author" href={authorUrl} text={authorName} />
+          </h2>
+          <div className="plain-budget-page__buttons">
+            <div className="plain-budget-page__button-holder">
+              <a className="plain-budget-page__button" href={iosUrl}>
+                <img width={32} height={32} src="/assets/images/icons/google-material-icons/ic:baseline-apple.svg" alt="Download" />
+                <div className="plain-budget-page__button-text">
+                  <div className="plain-budget-page__button-text-prefix">Get iOS app on</div>
+                  <div className="plain-budget-page__button-text-postfix">App Store</div>
+                </div>
+              </a>
+            </div>
+            <div className="plain-budget-page__button-holder">
+              <a className="plain-budget-page__button" href={androidUrl}>
+                <img width={32} height={32} src="/assets/images/icons/google-material-icons/ic:baseline-android.svg" alt="Download" />
+                <div className="plain-budget-page__button-text">
+                  <div className="plain-budget-page__button-text-prefix">Get Android app on</div>
+                  <div className="plain-budget-page__button-text-postfix">Google Play</div>
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/pages/ProjectPage/index.tsx b/src/pages/ProjectPage/index.tsx
@@ -191,7 +191,18 @@ export const ProjectPage: FC<Props> = ({ project }) => {
       <h2 className="project-page__tile-heading">Contributors</h2>
       <div className="project-page__tile">{isLoading ? <Loading /> : <Contributors contributors={contributors} />}</div>
       <h2 className="project-page__tile-heading">Check out our other awesome apps!</h2>
-      <ProjectsList size="small" projects={mainConfig.projects.filter((p) => p.href !== project.href)} />
+      <ProjectsList
+        size="small"
+        projects={mainConfig.projects
+          .filter((p) => p.href !== project.href)
+          .map((project) => ({
+            title: project.title,
+            description: project.shortDescription,
+            image: project.images[0],
+            href: project.href,
+            platforms: project.downloads.map((download) => download.platform),
+          }))}
+      />
     </div>
   )
 }
diff --git a/src/routes/dictionary.ts b/src/routes/dictionary.ts
@@ -2,4 +2,5 @@ export const routeDictionary = {
   home: () => '/',
   about: () => '/about',
   project: (href: string) => href,
+  plainbudget: () => '/plainbudget',
 }
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -8,6 +8,7 @@ import { mainConfig } from '@/config/Main'
 import { HomePage } from '@/pages/HomePage'
 import { AboutPage } from '@/pages/AboutPage'
 import { ProjectPage } from '@/pages/ProjectPage'
+import { PlainBudgetPage } from '@/pages/PlainBudgetPage'
 
 export const routes: RouteRecord[] = [
   {
@@ -25,6 +26,11 @@ export const routes: RouteRecord[] = [
         path: routeDictionary.about(),
         element: <AboutPage />,
       },
+      {
+        id: 'PlainBudgetPage',
+        path: routeDictionary.plainbudget(),
+        element: <PlainBudgetPage />,
+      },
       ...mainConfig.projects.map((project) => ({
         id: `ProjectPage--${project.href}`,
         path: routeDictionary.project(project.href),

Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,7 @@ code {`
`22`	`22`
`23`	`23`	`img {`
`24`	`24`	`vertical-align: top;`
	`25`	`+ -webkit-user-drag: none;`
`25`	`26`	`}`
`26`	`27`
`27`	`28`	`a {`
Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,8 @@`
`9`	`9`	`&__page {`
`10`	`10`	`padding: var(--size-xl) 0;`
`11`	`11`	`flex: 1;`
	`12`	`+ display: flex;`
	`13`	`+ flex-direction: column;`
`12`	`14`	`}`
`13`	`15`
`14`	`16`	`&__effects {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`		`-import { Project } from '@/interfaces/Project'`
	`1`	`+import { Platform } from '@/enums/Platform'`
`2`	`2`
`3`	`3`	`export interface Props {`
`4`		`- projects: Project[]`
	`4`	`+ projects: { title: string; description: string; href: string; image: string; platforms: Platform[] }[]`
`5`	`5`	`size?: 'large' \| 'small'`
`6`	`6`	`}`