Merge pull request #5 from andrecrjr/feature/skillset

Feature/skillset
andrecrjr · Aug 22, 2024 · f0290a7 · f0290a7
2 parents 6562ecb + b57365d
commit f0290a7
Show file tree

Hide file tree

Showing 15 changed files with 714 additions and 292 deletions.
diff --git a/.husky/pre-push b/.husky/pre-push
@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npm run build-export
+pnpm run build-export
diff --git a/Makefile b/Makefile
@@ -0,0 +1,54 @@
+# Definindo o binário do PNPM
+PNPM := pnpm
+
+# Ação padrão quando apenas 'make' é digitado
+all: install dev
+
+# Instala as dependências do projeto
+install:
+	@$(PNPM) install
+
+# Roda o ambiente de desenvolvimento
+run:
+	@$(PNPM) run dev
+
+# Constrói o aplicativo para produção e exporta os arquivos estáticos
+build-export:
+	@$(PNPM) run build-export
+
+# Inicia o servidor de produção
+start:
+	@$(PNPM) run start
+
+# Executa o linter no código
+lint:
+	@$(PNPM) run lint
+
+# Executa os testes
+test:
+	@$(PNPM) run test
+
+# Prepara o ambiente de hooks do git com o Husky
+prepare:
+	@$(PNPM) run prepare
+
+# Limpa o cache do PNPM e node_modules
+clean:
+	@$(PNPM) cache clean
+	@rm -rf node_modules
+
+# Ajuda
+help:
+	@echo "Comandos disponíveis:"
+	@echo "   make install       - Instala as dependências do projeto"
+	@echo "   make dev           - Roda o ambiente de desenvolvimento"
+	@echo "   make build-export  - Constrói o aplicativo para produção e exporta os arquivos estáticos"
+	@echo "   make start         - Inicia o servidor de produção"
+	@echo "   make lint          - Executa o linter no código"
+	@echo "   make test          - Executa os testes"
+	@echo "   make prepare       - Prepara o ambiente de hooks do git com o Husky"
+	@echo "   make clean         - Limpa o cache do PNPM e node_modules"
+	@echo "   make help          - Mostra esta ajuda"
+
+# Configuração do Makefile para não confundir arquivos com comandos
+.PHONY: all install dev build-export start lint test prepare clean help
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,18 +1,33 @@
-import Header from "@/components/Layout/Header";
-import { AboutMe } from "@/components/Pages/AboutMe";
-import MainPage from "@/components/Pages/MainPage";
-import { Portfolio } from "@/components/Pages/Portfolio";
-import { GlobalContainer } from "@/styles/global";
+import Header from '@/components/Layout/Header';
+import { AboutMe } from '@/components/Pages/AboutMe';
+import MainPage from '@/components/Pages/MainPage';
+import { Portfolio } from '@/components/Pages/Portfolio';
+import { GlobalContainer } from '@/styles/global';
 
 type Props = {};
+const fetchSkillData = async () => {
+	try {
+		const resp = await fetch(
+			'https://wakatime.com/share/@andrecrjr/a12e00de-1f51-4ac8-b8d9-36a1c9313fd4.json'
+		);
+		const data = await resp.json();
+		return data;
+	} catch (error) {
+		console.error(error);
+	}
+};
+export default async function Page({}: Props) {
+	const { data } = await fetchSkillData();
+	const filterSkill = data.filter(
+		(skill) => skill.percent > 1 && skill.name !== 'Other'
+	);
 
-export default function Page({}: Props) {
-  return (
-      <GlobalContainer>
-        <Header />
-        <MainPage />
-        <AboutMe />
-        <Portfolio />
-      </GlobalContainer>
-  );
+	return (
+		<GlobalContainer>
+			<Header />
+			<MainPage />
+			<AboutMe filteredSkills={filterSkill} />
+			<Portfolio />
+		</GlobalContainer>
+	);
 }
diff --git a/components/Layout/Stacks.tsx b/components/Layout/Stacks.tsx
@@ -1,100 +1,33 @@
+/* eslint-disable @next/next/no-img-element */
 import React from 'react';
-import { PresentationTechStack } from '../Pages/MainPage/style';
+import {
+	FigCaptionWakatime,
+	FigureWakatime,
+	HrefWakatime,
+	PresentationTechStack
+} from '../Pages/MainPage/style';
 
 export const Stacks = () => {
 	return (
 		<PresentationTechStack>
-			<a
-				href="https://html.spec.whatwg.org/multipage/"
-				aria-label="HTML link"
-				rel="noreferrer"
-				target={'_blank'}
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					xmlSpace="preserve"
-					viewBox="0 0 291.31 291.31"
-				>
-					<path
-						fill="#994a12"
-						d="M9.099 0h273.112L254.9 263.999 154.759 291.31h-18.207L36.41 263.999 9.099 0z"
-					/>
-					<path
-						fill="#966118"
-						d="M145.655 27.302h100.141l-18.207 209.386-81.933 27.311c-.001 0-.001-236.697-.001-236.697z"
-					/>
-					<path
-						fill="#fff"
-						d="m218.649 81.806 2.867-27.193H63.43l3.186 27.193 2.914 36.597h-.037l2.759 27.238h105.976l-3.641 43.334-28.932 9.14v-.282l-38.472-10.169-2.358-23.879H72.698l4.315 43.862v1.793l68.642 18.144 57.563-18.144h.701l.018-.246.127-.018v-1.438l5.208-62.097h.118l2.768-27.238H102.94l-2.913-36.597z"
-					/>
-					<path
-						fill="#e5e5e5"
-						d="M145.655 54.613H63.43l3.186 27.193 2.914 36.597h-.037l2.759 27.238h73.403v-27.238H102.94l-2.913-36.597h45.628zm0 143.22-38.472-10.169-2.358-23.879H72.698l4.315 43.862v1.793l68.642 18.144v-29.469z"
-					/>
-				</svg>
-			</a>
-			<a
-				href="https://developer.mozilla.org/pt-BR/docs/Web/CSS"
-				aria-label="CSS link"
-				rel="noreferrer"
-				target={'_blank'}
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					aria-label="CSS3"
-					viewBox="0 0 512 512"
-				>
-					<path fill="#264de4" d="M72 460 30 0h451l-41 460-184 52" />
-					<path fill="#2965f1" d="M256 37v435l149-41 35-394" />
-					<path
-						fill="#ebebeb"
-						d="M114 94h142v56H119m5 58h132v57H129m3 28h56l4 45 64 17v59l-117-32"
-					/>
-					<path
-						fill="#fff"
-						d="M256 208v57h69l-7 73-62 17v59l115-32 26-288H256v56h80l-5.5 58Z"
-					/>
-				</svg>
-			</a>
-			<a
-				href="https://developer.mozilla.org/pt-BR/docs/Web/javascript"
-				aria-label="javascript link"
-				rel="noreferrer"
-				target={'_blank'}
-			>
-				<svg viewBox="0 0 128 128">
-					<path fill="yellow" d="M1.408 1.408h125.184v125.185H1.408z"></path>
-					<path
-						fill="#323330"
-						d="M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z"
-					></path>
-				</svg>
-			</a>
-
-			<a
-				href="https://reactjs.org/"
-				aria-label="react link"
-				rel="noreferrer"
-				target={'_blank'}
-			>
-				<svg viewBox="0 0 128 128">
-					<g fill="#61DAFB">
-						<circle cx="64" cy="64" r="11.4"></circle>
-						<path d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3.6-2.4 1.1-4.8 1.5-7.1 2.1-13.2-.2-22.5-6.6-26.1-1.9-1.1-4-1.6-6.4-1.6-7 0-15.9 5.2-24.9 13.9-9-8.7-17.9-13.9-24.9-13.9-2.4 0-4.5.5-6.4 1.6-6.4 3.7-8.7 13-6.6 26.1.4 2.3.9 4.7 1.5 7.1-2.4.7-4.7 1.4-6.9 2.3C8.2 50 1.4 56.6 1.4 64s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3-.6 2.4-1.1 4.8-1.5 7.1-2.1 13.2.2 22.5 6.6 26.1 1.9 1.1 4 1.6 6.4 1.6 7.1 0 16-5.2 24.9-13.9 9 8.7 17.9 13.9 24.9 13.9 2.4 0 4.5-.5 6.4-1.6 6.4-3.7 8.7-13 6.6-26.1-.4-2.3-.9-4.7-1.5-7.1 2.4-.7 4.7-1.4 6.9-2.3 12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8zM92.5 14.7c4.1 2.4 5.5 9.8 3.8 20.3-.3 2.1-.8 4.3-1.4 6.6-5.2-1.2-10.7-2-16.5-2.5-3.4-4.8-6.9-9.1-10.4-13 7.4-7.3 14.9-12.3 21-12.3 1.3 0 2.5.3 3.5.9zM81.3 74c-1.8 3.2-3.9 6.4-6.1 9.6-3.7.3-7.4.4-11.2.4-3.9 0-7.6-.1-11.2-.4-2.2-3.2-4.2-6.4-6-9.6-1.9-3.3-3.7-6.7-5.3-10 1.6-3.3 3.4-6.7 5.3-10 1.8-3.2 3.9-6.4 6.1-9.6 3.7-.3 7.4-.4 11.2-.4 3.9 0 7.6.1 11.2.4 2.2 3.2 4.2 6.4 6 9.6 1.9 3.3 3.7 6.7 5.3 10-1.7 3.3-3.4 6.6-5.3 10zm8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3-3.4.8-7 1.4-10.8 1.9 1.2-1.9 2.5-3.9 3.6-6 1.2-2.1 2.3-4.2 3.4-6.2zM64 97.8c-2.4-2.6-4.7-5.4-6.9-8.3 2.3.1 4.6.2 6.9.2 2.3 0 4.6-.1 6.9-.2-2.2 2.9-4.5 5.7-6.9 8.3zm-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9 1.1-3.3 2.3-6.8 3.8-10.3 1.1 2 2.2 4.1 3.4 6.1 1.2 2.2 2.4 4.1 3.6 6.1zm-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3 3.4-.8 7-1.4 10.8-1.9-1.2 1.9-2.5 3.9-3.6 6-1.2 2.1-2.3 4.2-3.4 6.2zM64 30.2c2.4 2.6 4.7 5.4 6.9 8.3-2.3-.1-4.6-.2-6.9-.2-2.3 0-4.6.1-6.9.2 2.2-2.9 4.5-5.7 6.9-8.3zm22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9-1.1 3.3-2.3 6.8-3.8 10.3-1.1-2.1-2.2-4.2-3.4-6.2zM31.7 35c-1.7-10.5-.3-17.9 3.8-20.3 1-.6 2.2-.9 3.5-.9 6 0 13.5 4.9 21 12.3-3.5 3.8-7 8.2-10.4 13-5.8.5-11.3 1.4-16.5 2.5-.6-2.3-1-4.5-1.4-6.6zM7 64c0-4.7 5.7-9.7 15.7-13.4 2-.8 4.2-1.5 6.4-2.1 1.6 5 3.6 10.3 6 15.6-2.4 5.3-4.5 10.5-6 15.5C15.3 75.6 7 69.6 7 64zm28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3.3-2.1.8-4.3 1.4-6.6 5.2 1.2 10.7 2 16.5 2.5 3.4 4.8 6.9 9.1 10.4 13-7.4 7.3-14.9 12.3-21 12.3-1.3 0-2.5-.3-3.5-.9zM96.3 93c1.7 10.5.3 17.9-3.8 20.3-1 .6-2.2.9-3.5.9-6 0-13.5-4.9-21-12.3 3.5-3.8 7-8.2 10.4-13 5.8-.5 11.3-1.4 16.5-2.5.6 2.3 1 4.5 1.4 6.6zm9-15.6c-2 .8-4.2 1.5-6.4 2.1-1.6-5-3.6-10.3-6-15.6 2.4-5.3 4.5-10.5 6-15.5 13.8 4 22.1 10 22.1 15.6 0 4.7-5.8 9.7-15.7 13.4z"></path>
-					</g>
-				</svg>
-			</a>
-			<a
-				href="https://nextjs.org/"
-				aria-label="react link"
-				rel="noreferrer"
-				target={'_blank'}
-			>
-				<svg viewBox="0 0 128 128" style={{fill:"white"}}>
-					<path d="M64 0C28.7 0 0 28.7 0 64s28.7 64 64 64 64-28.7 64-64S99.3 0 64 0zm32.7 114.4L48.4 41.8h-6.8v50.1h6.8V55.3l44.2 61.5c-8.5 4.6-18.2 7.2-28.6 7.2-33.2.1-60.1-26.8-60.1-60S30.8 3.9 64 3.9s60.1 26.9 60.1 60.1c0 21.1-10.9 39.7-27.4 50.4z"></path>
-					<path d="M78.6 73.3l7.5 11.3V41.8h-7.5z"></path>
-				</svg>
-			</a>
+			<FigureWakatime>
+				<embed
+					src="https://wakatime.com/share/@andrecrjr/29574158-3659-45c0-940a-31526e8cb307.svg"
+					className="wakatime-svg"
+				></embed>
+			</FigureWakatime>
+			<FigCaptionWakatime className="wakatime-svg">
+				My Last Year Coding Activity by{' '}
+				<a href="https://wakatime.com/@andrecrjr" target="_blank">
+					Wakatime
+				</a>
+			</FigCaptionWakatime>
+			<HrefWakatime href="https://wakatime.com/@b64f37e5-c596-4278-bf05-2865d885d1ab">
+				<img
+					src="https://wakatime.com/badge/user/b64f37e5-c596-4278-bf05-2865d885d1ab.svg"
+					alt="Total time coded since Dec 14 2022"
+				/>
+			</HrefWakatime>
 		</PresentationTechStack>
 	);
 };
diff --git a/components/Pages/AboutMe/Experience/index.tsx b/components/Pages/AboutMe/Experience/index.tsx
@@ -11,7 +11,7 @@ const Experience = (props: Props) => {
       <p className="experience__role">2019 / current role</p>
       <p style={{"marginBottom":"1rem"}}>
         Currently collaborating with the O Globo Project team to enhance engagement and drive new users directly to the websites, 
-        particularly the <a href="">O Globo Newspaper website</a> one of the most famous news portal in Brazil.
+        particularly the <a href="https://oglobo.globo.com">O Globo Newspaper</a> one of the famous news portal in Brazil.
       </p>
       <details>
         <summary>More about this role</summary>
@@ -52,7 +52,7 @@ const Experience = (props: Props) => {
         </ul>
       </details>
     </section>
-		<a href="https://drive.google.com/file/d/1iKpeqeFRG4R8jH4kY-274pDIHk3AVHf8/view?usp=drive_link" className="experience__section--button">Download my complete resumé</a>
+		<a href="https://drive.google.com/file/d/1iKpeqeFRG4R8jH4kY-274pDIHk3AVHf8/view?usp=drive_link" target="_blank" className="experience__section--button">Download my complete resumé</a>
   </ExperienceSection>;
 };
 

diff --git a/components/Pages/AboutMe/Skill/Skill.style.tsx b/components/Pages/AboutMe/Skill/Skill.style.tsx
@@ -1,4 +1,29 @@
-"use client"
-import styled from "styled-components"
-import { ExperienceTitle } from "../Experience/Experience.style"
-export const SkillsetTitle = styled(ExperienceTitle)
+'use client';
+import styled from 'styled-components';
+import { ExperienceTitle } from '../Experience/Experience.style';
+export const SkillsetTitle = styled(ExperienceTitle)``;
+
+export const SkillList = styled.ul`
+	list-style-type: none;
+	display: flex;
+	flex-wrap: wrap;
+	&:not(:first-child) {
+		margin-top: 1.2rem;
+	}
+
+	&:not([data-language]) {
+		li {
+			&:not(:last-child) {
+				&:after {
+					content: '-';
+					padding: 0.77rem;
+				}
+			}
+		}
+	}
+	&[data-language] {
+		li {
+			margin-top: 1rem;
+		}
+	}
+`;
diff --git a/components/Pages/AboutMe/Skill/SkillSetComponent.tsx b/components/Pages/AboutMe/Skill/SkillSetComponent.tsx
@@ -0,0 +1,19 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { SkillList } from './Skill.style';
+
+export const SkillSetComponent = ({ filteredSkills }) => {
+	return (
+		<section>
+			<p>My Programming Proficiencies</p>
+			<SkillList>
+				{filteredSkills.map((item: { name: string }) => {
+					return (
+						<li key={item.name}>
+							<strong>{item.name}</strong>
+						</li>
+					);
+				})}
+			</SkillList>
+		</section>
+	);
+};
diff --git a/components/Pages/AboutMe/Skill/index.tsx b/components/Pages/AboutMe/Skill/index.tsx
@@ -1,10 +1,31 @@
-import React from "react";
+import React from 'react';
+import { SkillSetComponent } from './SkillSetComponent';
+import { SkillList, SkillsetTitle } from './Skill.style';
 
-const Skill = () => {
-  return <section data-aos="fade-up">
-            <h4>Skillset</h4>
-            <p>Work in Progress!</p>
-        </section>;
+const Skill = (props: { filteredSkills: [] }) => {
+	return (
+		<section data-aos="fade-up">
+			<SkillsetTitle>My Skills</SkillsetTitle>
+			<SkillSetComponent {...props} />
+
+			<SkillList data-language="true">
+				<p>Languages</p>
+				<li>
+					<p>
+						<strong>Portuguese</strong>: Native proficiency. Full command of the
+						language in both reading and writing, with the ability to
+						communicate complex concepts and engage in detailed discussions.
+					</p>
+				</li>
+				<li>
+					<strong>English</strong>: Intermediate proficiency. Capable of reading
+					and writing with a good understanding of grammar and vocabulary.
+					Comfortable engaging in everyday communication and mainly
+					comprehending technical texts
+				</li>
+			</SkillList>
+		</section>
+	);
 };
 
-export default Skill
+export default Skill;
diff --git a/components/Pages/AboutMe/index.tsx b/components/Pages/AboutMe/index.tsx
@@ -7,14 +7,16 @@ import {
 import Skill from './Skill';
 import Experience from './Experience';
 
-export const AboutMe = () => {
+export const AboutMe = (props: { filteredSkills: [] }) => {
 	return (
 		<AboutMeContainer id="about-me">
 			<AboutMePresentationContainer data-aos="fade-up">
-				<AboutMePresentation className="title"><h2>About me!</h2></AboutMePresentation>
+				<AboutMePresentation className="title">
+					<h2>About me!</h2>
+				</AboutMePresentation>
 			</AboutMePresentationContainer>
-			<Experience/>
-			<Skill />
+			<Experience />
+			<Skill {...props} />
 		</AboutMeContainer>
 	);
 };
diff --git a/components/Pages/MainPage/index.tsx b/components/Pages/MainPage/index.tsx
@@ -1,10 +1,7 @@
 import React, { ReactElement } from 'react';
 import { Container, Presentation, PresentationContainer } from '../styles';
 import { Stacks } from '../../Layout/Stacks';
-import {
-	MyStackContainer,
-	SocialNetworkContainer
-} from './style';
+import { MyStackContainer, SocialNetworkContainer } from './style';
 import { SocialNetwork } from '@/components/Layout/SocialNetwork';
 
 export default function MainPage({}): ReactElement {
@@ -41,7 +38,7 @@ export default function MainPage({}): ReactElement {
 					<Presentation data-grid="stack-grid" data-aos="fade-up">
 						<MyStackContainer>
 							<h2 className="presentation--world">
-								Front-end Developer, Python-like and geek love 🤓!
+								Front-end Developer and Platonic Fullstack Lover.
 							</h2>
 							<Stacks />
 						</MyStackContainer>