From 34bf1b0ca5e5ebb312dfcc544f11945bb8368004 Mon Sep 17 00:00:00 2001 From: fcablik Date: Fri, 22 Dec 2023 16:31:15 +0100 Subject: [PATCH] FE progress, styles, icons, imgs, fixes, classlists, classes, styles, layout, elements, svgs, twd extentions, etc. --- app/components/_menu.tsx | 12 +-- app/components/classlists.tsx | 12 ++- app/components/modal-helpers.tsx | 21 ++++- app/components/ui/icons/nameStrings.ts | 50 ++++++++++-- app/components/ui/icons/nameTypes.d.ts | 77 ++++++++++--------- app/components/ui/icons/sprite.svg | 28 +++++++ app/routes/_base+/index.tsx | 44 +++++++---- app/routes/about+/index.tsx | 6 +- app/routes/about+/phil.tsx | 2 +- app/routes/about+/wochlife.tsx | 2 +- app/routes/about.tsx | 13 +--- app/routes/portfolio+/forcompanies.tsx | 2 +- app/routes/portfolio+/freelance.tsx | 2 +- app/routes/portfolio+/index.tsx | 6 +- app/routes/portfolio.tsx | 17 ++-- app/routes/projects+/index.tsx | 6 +- .../{forcompanies.tsx => nft-collection.tsx} | 8 +- app/routes/projects+/streetwear.tsx | 13 ++++ .../projects+/{freelance.tsx => web-dev.tsx} | 4 +- app/routes/projects+/web3-nft-game.tsx | 13 ++++ app/routes/projects.tsx | 69 +++++++++++------ app/styles/customComponents.css | 10 +-- app/utils/extended-theme.ts | 3 + other/svg-icons/accessibility.svg | 8 ++ other/svg-icons/desktop.svg | 8 ++ other/svg-icons/mix.svg | 8 ++ other/svg-icons/rocket.svg | 8 ++ 27 files changed, 313 insertions(+), 139 deletions(-) rename app/routes/projects+/{forcompanies.tsx => nft-collection.tsx} (54%) create mode 100644 app/routes/projects+/streetwear.tsx rename app/routes/projects+/{freelance.tsx => web-dev.tsx} (73%) create mode 100644 app/routes/projects+/web3-nft-game.tsx create mode 100644 other/svg-icons/accessibility.svg create mode 100644 other/svg-icons/desktop.svg create mode 100644 other/svg-icons/mix.svg create mode 100644 other/svg-icons/rocket.svg diff --git a/app/components/_menu.tsx b/app/components/_menu.tsx index e36a4b0..5a0f673 100644 --- a/app/components/_menu.tsx +++ b/app/components/_menu.tsx @@ -6,10 +6,10 @@ import { Icon } from './ui/icon.tsx' export function Menu() { function menuItemClassList(isActive: boolean): string { return ( - 'transition-opacity ' + + 'transition-all duration-300 flex flex-col items-center ' + (isActive - ? 'flex flex-col items-center text-highlight lg:after:absolute lg:after:bottom-0 lg:after:w-12 lg:after:rounded-3xl lg:after:border-2 lg:after:border-highlight' - : 'flex flex-col items-center opacity-50 hover:text-highlight') + ? 'text-highlight lg:after:absolute lg:after:bottom-0 lg:after:w-12 lg:after:rounded-3xl lg:after:border-2 lg:after:border-highlight' + : 'opacity-50 hover:text-highlight') ) } const menuItemTextClassList = 'capitalize mt-1 lg:mt-2 font-light' @@ -48,7 +48,7 @@ export function Menu() { {({ isActive }) => (
- +

Portfolio

)} @@ -58,7 +58,7 @@ export function Menu() { {({ isActive }) => (

about

@@ -86,7 +86,7 @@ export function Menu() { href="https://instagram.com/wochlife" target="_blank" rel="noreferrer" - className='hover:text-highlight transition-colors' + className="transition-colors hover:text-highlight" > @wochlife diff --git a/app/components/classlists.tsx b/app/components/classlists.tsx index b9ed323..0d55d75 100644 --- a/app/components/classlists.tsx +++ b/app/components/classlists.tsx @@ -13,6 +13,10 @@ export const boxProps = 'flex flex-col rounded-3xl lg:rounded-6xl pt-4 px-4 md:px-5 md:pt-6' export const darkBoxBgClassList = boxProps + ' bg-dark-gradient' export const purpleBoxBgClassList = boxProps + ' bg-purple-box-gradient' +export const purpleBoxBg40ClassList = boxProps + ' bg-purple-box-gradient-40' + +export const darkContentBoxBgClassList = + 'flex flex-col rounded-3xl lg:rounded-6xl p-4 md:p-5 xl:p-8 bg-dark-gradient' //* box items inside boxes export const boxInnerContentBoxProps = @@ -25,6 +29,9 @@ export const darkBoxInnerContentBox = export const purpleBoxInnerContentBox = boxInnerContentBoxProps + ' bg-highlight-dark/30 hover:bg-highlight-dark transition-colors duration-500 p-2 cursor-pointer rounded-xl' +export const purpleBoxInnerContentBox40 = + boxInnerContentBoxProps + + ' md:hover:bg-highlight-dark transition-colors duration-500 p-2 cursor-pointer rounded-xl' //* box items content export const innerContentBoxTexts = @@ -43,9 +50,10 @@ export const bigBoxTitle = 'capitalize text-center text-2xl font-semibold mb-6' //* content routes (portfolio, projects, about) export const contentsRouteSelectorCol1 = - 'md-to-lg:w-[35%] lg:w-[32%] lg-to-xl:w-[29%] xl:w-[26.502%] md-to-lg:max-w-[460px] sm:max-md-to-lg:w-1/2' + 'md-to-lg:max-w-[300px] xl:max-w-[320px] sm:max-md-to-lg:w-1/2 md-to-lg:w-[35%] lg:w-[32%] lg-to-xl:w-[29%] xl:w-[26.502%]' export const mobContentsRouteSelectorCol1 = - 'max-sm:w-[90%] transition-opacity duration-500 fixed bottom-20 z-2000 max-sm:left-5 sm:right-16 ' + contentsRouteSelectorCol1 + 'max-sm:w-[90%] transition-opacity duration-500 fixed bottom-20 z-2000 max-sm:left-5 sm:right-16 ' + + contentsRouteSelectorCol1 export const contentsRouteContentCol2 = 'w-full md-to-lg:w-[65%] lg:w-[68%] lg-to-xl:w-[71%] xl:w-[73.498%] flex flex-col' export const contentsRouteWrapper = diff --git a/app/components/modal-helpers.tsx b/app/components/modal-helpers.tsx index 10c0237..e46813a 100644 --- a/app/components/modal-helpers.tsx +++ b/app/components/modal-helpers.tsx @@ -39,12 +39,29 @@ export function MobileModalCaretOpener({ )} {!isMobExtraMenuToggled && ( )} ) } + +export function ModalCloserIcon({ + handleToggle, + iconName = "cross-1", +}: { + handleToggle: () => void + iconName?: string +}) { + return ( + + ) +} diff --git a/app/components/ui/icons/nameStrings.ts b/app/components/ui/icons/nameStrings.ts index 2041e2f..0cfc019 100644 --- a/app/components/ui/icons/nameStrings.ts +++ b/app/components/ui/icons/nameStrings.ts @@ -1,7 +1,45 @@ // This file is generated by npm run build:icons - export function IconNames(): string[] { - return [ - "arrow-left","arrow-right","avatar","calendar","camera","caret-down","caret-left","caret-right","caret-up","check","clock","cross-1","dashboard","dots-horizontal","download","envelope-closed","exit","file-text","github-logo","home","laptop","link-2","lock-closed","lock-open-1","magnifying-glass","minus","moon","pencil-1","pencil-2","plus","plus2","question-mark-circled","reset","sun","trash","update" - ]; - }; - \ No newline at end of file +export function IconNames(): string[] { + return [ + 'accessibility', + 'arrow-left', + 'arrow-right', + 'avatar', + 'calendar', + 'camera', + 'caret-down', + 'caret-left', + 'caret-right', + 'caret-up', + 'check', + 'clock', + 'cross-1', + 'dashboard', + 'desktop', + 'dots-horizontal', + 'download', + 'envelope-closed', + 'exit', + 'file-text', + 'github-logo', + 'home', + 'laptop', + 'link-2', + 'lock-closed', + 'lock-open-1', + 'magnifying-glass', + 'minus', + 'mix', + 'moon', + 'pencil-1', + 'pencil-2', + 'plus', + 'plus2', + 'question-mark-circled', + 'reset', + 'rocket', + 'sun', + 'trash', + 'update', + ] +} diff --git a/app/components/ui/icons/nameTypes.d.ts b/app/components/ui/icons/nameTypes.d.ts index 9e7f09e..c98ec0b 100644 --- a/app/components/ui/icons/nameTypes.d.ts +++ b/app/components/ui/icons/nameTypes.d.ts @@ -1,39 +1,42 @@ // This file is generated by npm run build:icons export type IconName = - | "arrow-left" - | "arrow-right" - | "avatar" - | "calendar" - | "camera" - | "caret-down" - | "caret-left" - | "caret-right" - | "caret-up" - | "check" - | "clock" - | "cross-1" - | "dashboard" - | "dots-horizontal" - | "download" - | "envelope-closed" - | "exit" - | "file-text" - | "github-logo" - | "home" - | "laptop" - | "link-2" - | "lock-closed" - | "lock-open-1" - | "magnifying-glass" - | "minus" - | "moon" - | "pencil-1" - | "pencil-2" - | "plus" - | "plus2" - | "question-mark-circled" - | "reset" - | "sun" - | "trash" - | "update"; - \ No newline at end of file + | 'accessibility' + | 'arrow-left' + | 'arrow-right' + | 'avatar' + | 'calendar' + | 'camera' + | 'caret-down' + | 'caret-left' + | 'caret-right' + | 'caret-up' + | 'check' + | 'clock' + | 'cross-1' + | 'dashboard' + | 'desktop' + | 'dots-horizontal' + | 'download' + | 'envelope-closed' + | 'exit' + | 'file-text' + | 'github-logo' + | 'home' + | 'laptop' + | 'link-2' + | 'lock-closed' + | 'lock-open-1' + | 'magnifying-glass' + | 'minus' + | 'mix' + | 'moon' + | 'pencil-1' + | 'pencil-2' + | 'plus' + | 'plus2' + | 'question-mark-circled' + | 'reset' + | 'rocket' + | 'sun' + | 'trash' + | 'update' diff --git a/app/components/ui/icons/sprite.svg b/app/components/ui/icons/sprite.svg index 4fc3e05..0b125fc 100644 --- a/app/components/ui/icons/sprite.svg +++ b/app/components/ui/icons/sprite.svg @@ -2,6 +2,13 @@ + + + + + + + + + + + +
- + {/* - - {/* + */} + - */} +
@@ -221,39 +222,38 @@ export default function Index() {
- - {/* projects/web-dev */} + - - {/* projects/streetwear */} + - - {/* projects/nft-collection */} + - - {/* projects/nft-game */} + @@ -304,16 +304,26 @@ function ProjectsContentBox({ description, innerBoxClass, imgSrc, + iconName, }: { name: string description: string innerBoxClass?: string imgSrc?: string + iconName?: IconName }) { return ( -
-
- {!!imgSrc && imgSrc.length && } +
+
+ {!iconName && !!imgSrc && imgSrc.length && ( + + )} + {!!iconName && iconName.length && ( + + )}

{name}

diff --git a/app/routes/about+/index.tsx b/app/routes/about+/index.tsx index a693212..b545e6f 100644 --- a/app/routes/about+/index.tsx +++ b/app/routes/about+/index.tsx @@ -1,19 +1,19 @@ export default function PortfolioFreelance() { return (
-

+

about

-
about phil
+
about phil
{/*
web dev content
*/}
-
+
about wochlife
diff --git a/app/routes/about+/phil.tsx b/app/routes/about+/phil.tsx index d193c26..08fe875 100644 --- a/app/routes/about+/phil.tsx +++ b/app/routes/about+/phil.tsx @@ -3,7 +3,7 @@ import { Outlet } from '@remix-run/react' export default function PortfolioForCompanies() { return (
-

+

about phil

diff --git a/app/routes/about+/wochlife.tsx b/app/routes/about+/wochlife.tsx index c5ffd7c..9bec084 100644 --- a/app/routes/about+/wochlife.tsx +++ b/app/routes/about+/wochlife.tsx @@ -3,7 +3,7 @@ import { Outlet } from '@remix-run/react' export default function PortfolioFreelance() { return (
-

+

about wochlife

diff --git a/app/routes/about.tsx b/app/routes/about.tsx index 65051a7..1163f3a 100644 --- a/app/routes/about.tsx +++ b/app/routes/about.tsx @@ -10,12 +10,12 @@ import { contentsRouteWrapper, darkBoxBgClassList, darkBoxInnerContentBox, + darkContentBoxBgClassList, innerContentBoxTexts, innerContentBoxWrapperOfBoxesInBox2, mobContentsRouteSelectorCol1, } from '#app/components/classlists.tsx' -import { MobileModalCaretOpener } from '#app/components/modal-helpers.tsx' -import { Icon } from '#app/components/ui/icon.tsx' +import { MobileModalCaretOpener, ModalCloserIcon } from '#app/components/modal-helpers.tsx' import { cn } from '#app/utils/misc.tsx' import { requireUserWithRole } from '#app/utils/permissions.ts' @@ -54,7 +54,7 @@ export default function AboutRoute() { />
-
+
@@ -76,12 +76,7 @@ function RouteSelector({ return (
- + {handleToggle && }

about

diff --git a/app/routes/portfolio+/forcompanies.tsx b/app/routes/portfolio+/forcompanies.tsx index 4c8fac7..7d618b4 100644 --- a/app/routes/portfolio+/forcompanies.tsx +++ b/app/routes/portfolio+/forcompanies.tsx @@ -3,7 +3,7 @@ import { Outlet } from '@remix-run/react' export default function PortfolioForCompanies() { return (
-

+

for companies

diff --git a/app/routes/portfolio+/freelance.tsx b/app/routes/portfolio+/freelance.tsx index 4f8cef6..8eb7fde 100644 --- a/app/routes/portfolio+/freelance.tsx +++ b/app/routes/portfolio+/freelance.tsx @@ -3,7 +3,7 @@ import { Outlet } from '@remix-run/react' export default function PortfolioFreelance() { return (
-

+

freelance

diff --git a/app/routes/portfolio+/index.tsx b/app/routes/portfolio+/index.tsx index 111a94d..f559fe7 100644 --- a/app/routes/portfolio+/index.tsx +++ b/app/routes/portfolio+/index.tsx @@ -1,19 +1,19 @@ export default function PortfolioFreelance() { return (
-

+

portfolio

-
freelance
+
freelance
freelance content
-
+
for companies
diff --git a/app/routes/portfolio.tsx b/app/routes/portfolio.tsx index 44eabbd..2bd6553 100644 --- a/app/routes/portfolio.tsx +++ b/app/routes/portfolio.tsx @@ -10,12 +10,15 @@ import { contentsRouteWrapper, darkBoxBgClassList, darkBoxInnerContentBox, + darkContentBoxBgClassList, innerContentBoxTexts, innerContentBoxWrapperOfBoxesInBox, mobContentsRouteSelectorCol1, } from '#app/components/classlists.tsx' -import { MobileModalCaretOpener } from '#app/components/modal-helpers.tsx' -import { Icon } from '#app/components/ui/icon.tsx' +import { + MobileModalCaretOpener, + ModalCloserIcon, +} from '#app/components/modal-helpers.tsx' import { cn } from '#app/utils/misc.tsx' import { requireUserWithRole } from '#app/utils/permissions.ts' @@ -54,7 +57,7 @@ export default function PortfolioRoute() { />
-
+
@@ -76,13 +79,7 @@ function RouteSelector({ return (
- - + {handleToggle && }

portfolio

diff --git a/app/routes/projects+/index.tsx b/app/routes/projects+/index.tsx index 0aaf108..ced6714 100644 --- a/app/routes/projects+/index.tsx +++ b/app/routes/projects+/index.tsx @@ -1,19 +1,19 @@ export default function PortfolioFreelance() { return (
-

+

wochlife projects

-
Web Dev
+
Web Dev
web dev content
-
+
streetwear art
diff --git a/app/routes/projects+/forcompanies.tsx b/app/routes/projects+/nft-collection.tsx similarity index 54% rename from app/routes/projects+/forcompanies.tsx rename to app/routes/projects+/nft-collection.tsx index 4c8fac7..7b3c3bf 100644 --- a/app/routes/projects+/forcompanies.tsx +++ b/app/routes/projects+/nft-collection.tsx @@ -1,14 +1,12 @@ -import { Outlet } from '@remix-run/react' - export default function PortfolioForCompanies() { return (
-

- for companies +

+ nft-collection

- + content
) diff --git a/app/routes/projects+/streetwear.tsx b/app/routes/projects+/streetwear.tsx new file mode 100644 index 0000000..6f095da --- /dev/null +++ b/app/routes/projects+/streetwear.tsx @@ -0,0 +1,13 @@ +export default function PortfolioForCompanies() { + return ( +
+

+ streetwear +

+ +
+ content +
+
+ ) +} diff --git a/app/routes/projects+/freelance.tsx b/app/routes/projects+/web-dev.tsx similarity index 73% rename from app/routes/projects+/freelance.tsx rename to app/routes/projects+/web-dev.tsx index 4f8cef6..432c02b 100644 --- a/app/routes/projects+/freelance.tsx +++ b/app/routes/projects+/web-dev.tsx @@ -3,8 +3,8 @@ import { Outlet } from '@remix-run/react' export default function PortfolioFreelance() { return (
-

- freelance +

+ web-dev

diff --git a/app/routes/projects+/web3-nft-game.tsx b/app/routes/projects+/web3-nft-game.tsx new file mode 100644 index 0000000..de94dec --- /dev/null +++ b/app/routes/projects+/web3-nft-game.tsx @@ -0,0 +1,13 @@ +export default function PortfolioForCompanies() { + return ( +
+

+ web3 nft online game +

+ +
+ content +
+
+ ) +} diff --git a/app/routes/projects.tsx b/app/routes/projects.tsx index 5cede3a..62dbe1c 100644 --- a/app/routes/projects.tsx +++ b/app/routes/projects.tsx @@ -8,15 +8,18 @@ import { contentsRouteContentCol2, contentsRouteSelectorCol1, contentsRouteWrapper, - darkBoxBgClassList, + darkContentBoxBgClassList, innerContentBoxTexts, innerContentBoxWrapperOfBoxesInBox2, mobContentsRouteSelectorCol1, - purpleBoxBgClassList, - purpleBoxInnerContentBox, + purpleBoxBg40ClassList, + purpleBoxInnerContentBox40, } from '#app/components/classlists.tsx' -import { MobileModalCaretOpener } from '#app/components/modal-helpers.tsx' -import { Icon } from '#app/components/ui/icon.tsx' +import { + MobileModalCaretOpener, + ModalCloserIcon, +} from '#app/components/modal-helpers.tsx' +import { Icon, type IconName } from '#app/components/ui/icon.tsx' import { cn } from '#app/utils/misc.tsx' import { requireUserWithRole } from '#app/utils/permissions.ts' @@ -55,7 +58,7 @@ export default function ProjectsRoute() { />
-
+
@@ -77,13 +80,8 @@ function RouteSelector({ return (
-
- +
+ {handleToggle && }

projects

@@ -91,10 +89,14 @@ function RouteSelector({ {({ isActive }) => ( )} @@ -102,21 +104,29 @@ function RouteSelector({ {({ isActive }) => ( )} - + {({ isActive }) => ( )} @@ -124,10 +134,14 @@ function RouteSelector({ {({ isActive }) => ( )} @@ -143,25 +157,30 @@ function ProjectsContentBox({ boxClass, innerBoxClass, imgSrc, + iconName, }: { name: string description: string boxClass?: string innerBoxClass?: string imgSrc?: string + iconName?: IconName }) { return ( -
+
- {!!imgSrc && imgSrc.length && ( + {!iconName && !!imgSrc && imgSrc.length && ( )} + {!!iconName && iconName.length && ( + + )}

{name}

diff --git a/app/styles/customComponents.css b/app/styles/customComponents.css index 36e1d4d..68bd862 100644 --- a/app/styles/customComponents.css +++ b/app/styles/customComponents.css @@ -71,7 +71,7 @@ @media (min-width: 768px) { @media (max-height: 799px){ .custom-max-heights { - @apply max-h-[545px]; + @apply max-h-[565px]; } } } @@ -86,7 +86,7 @@ } @media (min-height: 800px){ .custom-max-heights { - @apply max-h-[555px]; + @apply max-h-[575px]; } .custom-max-margin-welcome-box { @apply mt-20; @@ -98,12 +98,12 @@ @apply max-h-[183px]; } .custom-projects-box-max-height { - max-height: 298px; + max-height: 318px; } } @media (min-height: 870px){ .custom-max-heights { - @apply max-h-[595px]; + @apply max-h-[635px]; } .custom-content-sections-height { @apply max-h-[207px]; @@ -112,7 +112,7 @@ @apply mt-20; } .custom-projects-box-max-height { - max-height: 340px; + max-height: 360px; } } diff --git a/app/utils/extended-theme.ts b/app/utils/extended-theme.ts index 63f5c9a..1182354 100644 --- a/app/utils/extended-theme.ts +++ b/app/utils/extended-theme.ts @@ -200,6 +200,8 @@ export const extendedTheme = { 'linear-gradient(to bottom right, rgba(24, 24, 24, .86) 0%, rgba(18, 18, 18, .86) 50%, rgba(16, 16, 16, .9) 100%)', 'purple-box-gradient': 'linear-gradient(to bottom right, rgba(106, 95, 243, .7) 0%, rgba(117, 99, 247, .7) 50%, rgba(130, 96, 245, .7) 100%)', + 'purple-box-gradient-40': + 'linear-gradient(to bottom right, rgba(106, 95, 243, .3) 0%, rgba(117, 99, 247, .3) 50%, rgba(130, 96, 245, .3) 100%)', 'light-green-radial-gradient': 'radial-gradient(circle, #85F1C5, #83D9CD)', 'medi-radial-gradient': 'radial-gradient(circle, #A40E68, #A40E68)', 'medi-logo': 'url("/img/medi.webp")', @@ -207,6 +209,7 @@ export const extendedTheme = { '11ts-logo': 'url("/img/11ts.webp")', 't4s-radial-gradient': 'radial-gradient(circle, #D07009, #F98305)', 't4s-logo': 'url("/img/t4s.webp")', + 'light-blue-radial-gradient': 'radial-gradient(circle, #85BDF1, #83A5D9)', }, padding: { '18': '4.5rem', diff --git a/other/svg-icons/accessibility.svg b/other/svg-icons/accessibility.svg new file mode 100644 index 0000000..32d78f2 --- /dev/null +++ b/other/svg-icons/accessibility.svg @@ -0,0 +1,8 @@ + + + diff --git a/other/svg-icons/desktop.svg b/other/svg-icons/desktop.svg new file mode 100644 index 0000000..ad252e6 --- /dev/null +++ b/other/svg-icons/desktop.svg @@ -0,0 +1,8 @@ + + + diff --git a/other/svg-icons/mix.svg b/other/svg-icons/mix.svg new file mode 100644 index 0000000..9412a01 --- /dev/null +++ b/other/svg-icons/mix.svg @@ -0,0 +1,8 @@ + + + diff --git a/other/svg-icons/rocket.svg b/other/svg-icons/rocket.svg new file mode 100644 index 0000000..2226aac --- /dev/null +++ b/other/svg-icons/rocket.svg @@ -0,0 +1,8 @@ + + +