Skip to content

Commit 25ba32b

Browse files
kerbethecoderkerbethecoder
committed
finish code cleaning
TODO: redo projects section and add new projects
1 parent 5cf517b commit 25ba32b

15 files changed

+216
-360
lines changed

‎src/components/Background.jsx

+16-16
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
import React, { useEffect } from "react"
1+
import React, { useEffect } from 'react';
22

3-
import { observeHiddenElements } from "./intersectionObserver"
4-
import { avatar } from "../images"
3+
import { observeHiddenElements } from './intersectionObserver';
4+
import { avatar } from '../images';
55

66
const Background = () => {
77
useEffect(() => {
8-
const hiddenElements = document.querySelectorAll(".hiddenElem")
9-
observeHiddenElements(hiddenElements)
10-
})
8+
const hiddenElements = document.querySelectorAll('.hiddenElem');
9+
observeHiddenElements(hiddenElements);
10+
});
1111

1212
return (
13-
<section className="flexCenter flex-col gap-3 mb-60 lg:flex-row lg:gap-10 lg:mb-96">
14-
<div className="lg:w-4/12 flex justify-end">
13+
<section className="flexCenter mb-60 flex-col gap-3 lg:mb-96 lg:flex-row lg:gap-10">
14+
<div className="flex justify-end lg:w-4/12">
1515
<img src={avatar} alt="" className="hiddenElem" />
1616
</div>
1717
<div className="w-11/12 lg:w-6/12">
1818
<h2 className="hiddenElem font-secondaryFont font-bold md:text-base lg:text-xl">
1919
About Me
2020
</h2>
21-
<div className="hiddenElem xdiv my-2" />
22-
<p className="hiddenElem bg__content text-sm lg:w-9/12">
23-
I studied engineering for four years at{" "}
24-
<strong>Divine Word College of Calapan</strong> in the{" "}
25-
<strong>Philippines</strong>, where I earned{" "}
21+
<div className="hiddenElem my-2 w-28 border-t-2 border-solid border-[#464a4e]" />
22+
<p className="hiddenElem text-sm lg:w-9/12 lg:text-base">
23+
I studied engineering for four years at{' '}
24+
<strong>Divine Word College of Calapan</strong> in the{' '}
25+
<strong>Philippines</strong>, where I earned{' '}
2626
<strong>Bachelor of Science in Computer Engineering</strong>. On my
2727
freshman year, I had my first experience with programming and learned
2828
how to use Python and C#. But it was in my third year that I first
@@ -32,7 +32,7 @@ const Background = () => {
3232
</p>
3333
</div>
3434
</section>
35-
)
36-
}
35+
);
36+
};
3737

38-
export default Background
38+
export default Background;

‎src/components/Footer.jsx

+23-21
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,34 @@
1-
import React, { useEffect } from "react"
1+
import React, { useEffect } from 'react';
22

3-
import { observeHiddenElements } from "./intersectionObserver"
3+
import { observeHiddenElements } from './intersectionObserver';
44

55
const Footer = () => {
66
useEffect(() => {
7-
const hiddenElements = document.querySelectorAll(".hiddenElem")
8-
observeHiddenElements(hiddenElements)
9-
})
7+
const hiddenElements = document.querySelectorAll('.hiddenElem');
8+
observeHiddenElements(hiddenElements);
9+
});
1010

1111
return (
1212
<section className="flexCenter flex-col" id="contact">
1313
<div className="flexCenter flex-col pb-52 lg:flex-row">
1414
<div className="flex flex-col gap-5 lg:w-6/12 lg:pl-80">
1515
<div className="hiddenElem pl-2 md:pl-0">
16-
<h2 className="font-inter font-bold text-2xl lg:text-4xl">
16+
<h2 className="font-inter text-2xl font-bold lg:text-4xl">
1717
@kerbethecoder
1818
</h2>
19-
<p className="text-[#10100e80] text-xs font-bold font-inter pl-8 -mt-1 lg:text-base">
19+
<p className="-mt-1 pl-8 font-inter text-xs font-bold text-[#10100e80] lg:text-base">
2020
Average UI / UX Designer, Computer Engineer, and Web Developer.
2121
</p>
2222
</div>
23-
<div className="hiddenElem flex items-center gap-5 mx-auto md:ml-20">
23+
<div className="hiddenElem mx-auto flex items-center gap-5 md:ml-20">
2424
<a
2525
href="https://webcv-kerbethecoder.netlify.app/"
2626
target="_blank"
2727
rel="noopener noreferrer"
2828
>
29-
<button className="btn__resume">View my Résumé 👌</button>
29+
<button className="btn__resume rounded-lg border border-secondaryBg bg-secondaryBg px-5 py-2.5 text-xs font-bold text-primaryBg shadow-xl transition hover:border-dimBlack hover:bg-primaryBg hover:text-secondaryBg lg:text-sm">
30+
View my Résumé 👌
31+
</button>
3032
</a>
3133
<div className="flex items-center gap-1">
3234
<ion-icon name="mail"></ion-icon>
@@ -41,59 +43,59 @@ const Footer = () => {
4143
</div>
4244
</div>
4345
</div>
44-
<div className="mt-5 lg:mt-0 lg:w-6/12 lg:pl-40 ">
45-
<h6 className="hiddenElem font-bold font-inter mx-auto px-2 text-center md:w-8/12 lg:mx-0 md:px-0 lg:text-left">
46+
<div className="mt-5 lg:mt-0 lg:w-6/12 lg:pl-40">
47+
<h6 className="hiddenElem mx-auto px-2 text-center font-inter font-bold md:w-8/12 md:px-0 lg:mx-0 lg:text-left">
4648
"Want to get in touch? Whether for work or just chatting, don't
4749
hesitate to contact me through the links on the side. I'll try my
4850
best to get back to you!"
4951
</h6>
5052
</div>
5153
</div>
52-
<p className="hiddenElem text-xs text-dimBlack pFooter pb-32 text-center lg:text-sm">
53-
Designed in{" "}
54+
<p className="hiddenElem pFooter pb-32 text-center text-xs text-dimBlack lg:text-sm">
55+
Designed in{' '}
5456
<a
5557
href="https://www.figma.com/"
5658
target="_blank"
5759
rel="noopener noreferrer"
5860
>
5961
Figma
6062
</a>
61-
, coded in{" "}
63+
, coded in{' '}
6264
<a
6365
href="https://code.visualstudio.com/"
6466
target="_blank"
6567
rel="noopener noreferrer"
6668
>
6769
Visual Studio Code
6870
</a>
69-
, built with{" "}
71+
, built with{' '}
7072
<a
7173
href="https://www.gatsbyjs.com/"
7274
target="_blank"
7375
rel="noopener noreferrer"
7476
>
7577
Gatsby
7678
</a>
77-
, styled using{" "}
79+
, styled using{' '}
7880
<a
7981
href="https://tailwindcss.com/"
8082
target="_blank"
8183
rel="noopener noreferrer"
8284
>
8385
Tailwind CSS
8486
</a>
85-
, and deployed in{" "}
87+
, and deployed in{' '}
8688
<a
8789
href="https://www.netlify.com/"
8890
target="_blank"
8991
rel="noopener noreferrer"
9092
>
9193
Netlify
92-
</a>{" "}
94+
</a>{' '}
9395
by me, of course. ^^
9496
</p>
9597
</section>
96-
)
97-
}
98+
);
99+
};
98100

99-
export default Footer
101+
export default Footer;

‎src/components/Seo.jsx

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React from "react"
2-
import { Helmet } from "react-helmet"
3-
import { graphql, useStaticQuery } from "gatsby"
1+
import React from 'react';
2+
import { Helmet } from 'react-helmet';
3+
import { graphql, useStaticQuery } from 'gatsby';
44

5-
import favicon from "../images/favicon.png"
5+
import favicon from '../images/favicon.png';
66

77
const SEO = () => {
88
const { site } = useStaticQuery(graphql`
@@ -16,11 +16,11 @@ const SEO = () => {
1616
}
1717
}
1818
}
19-
`)
19+
`);
2020

21-
const siteTitle = site.siteMetadata.title
22-
const metaDescription = site.siteMetadata.description
23-
const url = site.siteMetadata.siteUrl
21+
const siteTitle = site.siteMetadata.title;
22+
const metaDescription = site.siteMetadata.description;
23+
const url = site.siteMetadata.siteUrl;
2424

2525
return (
2626
<Helmet>
@@ -39,7 +39,7 @@ const SEO = () => {
3939
<meta property="twitter:title" content={siteTitle} />
4040
<meta property="twitter:description" content={metaDescription} />
4141
</Helmet>
42-
)
43-
}
42+
);
43+
};
4444

45-
export default SEO
45+
export default SEO;

‎src/components/Technologies.jsx

+35-83
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import React, { useEffect } from "react"
2-
3-
import { observeHiddenElements } from "./intersectionObserver"
1+
import React, { useEffect } from 'react';
42

3+
import { observeHiddenElements } from './intersectionObserver';
54
import {
65
htmlIcon,
76
cssIcon,
@@ -11,93 +10,46 @@ import {
1110
tailwindIcon,
1211
figmaIcon,
1312
gitIcon,
14-
ubuntuIcon,
1513
vsIcon,
1614
gatsbyIcon,
17-
} from "../images"
18-
19-
const TechnologyLine = ({ technologies }) => (
20-
<div className="hiddenElem flex mt-2 gap-2 md:gap-10">
21-
{technologies.map((item, index) => (
22-
<div className="flexCenter" key={index}>
23-
<img src={item.src} alt={item.title} className="h-10" />
24-
<p className="font-bold text-sm md:text-base">{item.title}</p>
25-
</div>
26-
))}
27-
</div>
28-
)
15+
nextIcon,
16+
} from '../images';
2917

3018
const Technologies = () => {
3119
useEffect(() => {
32-
const hiddenElements = document.querySelectorAll(".hiddenElem")
33-
observeHiddenElements(hiddenElements)
34-
})
35-
36-
const firstLine = [
37-
{
38-
src: htmlIcon,
39-
title: "HTML",
40-
},
41-
{
42-
src: cssIcon,
43-
title: "CSS",
44-
},
45-
{
46-
src: jsIcon,
47-
title: "JavaScript",
48-
},
49-
{
50-
src: reactIcon,
51-
title: "React",
52-
},
53-
]
54-
55-
const secondLine = [
56-
{
57-
src: vueIcon,
58-
title: "Vue.js",
59-
},
60-
{
61-
src: tailwindIcon,
62-
title: "TailwindCSS",
63-
},
64-
{
65-
src: gatsbyIcon,
66-
title: "Gatsby",
67-
},
68-
{
69-
src: gitIcon,
70-
title: "Git",
71-
},
72-
]
73-
74-
const thirdLine = [
75-
{
76-
src: ubuntuIcon,
77-
title: "Ubuntu",
78-
},
79-
{
80-
src: vsIcon,
81-
title: "Visual Studio Code",
82-
},
83-
{
84-
src: figmaIcon,
85-
title: "Figma",
86-
},
87-
]
20+
const hiddenElements = document.querySelectorAll('.hiddenElem');
21+
observeHiddenElements(hiddenElements);
22+
});
8823

8924
return (
90-
<section className="flexCenter flex-col mb-60 lg:gap-10 lg:flex-row lg:mb-96">
91-
<p className="hiddenElem text-sm lg:text-base">
92-
I frequently work with the following technologies:
93-
</p>
94-
<div className="flex flex-col items-center">
95-
<TechnologyLine technologies={firstLine} />
96-
<TechnologyLine technologies={secondLine} />
97-
<TechnologyLine technologies={thirdLine} />
25+
<section className="flexCenter mb-60 flex-col lg:mb-96 lg:flex-row lg:gap-10">
26+
<div className="space-y-2">
27+
<p className="hiddenElem">
28+
I frequently work with the following technologies:
29+
</p>
30+
<div className="hiddenElem grid grid-cols-3 gap-4">
31+
{[
32+
[htmlIcon, 'HTML'],
33+
[cssIcon, 'CSS'],
34+
[jsIcon, 'JavaScript'],
35+
[gatsbyIcon, 'Gatsby'],
36+
[reactIcon, 'React'],
37+
[vueIcon, 'Vue'],
38+
[nextIcon, 'Next'],
39+
[tailwindIcon, 'Tailwind CSS'],
40+
[gitIcon, 'Git'],
41+
[figmaIcon, 'Figma'],
42+
[vsIcon, 'VS Code'],
43+
].map(([icon, label]) => (
44+
<div className="flex items-center rounded-sm border-dimBlack/10 px-2 transition hover:bg-black/10">
45+
<img src={icon} alt="test" className="h-10" />
46+
<span className="pr-2 font-bold">{label}</span>
47+
</div>
48+
))}
49+
</div>
9850
</div>
9951
</section>
100-
)
101-
}
52+
);
53+
};
10254

103-
export default Technologies
55+
export default Technologies;

0 commit comments

Comments
 (0)