Skip to content

Commit

Permalink
fix: profile css naming
Browse files Browse the repository at this point in the history
  • Loading branch information
taga3s committed Aug 7, 2024
1 parent 8b51a0c commit c582479
Show file tree
Hide file tree
Showing 22 changed files with 102 additions and 97 deletions.
6 changes: 3 additions & 3 deletions app/components/Footer.css.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { css } from "hono/css";

const Layout = css`
const footerLayout = css`
margin-top: 80px;
`;

const Content = css`
const footerContent = css`
padding: 20px 0;
`;

export { Layout, Content };
export { footerLayout, footerContent };
6 changes: 3 additions & 3 deletions app/components/Footer.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { Content, Layout } from "./Footer.css";
import { footerContent, footerLayout } from "./Footer.css";

const Footer = () => {
return (
<footer class={Layout}>
<div class={Content}>
<footer class={footerLayout}>
<div class={footerContent}>
<small>&copy; 2024 taga3s</small>
</div>
</footer>
Expand Down
6 changes: 3 additions & 3 deletions app/components/Header.css.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { css } from "hono/css";

const Layout = css`
const headerContent = css`
padding: 32px 20px;
display: flex;
justify-content: end;
`;

const Links = css`
const headerNav = css`
display: flex;
gap: 24px;
`;

export { Layout, Links };
export { headerContent, headerNav };
16 changes: 6 additions & 10 deletions app/components/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,15 @@
import { Layout, Links } from "./Header.css";
import { headerContent, headerNav } from "./Header.css";

const Header = () => {
return (
<header class={Layout}>
<ul class={Links}>
<li>
<header>
<div class={headerContent}>
<nav class={headerNav}>
<a href="/">about me</a>
</li>
<li>
<a href="/history">history</a>
</li>
<li>
<a href="/works">works</a>
</li>
</ul>
</nav>
</div>
</header>
);
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import { css } from "hono/css";

const Layout = css``;

const Header = css`
const sectionHeader = css`
font-size: 24px;
font-weight: bold;
`;

export { Layout, Header };
export { sectionHeader };
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { FC, JSX } from "hono/jsx";
import { Header, Layout } from "./Section.css";
import { sectionHeader } from "./Section.css";

type Props = {
title: string;
Expand All @@ -10,8 +10,8 @@ const Section: FC<Props> = (props) => {
const { title, children } = props;

return (
<section class={Layout}>
<h2 class={Header}>{title}</h2>
<section>
<h2 class={sectionHeader}>{title}</h2>
{children}
</section>
);
Expand Down
6 changes: 3 additions & 3 deletions app/components/history/HistoryEducationalBackground.css.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import { css } from "hono/css";

const list = css`
const educationalBackgroundList = css`
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 32px;
`;

const listItem = css`
const educationalBackgroundListItem = css`
display: flex;
gap: 16px;
`;

export { list, listItem };
export { educationalBackgroundList, educationalBackgroundListItem };
8 changes: 4 additions & 4 deletions app/components/history/HistoryEducationalBackground.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { Section } from "../layout/Section";
import { list, listItem } from "./HistoryEducationalBackground.css";
import { Section } from "../Section";
import { educationalBackgroundList, educationalBackgroundListItem } from "./HistoryEducationalBackground.css";

const HistoryEducationalBackground = () => {
return (
<Section title="Educational background">
<ul class={list}>
<li class={listItem}>
<ul class={educationalBackgroundList}>
<li class={educationalBackgroundListItem}>
<span>2022年4月 - 現在</span>
<span>早稲田大学法学部在学中</span>
</li>
Expand Down
4 changes: 2 additions & 2 deletions app/components/history/HistoryPresenter.css.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { css } from "hono/css";

const layout = css`
const presenterLayout = css`
display: flex;
flex-direction: column;
gap: 48px;
`;

export { layout };
export { presenterLayout };
4 changes: 2 additions & 2 deletions app/components/history/HistoryPresenter.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { FC } from "hono/jsx";
import type { WorkExperience } from "../../api/workExperience";
import { HistoryEducationalBackground } from "./HistoryEducationalBackground";
import { layout } from "./HistoryPresenter.css";
import { presenterLayout } from "./HistoryPresenter.css";
import { HistoryWorkExperience } from "./HistoryWorkExperience";

type Props = {
Expand All @@ -12,7 +12,7 @@ const HistoryPresenter: FC<Props> = (props) => {
const { workExperience } = props;

return (
<div class={layout}>
<div class={presenterLayout}>
<HistoryWorkExperience workExperience={workExperience} />
<HistoryEducationalBackground />
</div>
Expand Down
6 changes: 3 additions & 3 deletions app/components/history/HistoryWorkExperience.css.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import { css } from "hono/css";

const list = css`
const workExperienceList = css`
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 32px;
`;

const description = css`
const workExperienceDescription = css`
display: flex;
flex-direction: column;
gap: 8px;
padding: 8px;
`;

export { list, description };
export { workExperienceList, workExperienceDescription };
9 changes: 4 additions & 5 deletions app/components/history/HistoryWorkExperience.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import type { FC } from "hono/jsx";
import type { WorkExperience } from "../../api/workExperience";
import { Section } from "../layout/Section";
import { list } from "./HistoryEducationalBackground.css";
import { description } from "./HistoryWorkExperience.css";
import { Section } from "../Section";
import { workExperienceDescription, workExperienceList } from "./HistoryWorkExperience.css";

type Props = {
workExperience: WorkExperience[];
Expand All @@ -13,7 +12,7 @@ const HistoryWorkExperience: FC<Props> = (props) => {

return (
<Section title="Work experience">
<ul class={list}>
<ul class={workExperienceList}>
{workExperience
.toSorted((a, b) => a.order - b.order)
.map((item) => (
Expand All @@ -22,7 +21,7 @@ const HistoryWorkExperience: FC<Props> = (props) => {
<summary>
{item.span}: {item.company}
</summary>
<p class={description}>
<p class={workExperienceDescription}>
<span>{item.description}</span>
<span>使用技術: {item.techStack}</span>
</p>
Expand Down
18 changes: 9 additions & 9 deletions app/components/profile/ProfileLinks.css.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { css } from "hono/css";

const LinkCard_Container = css`
const linkCardContainer = css`
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
Expand All @@ -11,30 +11,30 @@ const LinkCard_Container = css`
}
`;

const LinkCard = css`
const linkCard = css`
display: flex;
justify-content: center;
align-items: center;
height: 100px;
border-radius: 8px;
`;

const GitHub = css`
${LinkCard}
const github = css`
${linkCard}
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}
const qiita = css`
${linkCard}
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}
const cosense = css`
${linkCard}
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 { LinkCard_Container, LinkCard, GitHub, Qiita, Cosense };
export { linkCardContainer, linkCard, github, qiita, cosense };
12 changes: 6 additions & 6 deletions app/components/profile/ProfileLinks.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
import { CosenseIcon, GitHubIcon, QiitaIcon } from "../icons";
import { Section } from "../layout/Section";
import { Cosense, GitHub, LinkCard_Container, Qiita } from "./ProfileLinks.css";
import { Section } from "../Section";
import { cosense, github, linkCardContainer, qiita } from "./ProfileLinks.css";

const links = [
{
title: "GitHub",
url: "https://github.com/taga3s",
style: GitHub,
style: github,
icon: <GitHubIcon />,
},
{
title: "Cosense",
url: "https://scrapbox.io/t33s-dev/",
style: Cosense,
style: cosense,
icon: <CosenseIcon />,
},
{
title: "Qiita",
url: "https://qiita.com/t33s_dev",
style: Qiita,
style: qiita,
icon: <QiitaIcon />,
},
];

const ProfileLinks = () => {
return (
<Section title="Links">
<div class={LinkCard_Container}>
<div class={linkCardContainer}>
{links.map((link) => (
<a href={link.url} class={link.style} key={link.title}>
<div>{link.icon}</div>
Expand Down
14 changes: 7 additions & 7 deletions app/components/profile/ProfileMain.css.ts
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import { css } from "hono/css";

const Main = css`
const main = css`
display: flex;
justify-content: space-between;
align-items: center;
`;

const Main_Box = css`
const mainBox = css`
display: flex;
flex-direction: column;
gap: 12px;
`;

const Main_Image = css`
const mainImage = css`
width: 100px;
height: 100px;
border-radius: 12px;
Expand All @@ -23,24 +23,24 @@ const Main_Image = css`
}
`;

const Main_Name = css`
const mainName = css`
font-size: 28px;
font-weight: bold;
`;

const Main_Belonging = css`
const mainBelonging = css`
display: flex;
flex-direction: column;
gap: 8px;
font-size: 16px;
`;

const Introduction = css`
const mainIntroduction = css`
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 32px;
font-size: 16px;
`;

export { Main, Main_Box, Main_Image, Main_Name, Main_Belonging, Introduction };
export { main, mainBox, mainImage, mainName, mainBelonging, mainIntroduction };
14 changes: 7 additions & 7 deletions app/components/profile/ProfileMain.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import { Main, Main_Belonging, Main_Box, Main_Image, Main_Name, Introduction } from "./ProfileMain.css";
import { main, mainBelonging, mainBox, mainImage, mainIntroduction, mainName } from "./ProfileMain.css";

const ProfileMain = () => {
return (
<section>
<div class={Main}>
<div class={Main_Box}>
<span class={Main_Name}>Seiya Tagami / taga3s</span>
<ul class={Main_Belonging}>
<div class={main}>
<div class={mainBox}>
<span class={mainName}>Seiya Tagami / taga3s</span>
<ul class={mainBelonging}>
<li>Web Developer (working as an intern)</li>
</ul>
</div>
<div>
<img class={Main_Image} src="https://github.com/taga3s.png" alt="me" />
<img class={mainImage} src="https://github.com/taga3s.png" alt="me" />
</div>
</div>
<ul class={Introduction}>
<ul class={mainIntroduction}>
<li>🛠️ 趣味やインターンでコードを書いています。</li>
<li>🐳 Web、法律、ラーメンと...</li>
<li>🤖 アニメ/漫画やゲームが好きです。</li>
Expand Down
Loading

0 comments on commit c582479

Please sign in to comment.