Skip to content

Commit

Permalink
style update
Browse files Browse the repository at this point in the history
  • Loading branch information
nicholas-tao committed Dec 18, 2023
1 parent 60dafa7 commit 475b39f
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 24 deletions.
2 changes: 1 addition & 1 deletion src/components/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const Footer = () => {
return (
<Wrapper>
<p>Made with ❤️ by Nicholas Tao &copy; 2023 </p>
<LastUpdated>Last updated: November 2023</LastUpdated>
<LastUpdated>Last updated: December 2023</LastUpdated>
</Wrapper>
);
};
Expand Down
60 changes: 37 additions & 23 deletions src/components/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,17 @@ import { internships } from "../data/internships";
export const Home = () => {
return (
<Wrapper>
<Headshot src={headshot} alt="NT" height="225px" width="225px" />
<Greeting>
<Wave>👋</Wave> Nice to meet you, I'm Nicholas
</Greeting>
<Header>
<Greeting>
<h1>
<Wave>👋</Wave>Nice to meet you, I'm Nicholas
</h1>
<IconLinks />
</Greeting>
<Headshot src={headshot} alt="NT" height="225px" width="225px" />
</Header>
<Body>
I'm a 3rd year Computer Science student at the University of Waterloo.
I'm a 4th year Computer Science student at the University of Waterloo.
This January, I'll be joining{" "}
<Link href="https://www.ethglobal.com/">ETHGlobal</Link> in building the
most valuable community in web3.
Expand All @@ -33,7 +38,6 @@ export const Home = () => {
<Youtube />
Always happy to meet new people and hear about exciting opportunities!{" "}
<Link href="https://www.linkedin.com/in/nicholastao">Let's chat.</Link>
<IconLinks />
</Body>
</Wrapper>
);
Expand Down Expand Up @@ -73,38 +77,36 @@ const Youtube = () => {

const IconLinks = () => {
return (
<SectionWrapper>
<Icons>
<a href="https://www.github.com/nicholas-tao">
<Icon icon={faGithub} color="grey" />
</a>
<a href="https://www.linkedin.com/in/nicholastao">
<Icon icon={faLinkedinIn} color="grey" />
</a>
<a href="https://www.youtube.com/@nicholast">
<Icon icon={faYoutube} color="grey" />
</a>
</Icons>
</SectionWrapper>
<Icons>
<a href="https://www.github.com/nicholas-tao">
<Icon icon={faGithub} color="grey" />
</a>
<a href="https://www.linkedin.com/in/nicholastao">
<Icon icon={faLinkedinIn} color="grey" />
</a>
<a href="https://www.youtube.com/@nicholast">
<Icon icon={faYoutube} color="grey" />
</a>
</Icons>
);
};

const Wrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
margin-top: 50px;
`;

const Headshot = styled.img`
border-radius: 50%;
`;

const Greeting = styled.h1`
const Greeting = styled.div`
text-align: center;
margin-bottom: 0;
@media only screen and (max-width: 600px) {
font-size: 30px;
margin-bottom: 0;
}
`;

Expand Down Expand Up @@ -144,7 +146,7 @@ const Body = styled.p`
const Icons = styled.div`
display: flex;
column-gap: 20px;
margin-top: 50px;
margin-top: 24px;
`;

const Icon = styled(FontAwesomeIcon)`
Expand All @@ -156,3 +158,15 @@ const Icon = styled(FontAwesomeIcon)`
const SectionWrapper = styled.div`
margin: 16px 0px;
`;

const Header = styled.div`
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 30px;
@media only screen and (max-width: 600px) {
flex-direction: column-reverse;
}
`;

0 comments on commit 475b39f

Please sign in to comment.