Skip to content

Commit 878c620

Browse files
silnosesilnose
committed
💄 update site styles
1 parent 7a20f85 commit 878c620

30 files changed

Lines changed: 5579 additions & 3463 deletions

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"license": "MIT",
1414
"scripts": {
1515
"build": "gatsby build",
16-
"develop": "gatsby develop",
16+
"develop": "gatsby develop -H 0.0.0.0 -p 8000",
1717
"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
1818
"start": "npm run develop",
1919
"serve": "gatsby serve",

‎src/components/carousel.js‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import { Icon } from '@components/icons';
4+
import { useStaticQuery, graphql } from 'gatsby';
5+
import Img from 'gatsby-image';
6+
import { truncate } from '../utils/truncate';
7+
const StyledCarouselSection = styled.section`
8+
margin: 0 auto;
9+
max-width: 100%;
10+
padding: 0;
11+
& ul {
12+
display: flex;
13+
flex-wrap: wrap;
14+
list-style: none;
15+
justify-content: space-between;
16+
padding: 0;
17+
& li {
18+
border-radius: var(--border-radius);
19+
border: 2px solid var(--quaternary);
20+
background-color: transparent;
21+
height: 18vh;
22+
width: 150px;
23+
margin-top: 10px;
24+
position: relative;
25+
transition: transform 450ms ease 0s;
26+
padding: 5px;
27+
margin-left: 2px;
28+
white-space: nowrap;
29+
overflow: hidden;
30+
@media (max-width: 480px) {
31+
height: 20vh;
32+
width: 110px;
33+
}
34+
35+
&:hover {
36+
transform: scale(1.08);
37+
opacity: 1;
38+
}
39+
40+
h3 {
41+
margin-top: 15px;
42+
color: var(--quinary);
43+
font-size: var(--fz-md);
44+
text-align: center;
45+
46+
@media (max-width: 480px) {
47+
font-size: var(--fz-xxs);
48+
}
49+
}
50+
51+
& div {
52+
text-align: center;
53+
54+
a {
55+
padding: 5px;
56+
57+
svg {
58+
width: 17px;
59+
height: 17px;
60+
}
61+
}
62+
}
63+
}
64+
}
65+
`;
66+
function Carousel() {
67+
const data = useStaticQuery(graphql`
68+
query {
69+
courses: allMarkdownRemark(
70+
filter: { fileAbsolutePath: { regex: "/courses/" } }
71+
sort: { fields: [frontmatter___date], order: DESC }
72+
) {
73+
edges {
74+
node {
75+
frontmatter {
76+
title
77+
cover {
78+
childImageSharp {
79+
fluid(maxWidth: 100, quality: 100) {
80+
...GatsbyImageSharpFluid
81+
}
82+
fixed(width: 32, height: 32) {
83+
...GatsbyImageSharpFixed
84+
}
85+
}
86+
}
87+
github
88+
external
89+
}
90+
}
91+
}
92+
}
93+
}
94+
`);
95+
96+
const courses = data.courses.edges.filter(({ node }) => node);
97+
98+
return (
99+
<>
100+
<StyledCarouselSection id="container">
101+
<ul>
102+
{courses &&
103+
courses.map(({ node }, i) => {
104+
const { frontmatter } = node;
105+
const { external, title, github, cover } = frontmatter;
106+
return (
107+
<li key={i} title={title}>
108+
<Img
109+
fixed={cover.childImageSharp.fixed}
110+
objectFit="cover"
111+
objectPosition="50% 50%"
112+
alt={title}
113+
className="img"
114+
style={{
115+
borderRadius: '50%',
116+
}}
117+
/>
118+
<h3>{truncate(title)}</h3>{' '}
119+
<div>
120+
{github && (
121+
<a href={github} aria-label="GitHub Link" target="_blank" rel="noreferrer">
122+
<Icon name="GitHub" />
123+
</a>
124+
)}{' '}
125+
<a href={external} aria-label="External Link" target="_blank" rel="noreferrer">
126+
<Icon name="External" />
127+
</a>
128+
</div>
129+
</li>
130+
);
131+
})}
132+
</ul>
133+
</StyledCarouselSection>
134+
</>
135+
);
136+
}
137+
138+
export default Carousel;

‎src/components/footer.js‎

Lines changed: 0 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import React from 'react';
22

33
import styled from 'styled-components';
4-
import { Icon } from '@components/icons';
5-
import { socialMedia } from '@config';
64

75
const StyledFooter = styled.footer`
86
${({ theme }) => theme.mixins.flexCenter};
@@ -13,33 +11,6 @@ const StyledFooter = styled.footer`
1311
text-align: center;
1412
`;
1513

16-
const StyledSocialLinks = styled.div`
17-
display: none;
18-
19-
@media (max-width: 768px) {
20-
display: block;
21-
width: 100%;
22-
max-width: 270px;
23-
margin: 0 auto 10px;
24-
color: var(--tertiary);
25-
}
26-
27-
ul {
28-
${({ theme }) => theme.mixins.flexBetween};
29-
padding: 0;
30-
margin: 0;
31-
list-style: none;
32-
33-
a {
34-
padding: 10px;
35-
svg {
36-
width: 20px;
37-
height: 20px;
38-
}
39-
}
40-
}
41-
`;
42-
4314
const StyledCredit = styled.div`
4415
color: var(--tertiary);
4516
font-family: var(--font-mono);
@@ -69,19 +40,6 @@ const StyledCredit = styled.div`
6940

7041
const Footer = () => (
7142
<StyledFooter>
72-
<StyledSocialLinks>
73-
<ul>
74-
{socialMedia &&
75-
socialMedia.map(({ name, url }, i) => (
76-
<li key={i}>
77-
<a href={url} aria-label={name}>
78-
<Icon name={name} />
79-
</a>
80-
</li>
81-
))}
82-
</ul>
83-
</StyledSocialLinks>
84-
8543
<StyledCredit tabindex="-1">
8644
<a href="https://github.com/silnose">
8745
<div> {'</>'} with 💜 from 🇦🇷 by @silnose</div>

‎src/components/greeting.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ export const Greeting = () => {
88
const getGreetings = () => {
99
const now = new Date();
1010
const hrs = now.getHours();
11-
let result = 'Hey ';
11+
let result = '';
1212

1313
if (hrs > 0) {
14-
result = 'Mornin Sunshine!';
14+
result = 'Hi';
1515
} // REALLY early
1616
if (hrs > 6) {
1717
result = 'Good morning';
@@ -31,8 +31,8 @@ export const Greeting = () => {
3131
}, []);
3232

3333
const StyledGreeting = styled.div`
34-
h1 {
35-
margin: 1px 0 30px 0px;
34+
h3 {
35+
margin: 1px 0 15px 0px;
3636
color: var(--secondary);
3737
font-family: var(--font-mono);
3838
font-size: clamp(var(--fz-sm), 6vw, var(--fz-md));
@@ -46,7 +46,7 @@ export const Greeting = () => {
4646

4747
return (
4848
<StyledGreeting>
49-
<h1>Hey! {msg}</h1>
49+
<h3> Hey... {msg}!</h3>
5050
</StyledGreeting>
5151
);
5252
};

‎src/components/icons/arrowDown.js‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,16 @@ function IconArrowDown(props) {
44
return (
55
<svg
66
aria-hidden="true"
7-
width="1.5em"
8-
height="1.5em"
7+
width="1em"
8+
height="1em"
99
style={{
1010
msTransform: 'rotate(360deg)',
1111
WebkitTransform: 'rotate(360deg)',
1212
}}
13-
viewBox="0 0 36 36"
13+
viewBox="0 0 20 20"
1414
transform="rotate(360)"
1515
{...props}>
16-
<path
17-
className="prefix__clr-i-outline prefix__clr-i-outline-path-1"
18-
d="M18 34A10 10 0 018 24V12a10 10 0 0120 0v12a10 10 0 01-10 10zm0-30a8 8 0 00-8 8v12a8 8 0 0016 0V12a8 8 0 00-8-8z"
19-
fill="#b583f6"
20-
/>
21-
<path
22-
className="prefix__clr-i-outline prefix__clr-i-outline-path-2"
23-
d="M18 15a1 1 0 01-1-1v-4a1 1 0 012 0v4a1 1 0 01-1 1z"
24-
fill="#b583f6"
25-
/>
16+
<path d="M5 6l5 5 5-5 2 1-7 7-7-7z" fill="#bb86fc" />
2617
</svg>
2718
);
2819
}

‎src/components/icons/email.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import * as React from 'react';
2+
3+
function IconEmail(props) {
4+
return (
5+
<svg
6+
aria-hidden="true"
7+
width="1em"
8+
height="1em"
9+
style={{
10+
msTransform: 'rotate(360deg)',
11+
WebkitTransform: 'rotate(360deg)',
12+
}}
13+
viewBox="0 0 24 24"
14+
transform="rotate(360)"
15+
{...props}>
16+
<path d="M20 18h-2V9.25L12 13 6 9.25V18H4V6h1.2l6.8 4.25L18.8 6H20m0-2H4c-1.11 0-2 .89-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2z" />
17+
</svg>
18+
);
19+
}
20+
21+
export default IconEmail;

‎src/components/icons/icon.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import {
1717
IconTwitter,
1818
IconZap,
1919
IconArrowDown,
20+
IconEmail,
21+
IconTelegram,
2022
} from '@components/icons';
2123

2224
const Icon = ({ name }) => {
@@ -53,6 +55,10 @@ const Icon = ({ name }) => {
5355
return <IconMoon />;
5456
case 'ArrowDown':
5557
return <IconArrowDown />;
58+
case 'Email':
59+
return <IconEmail />;
60+
case 'Telegram':
61+
return <IconTelegram />;
5662
default:
5763
return <IconExternal />;
5864
}

‎src/components/icons/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,5 @@ export { default as IconZap } from './zap';
1515
export { default as IconSun } from './sun';
1616
export { default as IconMoon } from './moon';
1717
export { default as IconArrowDown } from './arrowDown';
18+
export { default as IconEmail } from './email';
19+
export { default as IconTelegram } from './telegram';

‎src/components/icons/telegram.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import * as React from 'react';
2+
3+
function IconTelegram(props) {
4+
return (
5+
<svg
6+
aria-hidden="true"
7+
width="1em"
8+
height="1em"
9+
style={{
10+
msTransform: 'rotate(360deg)',
11+
WebkitTransform: 'rotate(360deg)',
12+
}}
13+
viewBox="0 0 32 32"
14+
transform="rotate(360)"
15+
{...props}>
16+
<path d="M29.919 6.163l-4.225 19.925c-.319 1.406-1.15 1.756-2.331 1.094l-6.438-4.744-3.106 2.988c-.344.344-.631.631-1.294.631l.463-6.556L24.919 8.72c.519-.462-.113-.719-.806-.256l-14.75 9.288-6.35-1.988c-1.381-.431-1.406-1.381.288-2.044l24.837-9.569c1.15-.431 2.156.256 1.781 2.013z" />
17+
</svg>
18+
);
19+
}
20+
21+
export default IconTelegram;

‎src/components/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,4 @@ export { default as Projects } from './sections/projects';
1515
export { default as Contact } from './sections/contact';
1616
export { default as Greeting } from './greeting';
1717
export { default as Courses } from './sections/courses';
18+
export { default as Carousel } from './carousel';

0 commit comments

Comments
 (0)