Skip to content

Commit eb5dcd4

Browse files
kerbethecoderkerbethecoder
authored
Merge pull request #2 from kerbethecoder/new-design
redo of project section
2 parents 51f2dd9 + 6ab17e2 commit eb5dcd4

15 files changed

+162
-200
lines changed

‎gatsby-browser.js

+17-11
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,25 @@
66

77
// You can delete this file if you're not using it
88

9-
import "./src/styles/global.css"
10-
import "./src/styles/styles.css"
9+
import './src/styles/global.css';
10+
import './src/styles/styles.css';
1111

1212
export const onClientEntry = () => {
13-
const ionIconsModuleScript = document.createElement("script")
14-
ionIconsModuleScript.type = "module"
13+
const fontAwesomeScript = document.createElement('script');
14+
fontAwesomeScript.type = 'module';
15+
fontAwesomeScript.src = 'https://kit.fontawesome.com/bf264faa38.js';
16+
fontAwesomeScript.crossOrigin = 'anonymous';
17+
document.head.appendChild(fontAwesomeScript);
18+
19+
const ionIconsModuleScript = document.createElement('script');
20+
ionIconsModuleScript.type = 'module';
1521
ionIconsModuleScript.src =
16-
"https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
17-
document.head.appendChild(ionIconsModuleScript)
22+
'https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js';
23+
document.head.appendChild(ionIconsModuleScript);
1824

19-
const ionIconsNoModuleScript = document.createElement("script")
20-
ionIconsNoModuleScript.setAttribute("nomodule", true)
25+
const ionIconsNoModuleScript = document.createElement('script');
26+
ionIconsNoModuleScript.setAttribute('nomodule', true);
2127
ionIconsNoModuleScript.src =
22-
"https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
23-
document.head.appendChild(ionIconsNoModuleScript)
24-
}
28+
'https://unpkg.com/[email protected]/dist/ionicons/ionicons.js';
29+
document.head.appendChild(ionIconsNoModuleScript);
30+
};

‎gatsby-config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ module.exports = {
1212
title: `Kerby Cantos`,
1313
description: `A clean and user-friendly portfolio website, offering a glimpse into my skills and achievements.`,
1414
author: `@kerbethecoder`,
15-
siteUrl: `https://kerbethecoder.netlify.app/`,
15+
siteUrl: `https://kerbethecoder.com/`,
1616
},
1717
plugins: [
1818
`gatsby-plugin-smoothscroll`,
@@ -28,4 +28,4 @@ module.exports = {
2828
`gatsby-transformer-sharp`,
2929
`gatsby-plugin-sharp`,
3030
],
31-
}
31+
};

‎src/components/Footer.jsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ const Footer = () => {
1010

1111
return (
1212
<section className="flexCenter flex-col" id="contact">
13-
<div className="flexCenter flex-col pb-52 lg:flex-row">
14-
<div className="flex flex-col gap-5 lg:w-6/12 lg:pl-80">
13+
<div className="flexCenter flex-col pb-52 xl:flex-row">
14+
<div className="flex flex-col gap-5 xl:w-6/12 xl:pl-80">
1515
<div className="hiddenElem pl-2 md:pl-0">
16-
<h2 className="font-inter text-2xl font-bold lg:text-4xl">
16+
<h2 className="font-inter text-2xl font-bold xl:text-4xl">
1717
@kerbethecoder
1818
</h2>
19-
<p className="-mt-1 pl-8 font-inter text-xs font-bold text-[#10100e80] lg:text-base">
19+
<p className="-mt-1 pl-8 font-inter text-xs font-bold text-[#10100e80] xl:text-base">
2020
Average UI / UX Designer, Computer Engineer, and Web Developer.
2121
</p>
2222
</div>
@@ -26,15 +26,15 @@ const Footer = () => {
2626
target="_blank"
2727
rel="noopener noreferrer"
2828
>
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">
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 xl:text-sm">
3030
View my Résumé 👌
3131
</button>
3232
</a>
3333
<div className="flex items-center gap-1">
3434
<ion-icon name="mail"></ion-icon>
3535
<a
3636
href="mailto:[email protected]"
37-
className="font-bold hover:underline md:text-sm lg:text-base"
37+
className="font-bold hover:underline md:text-sm xl:text-base"
3838
target="_blank"
3939
rel="noopener noreferrer"
4040
>
@@ -43,15 +43,15 @@ const Footer = () => {
4343
</div>
4444
</div>
4545
</div>
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">
46+
<div className="mt-5 xl:mt-0 xl:w-6/12 xl:pl-40">
47+
<h6 className="hiddenElem mx-auto px-2 text-center font-inter font-bold md:w-8/12 md:px-0 xl:mx-0 xl:text-left">
4848
"Want to get in touch? Whether for work or just chatting, don't
4949
hesitate to contact me through the links on the side. I'll try my
5050
best to get back to you!"
5151
</h6>
5252
</div>
5353
</div>
54-
<p className="hiddenElem pFooter pb-32 text-center text-xs text-dimBlack lg:text-sm">
54+
<p className="hiddenElem pFooter pb-32 text-center text-xs text-dimBlack xl:text-sm">
5555
Designed in{' '}
5656
<a
5757
href="https://www.figma.com/"

‎src/components/Hero.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const Hero = () => {
2929
/>
3030
<img
3131
src={displayPicture}
32-
alt="display picture"
32+
alt="the developer"
3333
className="mt-20 h-[400px] shadow-xl lg:absolute lg:left-[37.8%] lg:top-[22%] lg:mt-0"
3434
/>
3535
<img

‎src/components/Projects.jsx

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
import React, { useEffect } from 'react';
2+
3+
import { observeHiddenElements } from './intersectionObserver';
4+
5+
const Projects = () => {
6+
useEffect(() => {
7+
const hiddenElements = document.querySelectorAll('.hiddenElem');
8+
observeHiddenElements(hiddenElements);
9+
});
10+
11+
const projects = {
12+
first: {
13+
title: 'Rock, Paper, Scissors Game',
14+
description:
15+
'Enjoy a fun solo challenge with this interactive hand game!',
16+
github: 'https://github.com/kerbethecoder/rock-paper-scissors',
17+
siteUrl: 'https://game-rps.vercel.app/',
18+
frameworks: {
19+
one: 'HTML',
20+
two: 'CSS',
21+
three: 'JavaScript',
22+
},
23+
},
24+
second: {
25+
title: 'Mock Landing Page',
26+
description:
27+
'To showcase and refine my front-end web development skills, I created a simulated landing page for the popular streaming platform, Netflix.',
28+
github: 'https://github.com/kerbethecoder/netflix-react',
29+
siteUrl: 'https://mock-netflix-react.vercel.app/',
30+
frameworks: {
31+
one: 'React',
32+
two: 'Tailwind CSS',
33+
},
34+
},
35+
third: {
36+
title: 'The NotePad.',
37+
description:
38+
'A website serving as a repository for essential web development tools, including font pairings, color combinations, and more.',
39+
github: 'https://github.com/kerbethecoder/the-notepad',
40+
siteUrl: 'https://the-notepad-by-kerbe.vercel.app/',
41+
frameworks: {
42+
one: 'NextJS',
43+
two: 'Tailwind CSS',
44+
},
45+
},
46+
fourth: {
47+
title: 'DevToolBox',
48+
description:
49+
'A website with a curated collection of essential resources and tools to inspire and assist developers with their projects.',
50+
github: 'https://github.com/kerbethecoder/devtoolbox',
51+
siteUrl: 'https://kerbethecoder.github.io/devtoolbox/',
52+
frameworks: {
53+
one: 'Vue',
54+
two: 'Tailwind CSS',
55+
},
56+
},
57+
fifth: {
58+
title: 'ColorPicker',
59+
description:
60+
'A tool to help you choose the perfect colors for your website.',
61+
github: 'https://github.com/kerbethecoder/color-picker',
62+
siteUrl: 'https://kerbethecoder.github.io/color-picker/',
63+
frameworks: {
64+
one: 'HTML',
65+
two: 'CSS',
66+
three: 'JavaScript',
67+
},
68+
},
69+
};
70+
71+
return (
72+
<section className="flexCenter mb-20 flex-col lg:mb-96">
73+
<div className="px-5 lg:w-6/12 lg:px-0">
74+
<h2 className="hiddenElem font-secondaryFont text-lg font-bold lg:text-2xl">
75+
Projects
76+
</h2>
77+
<p>Some of the projects on the internet I made so far:</p>
78+
<div className="grid grid-cols-1 gap-4 p-4 md:grid-cols-2 xl:grid-cols-3">
79+
{Object.keys(projects).map((key, index) => (
80+
<div
81+
key={index}
82+
className="hiddenElem flex flex-col justify-between gap-3 rounded border border-secondaryBg/30 p-5 font-inter hover:-translate-y-1"
83+
>
84+
<div className="flex flex-col space-y-3">
85+
<div className="ml-auto space-x-3">
86+
<a
87+
href={projects[key].github}
88+
target="_blank"
89+
rel="noopener noreferrer"
90+
className="w-fit text-secondaryBg/80 transition hover:text-secondaryBg/60"
91+
>
92+
<i class="fa-brands fa-github fa-lg"></i>
93+
</a>
94+
<a
95+
href={projects[key].siteUrl}
96+
target="_blank"
97+
rel="noopener noreferrer"
98+
className="w-fit text-secondaryBg/80 duration-300 hover:text-secondaryBg/55"
99+
>
100+
<i class="fa-solid fa-arrow-up-right-from-square fa-lg"></i>
101+
</a>
102+
</div>
103+
<span className="text-xl font-bold leading-none tracking-tight">
104+
{projects[key].title}
105+
</span>
106+
<p className="text-sm text-secondaryBg/80">
107+
{projects[key].description}
108+
</p>
109+
</div>
110+
<div className="mt-5 space-x-2">
111+
{Object.values(projects[key].frameworks).map(
112+
(framework, index) => (
113+
<span
114+
className="text-xs font-bold text-secondaryBg/50"
115+
key={index}
116+
>
117+
{framework}
118+
</span>
119+
)
120+
)}
121+
</div>
122+
</div>
123+
))}
124+
</div>
125+
</div>
126+
</section>
127+
);
128+
};
129+
130+
export default Projects;

‎src/components/Technologies.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const Technologies = () => {
2727
<p className="hiddenElem">
2828
I frequently work with the following technologies:
2929
</p>
30-
<div className="hiddenElem grid grid-cols-3 gap-4">
30+
<div className="hiddenElem grid grid-cols-2 gap-4 lg:grid-cols-3">
3131
{[
3232
[htmlIcon, 'HTML'],
3333
[cssIcon, 'CSS'],

‎src/components/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ export { default as Hero } from './Hero';
22
export { default as Background } from './Background';
33
export { default as Technologies } from './Technologies';
44
export { default as Timeline } from './Timeline';
5-
export { default as Projects } from './projects/Projects';
5+
export { default as Projects } from './Projects';
66
export { default as Footer } from './Footer';
77
export { default as Layout } from './Layout';
88
export { default as Seo } from './Seo';

‎src/components/projects/Card.jsx

-42
This file was deleted.

‎src/components/projects/Frameworks.jsx

-13
This file was deleted.

0 commit comments

Comments
 (0)