Skip to content

Commit 51f2dd9

Browse files
kerbethecoderkerbethecoder
authored
Merge pull request #1 from kerbethecoder/cleaning
code cleaning
2 parents ed2ea7e + 25ba32b commit 51f2dd9

23 files changed

+777
-806
lines changed

‎.prettierrc

-4
This file was deleted.

‎.prettierrc.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"singleQuote": true,
3+
"printWidth": 80,
4+
"tabWidth": 2,
5+
"semi": true,
6+
"trailingComma": "es5",
7+
"plugins": ["prettier-plugin-tailwindcss"]
8+
}

‎package-lock.json

+462-346
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+5-4
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,12 @@
1717
"react-helmet": "^6.1.0"
1818
},
1919
"devDependencies": {
20-
"autoprefixer": "^10.4.16",
20+
"autoprefixer": "^10.4.20",
2121
"gatsby-plugin-postcss": "^6.12.0",
22-
"postcss": "^8.4.31",
23-
"prettier": "^2.8.8",
24-
"tailwindcss": "^3.3.3"
22+
"postcss": "^8.4.43",
23+
"prettier": "^3.3.3",
24+
"prettier-plugin-tailwindcss": "^0.6.6",
25+
"tailwindcss": "^3.4.10"
2526
},
2627
"keywords": [
2728
"gatsby",

‎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/Hero.jsx

+35-26
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,66 @@
1-
import React, { useEffect } from "react"
2-
import scrollTo from "gatsby-plugin-smoothscroll"
1+
import React, { useEffect } from 'react';
2+
import scrollTo from 'gatsby-plugin-smoothscroll';
33

4-
import { displayPicture, centerLine, greetings } from "../images"
5-
import { observeHiddenElements } from "./intersectionObserver"
4+
import { displayPicture, centerLine, greetings } from '../images';
5+
import { observeHiddenElements } from './intersectionObserver';
66

77
const Hero = () => {
88
useEffect(() => {
9-
const sectionHeadChildren = document.getElementById("sectionHead").children
10-
const childrenArray = Array.from(sectionHeadChildren)
11-
childrenArray.forEach(el => {
12-
el.classList.add("hiddenElem")
13-
})
9+
const sectionHeadChildren = document.getElementById('sectionHead').children;
1410

15-
const hiddenElements = document.querySelectorAll(".hiddenElem")
16-
observeHiddenElements(hiddenElements)
17-
})
11+
const childrenArray = Array.from(sectionHeadChildren);
12+
childrenArray.forEach((elemnt) => {
13+
elemnt.classList.add('hiddenElem');
14+
});
15+
16+
const hiddenElements = document.querySelectorAll('.hiddenElem');
17+
observeHiddenElements(hiddenElements);
18+
});
1819

1920
return (
2021
<section
2122
id="sectionHead"
22-
className="bg-primaryBg flexCenter flex-col mb-60 lg:mb-0 lg:h-screen"
23+
className="flexCenter mb-60 flex-col bg-primaryBg lg:mb-0 lg:h-screen"
2324
>
24-
<img src={greetings} alt="greetings" className="greetings hidden" />
25+
<img
26+
src={greetings}
27+
alt="greetings"
28+
className="hidden lg:absolute lg:left-[35.5%] lg:top-[52%] lg:block"
29+
/>
2530
<img
2631
src={displayPicture}
27-
alt="a man standing holding his phone"
28-
className="hero-img h-[400px] mt-20 lg:mt-0"
32+
alt="display picture"
33+
className="mt-20 h-[400px] shadow-xl lg:absolute lg:left-[37.8%] lg:top-[22%] lg:mt-0"
34+
/>
35+
<img
36+
src={centerLine}
37+
alt="center-line"
38+
className="hidden lg:absolute lg:top-[51%] lg:block"
2939
/>
30-
<img src={centerLine} alt="center-line" className="center-line hidden" />
31-
<div className="introduction flex mt-2">
40+
<div className="mt-2 flex lg:absolute lg:left-[50.5%] lg:top-[48.5%]">
3241
<p className="text-lg lg:text-2xl">I'm&nbsp;</p>
33-
<ul className="dynamicNames font-bold text-lg lg:text-2xl">
42+
<ul className="dynamicNames text-lg font-bold lg:text-2xl">
3443
<li className="username">@kerbethecoder 🖥️</li>
3544
<li className="username">Kerby Cantos 🤙</li>
3645
</ul>
3746
</div>
38-
<div className="description mt-5 px-7 text-center text-sm">
47+
<div className="mt-5 px-7 text-center text-sm lg:absolute lg:left-[50.5%] lg:top-[50.5%] lg:px-0 lg:text-left lg:text-base lg:leading-4">
3948
<p>
4049
A web developer with a passion for both front-end and <br /> back-end
4150
development since year 2022.
4251
</p>
4352
<button
44-
className="btn mt-3 px-5 py-2.5 rounded-lg font-bold text-xs"
45-
onClick={() => scrollTo("#contact")}
53+
className="mt-3 rounded-lg border border-solid border-secondaryBg px-5 py-2.5 text-xs font-bold shadow-xl transition hover:scale-105 lg:ml-10 lg:text-sm"
54+
onClick={() => scrollTo('#contact')}
4655
>
4756
Let's Work Together!
4857
</button>
4958
</div>
50-
<p className="text-[#10100e57] tracking-wide mt-20 lg:absolute lg:top-[70%]">
59+
<p className="mt-20 tracking-wide text-[#10100e57] lg:absolute lg:top-[70%]">
5160
SCROLL ↡
5261
</p>
5362
</section>
54-
)
55-
}
63+
);
64+
};
5665

57-
export default Hero
66+
export default Hero;

‎src/components/Layout.jsx

+16-16
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,41 @@
1-
import React from "react"
2-
import scrollTo from "gatsby-plugin-smoothscroll"
1+
import React from 'react';
2+
import scrollTo from 'gatsby-plugin-smoothscroll';
33

4-
import { cornerLine } from "../images"
5-
import Socials from "./socials/Socials"
4+
import { cornerLine } from '../images';
5+
import Socials from './socials/Socials';
66

77
const Layout = ({ children }) => {
88
return (
99
<>
10-
<div className="bg-primaryBg w-5 h-5 absolute" id="hero" />
11-
<div className="bookmark bg-secondaryBg h-12 w-12 sticky ml-80" />
10+
<div className="absolute size-5 bg-primaryBg" id="hero" />
11+
<div className="sticky ml-80 size-12 bg-secondaryBg md:ml-28 lg:top-0 lg:ml-72" />
1212
<img
1313
src={cornerLine}
1414
alt="corner-line"
15-
className="corner-line hidden sticky"
15+
className="sticky hidden lg:top-[86%] lg:ml-12 lg:block"
1616
/>
17-
<div className="socials hidden sticky w-fit">
17+
<div className="sticky hidden w-fit lg:top-[66%] lg:ml-8 lg:block">
1818
<Socials />
1919
</div>
20-
<p className="copyright hidden w-fit sticky font-bold text-xs">
20+
<p className="sticky hidden w-fit text-xs font-bold lg:top-[95.5%] lg:ml-16 lg:block lg:text-sm">
2121
© {new Date().getFullYear()} &middot; Kerby Cantos
2222
</p>
2323
<button
24-
className="hidden lg:block sticky top-[94%] left-[97%]"
25-
onClick={() => scrollTo("#hero")}
24+
className="sticky left-[97%] top-[94%] hidden animate-bounce hover:text-dimBlack lg:block"
25+
onClick={() => scrollTo('#hero')}
2626
>
2727
<ion-icon name="caret-up-circle" size="large"></ion-icon>
2828
</button>
2929
<main>{children}</main>
3030

31-
<div className="flexCenter mb-3 lg:hidden ">
31+
<div className="flexCenter mb-3 lg:hidden">
3232
<Socials />
3333
</div>
34-
<p className="font-bold text-xs text-center mb-2 lg:hidden">
34+
<p className="mb-2 text-center text-xs font-bold lg:hidden">
3535
© {new Date().getFullYear()} &middot; Kerby Cantos
3636
</p>
3737
</>
38-
)
39-
}
38+
);
39+
};
4040

41-
export default Layout
41+
export default Layout;

‎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;

0 commit comments

Comments
 (0)