Skip to content

Commit

Permalink
Design: 디자인 변경
Browse files Browse the repository at this point in the history
  • Loading branch information
@alreadynyeong
alreadynyeong committed Dec 7, 2023
1 parent 0ebfb40 commit bcc3b7a
Show file tree
Hide file tree
Showing 3 changed files with 182 additions and 109 deletions.
183 changes: 112 additions & 71 deletions pages/about/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,115 @@
import Head from "next/head";
import styled from "styled-components";

import { AwardList } from "@/data/Awards";

const About = () => {
return (
<>
<Head>
<title>ACTIVITY</title>
<meta name="description" content="Minhyeong's Activity" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/public/favIcon.png" />
</Head>
<Container>
<Top>ABOUT</Top>
<Box>
<Title>학력</Title>
<Content>
성신여자대학교 컴퓨터공학과<Date>2019.03 ~</Date>
</Content>
</Box>
<Box>
<Title>자격증</Title>
<Content>
정보처리기사<Date>2022.11.25</Date>
</Content>
</Box>
<Box>
<Title>수상</Title>
{AwardList.slice()
.reverse()
.map((award) => (
<>
<Content key={award.title}>
<a href={`/Portfolio/project?id=${award.projectNum}`}>
<RankBox>
<div>{award.title}</div>
<Date>{award.date}</Date>
<Rank>{award.rank}</Rank>
</RankBox>
</a>
</Content>
</>
))}
</Box>
<Box>
<Title>스킬</Title>
<Content>
<Skill>
Skill
<div>
<div>React.js</div>
<div>Next.js</div>
<div>ReactNative</div>
<div>Node.js</div>
</div>
</Skill>
<Skill>
Language
<div>
<div>JavaScript</div>
<div>TypeScript</div>
<div>Python</div>
</div>
</Skill>
<Skill>
Tool
<div>
<div>Git/GitHub</div>
<div>Figma</div>
<div>Discord/Slack</div>
<div>Jira/Confluence</div>
</div>
</Skill>
</Content>
</Box>
</Container>
</>
);
};

export default About;

const Container = styled.div`
width: 100%;
margin-top: 70px;
padding-bottom: 500px;
`;
const Top = styled.div`
font-size: 9rem;
font-weight: bold;
padding-right: 10%;
text-align: right;
letter-spacing: -0.5rem;
transition: all 0.5s;
&:hover {
letter-spacing: 2rem;
}
@media (max-width: 768px) {
font-size: 5rem;
&:hover {
letter-spacing: 1rem;
}
}
@media (max-width: 425px) {
font-size: 3rem;
&:hover {
letter-spacing: 0.5rem;
}
}
`;
const Box = styled.div`
width: 80%;
justify-content: center;
Expand All @@ -26,6 +129,15 @@ const Date = styled.span`
font-size: 0.8rem;
color: gray;
margin-left: 10px;
@media (max-width: 550px) {
margin-left: 0px;
}
`;
const RankBox = styled.div`
@media (min-width: 550px) {
display: flex;
align-items: center;
}
`;
const Rank = styled.span`
font-size: 1.1rem;
Expand All @@ -51,74 +163,3 @@ const Skill = styled.div`
}
}
`;

const About = () => {
return (
<Container>
<Box>
<Title>학력</Title>
<Content>
성신여자대학교 컴퓨터공학과<Date>2019.03 ~</Date>
</Content>
</Box>
<Box>
<Title>자격증</Title>
<Content>
정보처리기사<Date>2022.11.25</Date>
</Content>
</Box>
<Box>
<Title>수상</Title>
{AwardList.slice()
.reverse()
.map((award) => (
<>
<Content key={award.title}>
<div>
{award.title}
<Date>{award.date}</Date>
<Rank>{award.rank}</Rank>
<a href={`/Portfolio/project?id=${award.projectNum}`}>
<span style={{ fontSize: 18 }}>▹</span>
</a>
</div>
</Content>
</>
))}
</Box>
<Box>
<Title>스킬</Title>
<Content>
<Skill>
Skill
<div>
<div>React.js</div>
<div>Next.js</div>
<div>ReactNative</div>
<div>Node.js</div>
</div>
</Skill>
<Skill>
Language
<div>
<div>JavaScript</div>
<div>TypeScript</div>
<div>Python</div>
</div>
</Skill>
<Skill>
Tool
<div>
<div>Git/GitHub</div>
<div>Figma</div>
<div>Discord/Slack</div>
<div>Jira/Confluence</div>
</div>
</Skill>
</Content>
</Box>
</Container>
);
};

export default About;
106 changes: 69 additions & 37 deletions pages/activity/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,74 @@
import Head from "next/head";
import styled from "styled-components";

import { ActivityList } from "@/data/Activity";

const Activity = () => {
return (
<>
<Head>
<title>ACTIVITY</title>
<meta name="description" content="Minhyeong's Activity" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/public/favIcon.png" />
</Head>
<Container>
<Top>ACTIVITY</Top>
<Box>
<Title>활동</Title>
{ActivityList.slice()
.reverse()
.map((activity) => (
<Content key={activity.id}>
[ {activity.title} ] <Date>{activity.date}</Date>
<Role>{activity.role}</Role>
<Activitys>
{activity.content.map((content) => (
<Actiivty key={content.id}>
{content.text}
<div>
<a href={`/Portfolio/project?id=${content.projectNum}`}>
<Project>{content.project}</Project>
</a>
</div>
</Actiivty>
))}
</Activitys>
</Content>
))}
</Box>
</Container>
</>
);
};

export default Activity;

const Container = styled.div`
width: 100%;
margin-top: 70px;
padding-bottom: 500px;
`;
const Top = styled.div`
font-size: 9rem;
font-weight: bold;
padding-right: 10%;
text-align: right;
letter-spacing: -0.5rem;
transition: all 0.5s;
&:hover {
letter-spacing: 2rem;
}
@media (max-width: 768px) {
font-size: 5rem;
&:hover {
letter-spacing: 1rem;
}
}
@media (max-width: 425px) {
font-size: 3rem;
&:hover {
letter-spacing: 0.5rem;
}
}
`;
const Box = styled.div`
width: 80%;
Expand All @@ -22,6 +86,9 @@ const Content = styled.div`
padding: 30px;
padding-bottom: 50px;
border-bottom: 1px solid;
@media (max-width: 768px) {
font-size: 1rem;
}
`;
const Date = styled.span`
font-size: 0.8rem;
Expand All @@ -45,38 +112,3 @@ const Project = styled.span`
margin-right: 7px;
color: green;
`;

const Activity = () => {
return (
<Container>
<Box>
<Title>활동</Title>
{ActivityList.slice()
.reverse()
.map((activity) => (
<Content key={activity.id}>
[ {activity.title} ] <Date>{activity.date}</Date>
<Role>{activity.role}</Role>
<Activitys>
{activity.content.map((content) => (
<Actiivty key={content.id}>
{content.text}
<div>
<Project>{content.project}</Project>
<a href={`/Portfolio/project?id=${content.projectNum}`}>
{content.projectNum && (
<span style={{ fontSize: 10 }}>▹</span>
)}
</a>
</div>
</Actiivty>
))}
</Activitys>
</Content>
))}
</Box>
</Container>
);
};

export default Activity;
2 changes: 1 addition & 1 deletion pages/project/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Head from "next/head";
import Image from "next/image";
import { useRouter } from "next/router";
import { useMediaQuery } from "react-responsive";
import Head from "next/head";
import styled from "styled-components";

import Parts from "@/components/common/part";
Expand Down

0 comments on commit bcc3b7a

Please sign in to comment.