Skip to content

Commit 6aaf7b6

Browse files
andydevsandydevs
committed
Add starbound theme colors
1 parent 2b2fcdd commit 6aaf7b6

File tree

8 files changed

+107
-59
lines changed

8 files changed

+107
-59
lines changed

‎src/components/panel.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { GatsbyImage } from 'gatsby-plugin-image'
55
const Panel = styled.div`
66
border-radius: 8pt;
77
border-color: inherit;
8-
background-color: var(--panel);
8+
background: var(--space-gradient);
99
overflow: hidden;
1010
1111
/* Sizing */
@@ -54,7 +54,7 @@ const ImageTitle = styled.h3`
5454
const TitleHeader = styled.div`
5555
grid-area: header;
5656
position: static;
57-
background-color: var(--dark-primary);
57+
background: var(--sky-gradient);
5858
`
5959

6060
const RegularTitle = styled.h3`
@@ -73,7 +73,7 @@ Panel.Title = ({ title }) => (
7373
Panel.ImageTitle = ({ title, imageData }) => (
7474
<ImageTitleHeader>
7575
<ImageTitleContainer>
76-
<GatsbyImage image={imageData}/>
76+
<GatsbyImage image={imageData} />
7777
<ImageTitle>{title}</ImageTitle>
7878
</ImageTitleContainer>
7979
</ImageTitleHeader>

‎src/pages/index.js‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,19 @@ export default function Home() {
3131
<div>
3232
<Helmet>
3333
<title>{site.siteMetadata.title}</title>
34-
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover"/>
35-
<meta name="apple-mobile-web-app-capable" content="yes"/>
36-
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
37-
<meta name="theme" content="#000000"/>
34+
<meta
35+
name="viewport"
36+
content="width=device-width,initial-scale=1.0,viewport-fit=cover"
37+
/>
38+
<meta name="apple-mobile-web-app-capable" content="yes" />
39+
<meta
40+
name="apple-mobile-web-app-status-bar-style"
41+
content="black"
42+
/>
43+
<meta name="theme" content="#000000" />
3844
</Helmet>
3945
<GlobalStyle />
40-
<Hero/>
46+
<Hero />
4147
<StyledMain>
4248
<About />
4349
<Projects />

‎src/sections/about.js‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const StyledLink = styled.a`
5454
padding: 8pt 12pt;
5555
5656
/* Coloring */
57-
background-color: var(--secondary);
57+
background: var(--star-gradient);
5858
color: var(--secondary-text);
5959
6060
transition: 0.25s ease-in-out;
@@ -74,7 +74,7 @@ const StyledLink = styled.a`
7474
}
7575
`
7676

77-
const article = (subject) => (/^[aeiouAEIOU]/.test(subject) ? 'an' : 'a')
77+
const article = subject => (/^[aeiouAEIOU]/.test(subject) ? 'an' : 'a')
7878

7979
export default function About() {
8080
// Query
@@ -88,13 +88,15 @@ export default function About() {
8888
}
8989
}
9090
}
91-
profile: file(relativePath: {eq: "images/profile.jpg"}) {
91+
profile: file(relativePath: { eq: "images/profile.jpg" }) {
9292
childImageSharp {
9393
gatsbyImageData(
94-
layout: FIXED,
95-
width: 300,
96-
aspectRatio: 1,
97-
transformOptions: {duotone: {highlight: "#0088ff", shadow: "#000000"}}
94+
layout: FIXED
95+
width: 300
96+
aspectRatio: 1
97+
transformOptions: {
98+
duotone: { highlight: "#0088ff", shadow: "#000000" }
99+
}
98100
)
99101
}
100102
}
@@ -110,7 +112,8 @@ export default function About() {
110112
<h1
111113
data-sal="slide-up"
112114
data-sal-duration="500"
113-
data-sal-easing="ease">
115+
data-sal-easing="ease"
116+
>
114117
About Me
115118
</h1>
116119
<Grid>
@@ -127,17 +130,24 @@ export default function About() {
127130
data-sal="slide-up"
128131
data-sal-delay="200"
129132
data-sal-duration="500"
130-
data-sal-easing="ease">
133+
data-sal-easing="ease"
134+
>
131135
{about.site.siteMetadata.description
132-
.replace('#jobTitle', `${article(about.workYaml.jobTitle)} ${about.workYaml.jobTitle}`)
136+
.replace(
137+
'#jobTitle',
138+
`${article(about.workYaml.jobTitle)} ${
139+
about.workYaml.jobTitle
140+
}`
141+
)
133142
.replace('#company', about.workYaml.company)}
134143
</Blurb>
135144
<StyledLink
136145
href={`https://github.com/${about.site.siteMetadata.contact.github}`}
137146
data-sal="slide-up"
138147
data-sal-delay="300"
139148
data-sal-duration="500"
140-
data-sal-easing="ease">
149+
data-sal-easing="ease"
150+
>
141151
<FontAwesomeIcon className="icon" icon={faGithub} />
142152
<span className="text">Check out my GitHub</span>
143153
</StyledLink>

‎src/sections/footer.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,16 @@ export default function Footer() {
4848
<h3
4949
data-sal="slide-up"
5050
data-sal-duration="500"
51-
data-sal-easing="ease">
51+
data-sal-easing="ease"
52+
>
5253
View my <a href="resume.pdf">Resume</a>
5354
</h3>
5455
<p
5556
data-sal="slide-up"
5657
data-sal-delay="100"
5758
data-sal-duration="500"
58-
data-sal-easing="ease">
59+
data-sal-easing="ease"
60+
>
5961
<IconLink
6062
large
6163
icon={faGithub}
@@ -66,10 +68,7 @@ export default function Footer() {
6668
icon={faItchIo}
6769
href={`https://${contact.itch}.itch.io`}
6870
/>
69-
<IconLink
70-
large
71-
icon={faLinkedin}
72-
href={contact.linkedin} />
71+
<IconLink large icon={faLinkedin} href={contact.linkedin} />
7372
<IconLink
7473
large
7574
icon={faEnvelope}
@@ -80,7 +79,8 @@ export default function Footer() {
8079
data-sal="slide-up"
8180
data-sal-delay="200"
8281
data-sal-duration="500"
83-
data-sal-easing="ease">
82+
data-sal-easing="ease"
83+
>
8484
<p>
8585
Powered by <a href="http://gatsbyjs.com">Gatsby</a>
8686
</p>

‎src/sections/hero.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -69,18 +69,18 @@ const HeroSubtitle = styled.h2`
6969
export default function Hero() {
7070
const hero = useStaticQuery(graphql`
7171
query HeroImageQuery {
72-
mobile: file(relativePath: {eq: "images/fractal-mobile.png"}) {
72+
mobile: file(relativePath: { eq: "images/fractal-mobile.png" }) {
7373
childImageSharp {
7474
gatsbyImageData(
75-
layout: FULL_WIDTH,
75+
layout: FULL_WIDTH
7676
placeholder: DOMINANT_COLOR
7777
)
7878
}
7979
}
80-
desktop: file(relativePath: {eq: "images/fractal-desktop.png"}) {
80+
desktop: file(relativePath: { eq: "images/fractal-desktop.png" }) {
8181
childImageSharp {
8282
gatsbyImageData(
83-
layout: FULL_WIDTH,
83+
layout: FULL_WIDTH
8484
placeholder: DOMINANT_COLOR
8585
)
8686
}
@@ -101,9 +101,9 @@ export default function Hero() {
101101

102102
return (
103103
<HeroContainer>
104-
<GatsbyImage
104+
<GatsbyImage
105105
image={responsiveImages}
106-
style={{
106+
style={{
107107
gridArea: '1/1',
108108
zIndex: -1
109109
}}
@@ -113,14 +113,16 @@ export default function Hero() {
113113
data-sal="slide-up"
114114
data-sal-duration="500"
115115
data-sal-easing="ease"
116-
data-sal-delay="200">
116+
data-sal-delay="200"
117+
>
117118
Anshul Kharbanda
118119
</HeroTitle>
119120
<HeroSubtitle
120121
data-sal="slide-up"
121122
data-sal-duration="500"
122123
data-sal-easing="ease"
123-
data-sal-delay="300">
124+
data-sal-delay="300"
125+
>
124126
andydevs
125127
</HeroSubtitle>
126128
</HeroText>

‎src/sections/projects.js‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,13 @@ export default function Projects() {
2525
image {
2626
childImageSharp {
2727
gatsbyImageData(
28-
layout: CONSTRAINED,
29-
transformOptions: {duotone: {highlight: "#0088ff", shadow: "#000000"}}
28+
layout: CONSTRAINED
29+
transformOptions: {
30+
duotone: {
31+
highlight: "#0088ff"
32+
shadow: "#000000"
33+
}
34+
}
3035
)
3136
}
3237
}
@@ -44,7 +49,8 @@ export default function Projects() {
4449
<h1
4550
data-sal="slide-up"
4651
data-sal-duration="500"
47-
data-sal-easing="ease">
52+
data-sal-easing="ease"
53+
>
4854
Stuff I've Made
4955
</h1>
5056
<Grid>
@@ -55,14 +61,14 @@ export default function Projects() {
5561
large={image !== undefined && image !== null}
5662
data-sal="slide-up"
5763
data-sal-duration="500"
58-
data-sal-easing="ease">
59-
{image
60-
&& ( <Panel.ImageTitle
61-
title={title}
62-
imageData={getImage(image)}
63-
/> )
64-
|| <Panel.Title title={title}/>
65-
}
64+
data-sal-easing="ease"
65+
>
66+
{(image && (
67+
<Panel.ImageTitle
68+
title={title}
69+
imageData={getImage(image)}
70+
/>
71+
)) || <Panel.Title title={title} />}
6672
<Panel.Body>
6773
<p>{description}</p>
6874
</Panel.Body>
@@ -77,7 +83,11 @@ export default function Projects() {
7783
{github && (
7884
<IconLink
7985
icon={faGithub}
80-
href={`https://github.com/${github.includes('/') ? github : 'andydevs/' + github}`}
86+
href={`https://github.com/${
87+
github.includes('/')
88+
? github
89+
: 'andydevs/' + github
90+
}`}
8191
/>
8292
)}
8393
</IconLink.Group>

‎src/sections/work.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const WorkHighlight = styled.li`
6363
padding-left: 15.5pt;
6464
text-indent: -15.5pt;
6565
&:before {
66-
content: "‒";
66+
content: '‒';
6767
margin-right: 8pt;
6868
color: var(--secondary);
6969
}
@@ -103,7 +103,8 @@ export default function Work() {
103103
<h1
104104
data-sal="slide-up"
105105
data-sal-duration="500"
106-
data-sal-easing="ease">
106+
data-sal-easing="ease"
107+
>
107108
Where I've Worked
108109
</h1>
109110
<WorkTable>
@@ -114,12 +115,14 @@ export default function Work() {
114115
key={id}
115116
data-sal="slide-up"
116117
data-sal-duration="500"
117-
data-sal-easing="ease">
118+
data-sal-easing="ease"
119+
>
118120
<WorkHeader>
119121
<Title>{company}</Title>
120122
<Subtitle>{jobTitle}</Subtitle>
121123
<Subtitle>
122-
{timeline.start.month} {timeline.start.year}
124+
{timeline.start.month}{' '}
125+
{timeline.start.year}
123126
&nbsp; &mdash; &nbsp;
124127
{timeline.current
125128
? 'Present'
@@ -129,7 +132,9 @@ export default function Work() {
129132
<WorkHighlights>
130133
<WorkHighlightsList>
131134
{highlights.map((highlight, index) => (
132-
<WorkHighlight key={index}>{highlight}</WorkHighlight>
135+
<WorkHighlight key={index}>
136+
{highlight}
137+
</WorkHighlight>
133138
))}
134139
</WorkHighlightsList>
135140
</WorkHighlights>

‎src/styling/index.js‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,31 @@
11
import { createGlobalStyle } from 'styled-components'
22

3-
export const primary = '#00aaff'
4-
export const darkPrimary = '#005580'
5-
export const secondary = '#ffdd00'
3+
export const primary = '#00b6e8'
4+
export const darkPrimary = '#154bb2'
5+
export const secondary = '#ea9300'
66

77
export default createGlobalStyle`
88
:root {
9-
--background: #333333;
10-
--panel: #404040;
11-
--primary: #00aaff;
12-
--dark-primary: #005580;
13-
--secondary: #ffdd00;
9+
--black: #000000;
10+
--less-black: #070707;
11+
--dark-purple: #12101c;
12+
--purple: #4d15b2;
13+
--blue: #154bb2;
14+
--light-blue: #00b6e8;
15+
--red: #ea3900;
16+
--orange: #ea9300;
17+
--yellow: #e8e200;
18+
--white: #e3dad3;
19+
20+
--star-gradient: linear-gradient(45deg, var(--red) 0%, var(--orange) 20%, var(--yellow) 80%, var(--white));
21+
--sky-gradient: linear-gradient(45deg, var(--purple) 0%, var(--blue) 50%, var(--light-blue));
22+
--space-gradient: linear-gradient(45deg, var(--less-black), var(--dark-purple));
23+
24+
--background: var(--black);
25+
--panel: var(--dark-purple);
26+
--primary: var(--light-blue);
27+
--dark-primary: var(--blue);
28+
--secondary: var(--orange);
1429
--text: white;
1530
--secondary-text: black;
1631
--faded: #bbbbbb;

0 commit comments

Comments
 (0)