diff --git a/app/components/index.ts b/app/components/index.ts index 3b2f8fe..d26f5fd 100644 --- a/app/components/index.ts +++ b/app/components/index.ts @@ -1,2 +1,3 @@ export * from "./Footer"; export * from "./Header"; +export * from "./Section"; diff --git a/app/components/posts/Posts.css.ts b/app/components/posts/Posts.css.ts index 12246b2..077a665 100644 --- a/app/components/posts/Posts.css.ts +++ b/app/components/posts/Posts.css.ts @@ -1,25 +1,25 @@ import { css } from "hono/css"; -const postsStyle = { - wrapper: css` - display: flex; - flex-direction: column; - gap: 16px; - margin-top: 32px; - `, - item: css` - display: flex; - flex-direction: column; - gap: 8px; - width: 100%; - padding: 16px; - border: 1px solid #ccc; - border-radius: 8px; - `, - itemTitle: css` - font-size: 20px; - font-weight: bold; - `, -}; +const postsWrapper = css` + display: flex; + flex-direction: column; + gap: 16px; + margin-top: 32px; +`; -export { postsStyle }; +const postsItem = css` + display: flex; + flex-direction: column; + gap: 8px; + width: 100%; + padding: 16px; + border: 1px solid #ccc; + border-radius: 8px; +`; + +const postsItemTitle = css` + font-size: 20px; + font-weight: bold; +`; + +export { postsItem, postsItemTitle, postsWrapper }; diff --git a/app/components/posts/Posts.tsx b/app/components/posts/Posts.tsx index 37bb54d..eab845b 100644 --- a/app/components/posts/Posts.tsx +++ b/app/components/posts/Posts.tsx @@ -1,7 +1,7 @@ import type { FC } from "hono/jsx"; import type { Post } from "../../api/posts/model"; import { Section } from "../Section"; -import { postsStyle } from "./Posts.css"; +import { postsItem, postsItemTitle, postsWrapper } from "./Posts.css"; type Props = { posts: Post[]; @@ -10,12 +10,12 @@ type Props = { const Posts: FC = ({ posts }) => { return (
-
+
{posts.map((post) => { return ( - + {post.publishedAt} - {post.title} + {post.title} ); })} diff --git a/app/components/profile/ProfileLinks.css.ts b/app/components/profile/ProfileLinks.css.ts index 2720d50..db1628e 100644 --- a/app/components/profile/ProfileLinks.css.ts +++ b/app/components/profile/ProfileLinks.css.ts @@ -1,6 +1,6 @@ import { css } from "hono/css"; -const linkCardContainer = css` +const profileLinkCardContainer = css` display: grid; grid-template-columns: 1fr 1fr; gap: 16px; @@ -11,7 +11,7 @@ const linkCardContainer = css` } `; -const linkCard = css` +const profileLinkCard = css` display: flex; justify-content: center; align-items: center; @@ -19,28 +19,28 @@ const linkCard = css` border-radius: 8px; `; -const linkCardIcon = css` +const profileLinkCardIcon = css` width: 67px; height: 67px; `; const github = css` - ${linkCard} + ${profileLinkCard} fill: #ffffff; background: rgb(205,188,255); background: linear-gradient(90deg, rgba(205,188,255,0.4515931372549019) -27%, rgba(92,80,118,1) 0%, rgba(116,84,205,1) 0%, rgba(118,83,196,1) 0%, rgba(129,92,200,1) 0%, rgba(46,47,62,0.9137780112044818) 0%, rgba(198,195,209,0.8521533613445378) 100%, rgba(230,14,221,1) 100%, rgba(237,235,246,1) 100%, rgba(0,0,82,1) 100%, rgba(3,1,9,0.4515931372549019) 100%); `; const qiita = css` - ${linkCard} + ${profileLinkCard} background: rgb(205,188,255); background: linear-gradient(90deg, rgba(205,188,255,0.4515931372549019) -27%, rgba(92,80,118,1) 0%, rgba(116,84,205,1) 0%, rgba(118,83,196,1) 0%, rgba(92,200,121,1) 0%, rgba(25,230,34,0.4515931372549019) 100%, rgba(106,217,191,0.9249824929971989) 100%, rgba(198,195,209,0.8521533613445378) 100%, rgba(230,14,221,1) 100%, rgba(237,235,246,1) 100%, rgba(0,0,82,1) 100%); `; const cosense = css` - ${linkCard} + ${profileLinkCard} background: rgb(2,0,36); background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(208,108,7,1) 0%, rgba(194,156,24,1) 0%, rgba(187,180,32,1) 40%, rgba(0,212,255,1) 100%); `; -export { linkCardContainer, linkCard, linkCardIcon, github, qiita, cosense }; +export { profileLinkCard, profileLinkCardIcon, profileLinkCardContainer, github, qiita, cosense }; diff --git a/app/components/profile/ProfileLinks.tsx b/app/components/profile/ProfileLinks.tsx index 783ea56..74b4388 100644 --- a/app/components/profile/ProfileLinks.tsx +++ b/app/components/profile/ProfileLinks.tsx @@ -1,6 +1,6 @@ import { CosenseIcon, GitHubIcon, QiitaIcon } from "../icons"; import { Section } from "../Section"; -import { cosense, github, linkCardContainer, linkCardIcon, qiita } from "./ProfileLinks.css"; +import { cosense, github, profileLinkCardContainer, profileLinkCardIcon, qiita } from "./ProfileLinks.css"; const links = [ { @@ -26,10 +26,10 @@ const links = [ const ProfileLinks = () => { return (
-
+
{links.map((link) => ( -
{link.icon}
+
{link.icon}
 ))}
diff --git a/app/components/profile/ProfileMain.css.ts b/app/components/profile/ProfileMain.css.ts index b29f6ab..3b5e4f5 100644 --- a/app/components/profile/ProfileMain.css.ts +++ b/app/components/profile/ProfileMain.css.ts @@ -1,18 +1,18 @@ import { css } from "hono/css"; -const main = css` +const profileMain = css` display: flex; justify-content: space-between; align-items: center; `; -const mainBox = css` +const profileMainBox = css` display: flex; flex-direction: column; gap: 12px; `; -const mainImage = css` +const profileMainImage = css` width: 100px; height: 100px; border-radius: 12px; @@ -23,19 +23,19 @@ const mainImage = css` } `; -const mainName = css` +const profileMainName = css` font-size: 28px; font-weight: bold; `; -const mainBelonging = css` +const profileMainBelonging = css` display: flex; flex-direction: column; gap: 8px; font-size: 16px; `; -const mainIntroduction = css` +const profileMainIntroduction = css` display: flex; flex-direction: column; gap: 16px; @@ -43,4 +43,11 @@ const mainIntroduction = css` font-size: 16px; `; -export { main, mainBox, mainImage, mainName, mainBelonging, mainIntroduction }; +export { + profileMain, + profileMainBox, + profileMainImage, + profileMainName, + profileMainBelonging, + profileMainIntroduction, +}; diff --git a/app/components/profile/ProfileMain.tsx b/app/components/profile/ProfileMain.tsx index 88e9324..14d59dc 100644 --- a/app/components/profile/ProfileMain.tsx +++ b/app/components/profile/ProfileMain.tsx @@ -1,20 +1,27 @@ -import { main, mainBelonging, mainBox, mainImage, mainIntroduction, mainName } from "./ProfileMain.css"; +import { + profileMain, + profileMainBelonging, + profileMainBox, + profileMainImage, + profileMainIntroduction, + profileMainName, +} from "./ProfileMain.css"; const ProfileMain = () => { return (
-
-
- Seiya Tagami / taga3s -
    +
    +
    + Seiya Tagami / taga3s +
    • Web Developer (working as an intern)
    - me + me
    -
      +
      • πŸ› οΈ γ‚γγ‚γγ™γ‚‹γ‚ˆγ†γͺγƒ’γƒŽγ₯γγ‚ŠγŒγ—γŸγ„γ€‚
      • 🐳 Web、法律、ラーパン...γͺζ—₯常。
      • πŸ€ をニパ/ζΌ«η”»γ‚„γ‚²γƒΌγƒ γŒε₯½γγ€‚
        • diff --git a/app/components/works/WorksList.css.ts b/app/components/works/WorksList.css.ts index 235a0c1..8c70d60 100644 --- a/app/components/works/WorksList.css.ts +++ b/app/components/works/WorksList.css.ts @@ -28,36 +28,46 @@ const worksListItemImg = css` border-radius: 8px; `; -const worksListItemDetail = { - wrapper: css` - position: absolute; - bottom: 0; - left: 0; - right: 0; - display: flex; - flex-direction: column; - gap: 6px; - width: 100%; - padding: 16px; - opacity: 0.9; - border-radius: 4px; - color: #6a5ed1; - `, - header: css` - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - `, - icon: css` - width: 24px; - height: 24px; - fill: #6a5ed1; - `, - title: css` - font-size: 24px; - font-weight: bold; - `, -}; +const worksListItemDetailWrapper = css` + position: absolute; + bottom: 0; + left: 0; + right: 0; + display: flex; + flex-direction: column; + gap: 6px; + width: 100%; + padding: 16px; + opacity: 0.9; + border-radius: 4px; + color: #6a5ed1; +`; -export { worksListContainer, worksList, worksListItem, worksListItemImg, worksListItemDetail }; +const worksListItemDetailHeader = css` + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +`; + +const worksListItemDetailTitle = css` + font-size: 20px; + font-weight: bold; +`; + +const worksListItemDetailIcon = css` + width: 24px; + height: 24px; + fill: #6a5ed1; +`; + +export { + worksListContainer, + worksList, + worksListItem, + worksListItemImg, + worksListItemDetailWrapper, + worksListItemDetailHeader, + worksListItemDetailTitle, + worksListItemDetailIcon, +}; diff --git a/app/components/works/WorksList.tsx b/app/components/works/WorksList.tsx index 0c7a349..d443500 100644 --- a/app/components/works/WorksList.tsx +++ b/app/components/works/WorksList.tsx @@ -1,6 +1,14 @@ import type { FC } from "hono/jsx"; import { Section } from "../Section"; -import { worksList, worksListItem, worksListItemDetail, worksListItemImg } from "./WorksList.css"; +import { + worksList, + worksListItem, + worksListItemDetailHeader, + worksListItemDetailIcon, + worksListItemDetailTitle, + worksListItemDetailWrapper, + worksListItemImg, +} from "./WorksList.css"; import type { Work } from "../../api/works"; import { GitHubIcon } from "../icons"; @@ -15,10 +23,10 @@ const WorksList: FC = ({ works }) => { {works.map((work) => (
      • {work.title} -
        -
        -

        {work.title}

        - +
        +
        +

        {work.title}

        +
        diff --git a/app/routes/_renderer.tsx b/app/routes/_renderer.tsx index 917b38b..aad8073 100644 --- a/app/routes/_renderer.tsx +++ b/app/routes/_renderer.tsx @@ -54,7 +54,7 @@ export default jsxRenderer(({ children, title }) => { Sorry, Out of Service.

        }> - {children} +
        {children}