From 793e72b67ce75ea231c85d3e42dab7c4bb3c2fea Mon Sep 17 00:00:00 2001
From: Manuel Correia <electro2209@gmail.com>
Date: Tue, 10 Oct 2023 23:57:45 +0100
Subject: [PATCH 1/2] Removed barrel files

---
 src/components/Button/Button.test.tsx |  2 +-
 src/components/Button/Button.tsx      | 35 ----------
 src/components/Button/index.tsx       | 36 +++++++++-
 src/components/Card/Card.test.tsx     |  2 +-
 src/components/Card/Card.tsx          | 97 --------------------------
 src/components/Card/index.tsx         | 98 ++++++++++++++++++++++++++-
 src/components/Header/Header.tsx      | 17 -----
 src/components/Header/index.tsx       | 18 ++++-
 src/components/Input/Input.tsx        | 25 -------
 src/components/Input/index.tsx        | 26 ++++++-
 src/components/Textarea/Textarea.tsx  | 24 -------
 src/components/Textarea/index.tsx     | 25 ++++++-
 src/disableReactDevTools.ts           |  1 -
 13 files changed, 200 insertions(+), 206 deletions(-)
 delete mode 100644 src/components/Button/Button.tsx
 delete mode 100644 src/components/Card/Card.tsx
 delete mode 100644 src/components/Header/Header.tsx
 delete mode 100644 src/components/Input/Input.tsx
 delete mode 100644 src/components/Textarea/Textarea.tsx

diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
index 67d6ec5..f128af8 100644
--- a/src/components/Button/Button.test.tsx
+++ b/src/components/Button/Button.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 
-import { Button } from './Button';
+import { Button } from '.';
 
 it('renders snapshot correctly', () => {
     const tree = render(<Button />);
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
deleted file mode 100644
index c61d3d7..0000000
--- a/src/components/Button/Button.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-
-import { getSizeInPx } from './helper';
-import { StyledButton, StyledLabel } from './styles';
-import { ButtonProps } from './types';
-
-export const Button: React.FC<ButtonProps> = ({
-    size = 'small',
-    label = 'Button Label',
-    buttonType = 'default',
-    disabled,
-    className,
-    onClick,
-    onMouseUp,
-    onMouseDown
-}: ButtonProps) => {
-    const buttonSize = getSizeInPx(size);
-
-    return (
-        <StyledButton
-            size={size}
-            buttonType={buttonType}
-            buttonSize={buttonSize}
-            disabled={Boolean(disabled)}
-            aria-label="Button"
-            data-testid="button"
-            className={className}
-            onClick={() => onClick && onClick()}
-            onMouseDown={() => onMouseDown && onMouseDown()}
-            onMouseUp={() => onMouseUp && onMouseUp()}
-        >
-            <StyledLabel disabled={disabled}>{label}</StyledLabel>
-        </StyledButton>
-    );
-};
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index fe9c53c..c61d3d7 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -1 +1,35 @@
-export { Button } from './Button';
+import React from 'react';
+
+import { getSizeInPx } from './helper';
+import { StyledButton, StyledLabel } from './styles';
+import { ButtonProps } from './types';
+
+export const Button: React.FC<ButtonProps> = ({
+    size = 'small',
+    label = 'Button Label',
+    buttonType = 'default',
+    disabled,
+    className,
+    onClick,
+    onMouseUp,
+    onMouseDown
+}: ButtonProps) => {
+    const buttonSize = getSizeInPx(size);
+
+    return (
+        <StyledButton
+            size={size}
+            buttonType={buttonType}
+            buttonSize={buttonSize}
+            disabled={Boolean(disabled)}
+            aria-label="Button"
+            data-testid="button"
+            className={className}
+            onClick={() => onClick && onClick()}
+            onMouseDown={() => onMouseDown && onMouseDown()}
+            onMouseUp={() => onMouseUp && onMouseUp()}
+        >
+            <StyledLabel disabled={disabled}>{label}</StyledLabel>
+        </StyledButton>
+    );
+};
diff --git a/src/components/Card/Card.test.tsx b/src/components/Card/Card.test.tsx
index 8818c9b..daa2fc1 100644
--- a/src/components/Card/Card.test.tsx
+++ b/src/components/Card/Card.test.tsx
@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 
-import { Card } from './Card';
+import { Card } from '.';
 
 it('renders snapshot correctly', () => {
     const { container } = render(
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
deleted file mode 100644
index 730fa61..0000000
--- a/src/components/Card/Card.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { Button } from '../Button';
-
-import {
-    StyledCard,
-    StyledDivWrapper,
-    StyledImageWrapper,
-    StyledImage,
-    StyledBodyWrapper,
-    StyledTitle,
-    StyledSubtitle,
-    StyledButtonContainer,
-    StyledLinkWrapper
-} from './styles';
-import { CardProps } from './types';
-
-export const Card: React.FC<CardProps> = ({
-    title,
-    subtitle,
-    image,
-    href,
-    isActionCard,
-    className
-}: CardProps) => {
-    const navigate = useNavigate();
-    const hasImage = image;
-    const hasHref = href;
-
-    const isOutsideHref = () =>
-        href?.website.startsWith('/')
-            ? navigate(href?.website)
-            : (window.location = href?.website as (string | Location) & Location);
-
-    return (
-        <StyledCard className={className}>
-            {isActionCard ? (
-                <StyledDivWrapper>
-                    <StyledImageWrapper>{hasImage && <StyledImage src={image} />}</StyledImageWrapper>
-                    <StyledBodyWrapper hasImage={hasImage}>
-                        {title && <StyledTitle>{title}</StyledTitle>}
-                        {subtitle && (
-                            <StyledSubtitle isActionCard={Boolean(isActionCard)}>{subtitle}</StyledSubtitle>
-                        )}
-                        {isActionCard && (
-                            <StyledButtonContainer>
-                                <Button
-                                    label="Live"
-                                    disabled={!href?.website}
-                                    onClick={() => {
-                                        isOutsideHref();
-                                    }}
-                                />
-                                <Button
-                                    label="Code"
-                                    disabled={!hasHref?.github}
-                                    onClick={() =>
-                                        (window.location = href?.github as (string | Location) & Location)
-                                    }
-                                />
-                            </StyledButtonContainer>
-                        )}
-                    </StyledBodyWrapper>
-                </StyledDivWrapper>
-            ) : (
-                <StyledLinkWrapper href={href?.website || href?.github}>
-                    <StyledImageWrapper>{hasImage && <StyledImage src={image} />}</StyledImageWrapper>
-                    <StyledBodyWrapper hasImage={hasImage}>
-                        {title && <StyledTitle>{title}</StyledTitle>}
-                        {subtitle && (
-                            <StyledSubtitle isActionCard={Boolean(isActionCard)}>{subtitle}</StyledSubtitle>
-                        )}
-                        {isActionCard && (
-                            <StyledButtonContainer>
-                                <Button
-                                    label="Live"
-                                    disabled={!href?.website}
-                                    onClick={() =>
-                                        (window.location = href?.website as (string | Location) & Location)
-                                    }
-                                />
-                                <Button
-                                    label="Code"
-                                    disabled={!hasHref?.github}
-                                    onClick={() =>
-                                        (window.location = href?.github as (string | Location) & Location)
-                                    }
-                                />
-                            </StyledButtonContainer>
-                        )}
-                    </StyledBodyWrapper>
-                </StyledLinkWrapper>
-            )}
-        </StyledCard>
-    );
-};
diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
index 1e15afd..730fa61 100644
--- a/src/components/Card/index.tsx
+++ b/src/components/Card/index.tsx
@@ -1 +1,97 @@
-export { Card } from './Card';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { Button } from '../Button';
+
+import {
+    StyledCard,
+    StyledDivWrapper,
+    StyledImageWrapper,
+    StyledImage,
+    StyledBodyWrapper,
+    StyledTitle,
+    StyledSubtitle,
+    StyledButtonContainer,
+    StyledLinkWrapper
+} from './styles';
+import { CardProps } from './types';
+
+export const Card: React.FC<CardProps> = ({
+    title,
+    subtitle,
+    image,
+    href,
+    isActionCard,
+    className
+}: CardProps) => {
+    const navigate = useNavigate();
+    const hasImage = image;
+    const hasHref = href;
+
+    const isOutsideHref = () =>
+        href?.website.startsWith('/')
+            ? navigate(href?.website)
+            : (window.location = href?.website as (string | Location) & Location);
+
+    return (
+        <StyledCard className={className}>
+            {isActionCard ? (
+                <StyledDivWrapper>
+                    <StyledImageWrapper>{hasImage && <StyledImage src={image} />}</StyledImageWrapper>
+                    <StyledBodyWrapper hasImage={hasImage}>
+                        {title && <StyledTitle>{title}</StyledTitle>}
+                        {subtitle && (
+                            <StyledSubtitle isActionCard={Boolean(isActionCard)}>{subtitle}</StyledSubtitle>
+                        )}
+                        {isActionCard && (
+                            <StyledButtonContainer>
+                                <Button
+                                    label="Live"
+                                    disabled={!href?.website}
+                                    onClick={() => {
+                                        isOutsideHref();
+                                    }}
+                                />
+                                <Button
+                                    label="Code"
+                                    disabled={!hasHref?.github}
+                                    onClick={() =>
+                                        (window.location = href?.github as (string | Location) & Location)
+                                    }
+                                />
+                            </StyledButtonContainer>
+                        )}
+                    </StyledBodyWrapper>
+                </StyledDivWrapper>
+            ) : (
+                <StyledLinkWrapper href={href?.website || href?.github}>
+                    <StyledImageWrapper>{hasImage && <StyledImage src={image} />}</StyledImageWrapper>
+                    <StyledBodyWrapper hasImage={hasImage}>
+                        {title && <StyledTitle>{title}</StyledTitle>}
+                        {subtitle && (
+                            <StyledSubtitle isActionCard={Boolean(isActionCard)}>{subtitle}</StyledSubtitle>
+                        )}
+                        {isActionCard && (
+                            <StyledButtonContainer>
+                                <Button
+                                    label="Live"
+                                    disabled={!href?.website}
+                                    onClick={() =>
+                                        (window.location = href?.website as (string | Location) & Location)
+                                    }
+                                />
+                                <Button
+                                    label="Code"
+                                    disabled={!hasHref?.github}
+                                    onClick={() =>
+                                        (window.location = href?.github as (string | Location) & Location)
+                                    }
+                                />
+                            </StyledButtonContainer>
+                        )}
+                    </StyledBodyWrapper>
+                </StyledLinkWrapper>
+            )}
+        </StyledCard>
+    );
+};
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
deleted file mode 100644
index 6c3f160..0000000
--- a/src/components/Header/Header.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import Color from 'color';
-import validateColor from 'validate-color';
-
-import { HeaderProps } from './types';
-import { StyledHeader } from './styles';
-
-export const Header: React.FC<HeaderProps> = ({ backgroundColor, className, children }: HeaderProps) => {
-    const parsedColor = validateColor(backgroundColor as string);
-    const bgHex = (parsedColor && Color(backgroundColor).hex()) || '';
-
-    return (
-        <StyledHeader backgroundColor={bgHex} className={className}>
-            {children}
-        </StyledHeader>
-    );
-};
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 29429dc..6c3f160 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -1 +1,17 @@
-export { Header } from './Header';
+import React from 'react';
+import Color from 'color';
+import validateColor from 'validate-color';
+
+import { HeaderProps } from './types';
+import { StyledHeader } from './styles';
+
+export const Header: React.FC<HeaderProps> = ({ backgroundColor, className, children }: HeaderProps) => {
+    const parsedColor = validateColor(backgroundColor as string);
+    const bgHex = (parsedColor && Color(backgroundColor).hex()) || '';
+
+    return (
+        <StyledHeader backgroundColor={bgHex} className={className}>
+            {children}
+        </StyledHeader>
+    );
+};
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
deleted file mode 100644
index e386494..0000000
--- a/src/components/Input/Input.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-
-import { StyledContainer, StyledInput, StyledLabel } from './styles';
-import { InputProps } from './types';
-
-export const Input: React.FC<InputProps> = ({
-    type,
-    label,
-    disabled,
-    className,
-    placeholder,
-    onChange
-}: InputProps) => {
-    return (
-        <StyledContainer className={className}>
-            {label && <StyledLabel>{label}</StyledLabel>}
-            <StyledInput
-                placeholder={placeholder}
-                disabled={disabled}
-                onChange={(event: React.FocusEvent<HTMLInputElement>) => onChange && onChange(event)}
-                type={type}
-            />
-        </StyledContainer>
-    );
-};
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
index 6322cf3..e386494 100644
--- a/src/components/Input/index.tsx
+++ b/src/components/Input/index.tsx
@@ -1 +1,25 @@
-export { Input } from './Input';
+import React from 'react';
+
+import { StyledContainer, StyledInput, StyledLabel } from './styles';
+import { InputProps } from './types';
+
+export const Input: React.FC<InputProps> = ({
+    type,
+    label,
+    disabled,
+    className,
+    placeholder,
+    onChange
+}: InputProps) => {
+    return (
+        <StyledContainer className={className}>
+            {label && <StyledLabel>{label}</StyledLabel>}
+            <StyledInput
+                placeholder={placeholder}
+                disabled={disabled}
+                onChange={(event: React.FocusEvent<HTMLInputElement>) => onChange && onChange(event)}
+                type={type}
+            />
+        </StyledContainer>
+    );
+};
diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
deleted file mode 100644
index 7daa642..0000000
--- a/src/components/Textarea/Textarea.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-
-import { StyledTextarea } from './styles';
-import { TextareaProps } from './types';
-
-export const Textarea: React.FC<TextareaProps> = ({
-    placeholder,
-    value,
-    resizable,
-    onChange,
-    disabled,
-    error
-}) => {
-    return (
-        <StyledTextarea
-            placeholder={placeholder}
-            value={value}
-            resizable={resizable}
-            aria-label="Textarea"
-            disabled={disabled}
-            onChange={(ev) => onChange && onChange(ev.target.value)}
-        />
-    );
-};
diff --git a/src/components/Textarea/index.tsx b/src/components/Textarea/index.tsx
index f4212c0..7daa642 100644
--- a/src/components/Textarea/index.tsx
+++ b/src/components/Textarea/index.tsx
@@ -1 +1,24 @@
-export { Textarea } from './Textarea';
+import React from 'react';
+
+import { StyledTextarea } from './styles';
+import { TextareaProps } from './types';
+
+export const Textarea: React.FC<TextareaProps> = ({
+    placeholder,
+    value,
+    resizable,
+    onChange,
+    disabled,
+    error
+}) => {
+    return (
+        <StyledTextarea
+            placeholder={placeholder}
+            value={value}
+            resizable={resizable}
+            aria-label="Textarea"
+            disabled={disabled}
+            onChange={(ev) => onChange && onChange(ev.target.value)}
+        />
+    );
+};
diff --git a/src/disableReactDevTools.ts b/src/disableReactDevTools.ts
index f014845..ea7e145 100644
--- a/src/disableReactDevTools.ts
+++ b/src/disableReactDevTools.ts
@@ -1,7 +1,6 @@
 // disableReactDevTools.ts
 
 // Declare the types if you're using TypeScript
-// Ignore this block if you're using JavaScript
 declare global {
     interface Window {
         __REACT_DEVTOOLS_GLOBAL_HOOK__: any;

From 89c748ae827879609ee920c27f2d481daef3d4eb Mon Sep 17 00:00:00 2001
From: Manuel Correia <electro2209@gmail.com>
Date: Wed, 11 Oct 2023 02:12:46 +0100
Subject: [PATCH 2/2] Update Project Overall UI

---
 public/index.html                             |   2 +
 src/App.tsx                                   |   9 +-
 src/GlobalStyles.tsx                          | 119 +++-
 src/__snapshots__/App.test.tsx.snap           | 656 ++++++++++++++++--
 .../Button/__snapshots__/Button.test.tsx.snap |  36 +-
 .../Header/__snapshots__/Header.test.tsx.snap |   8 +-
 src/components/Header/styles.tsx              |   2 -
 .../__snapshots__/Portefolio.test.tsx.snap    |  96 ++-
 src/components/Portefolio/index.tsx           |  54 +-
 src/components/Portefolio/styles.tsx          |  93 ++-
 src/components/Portefolio/types.ts            |  19 +-
 src/data/index.json                           | 102 ++-
 src/index.css                                 |  82 ---
 src/index.tsx                                 |   2 +
 src/pages/projects/styles.tsx                 |  13 +-
 src/{AppStyles.tsx => styles.tsx}             |   0
 16 files changed, 1055 insertions(+), 238 deletions(-)
 delete mode 100644 src/index.css
 rename src/{AppStyles.tsx => styles.tsx} (100%)

diff --git a/public/index.html b/public/index.html
index 4255f87..7c93a1a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,6 +19,8 @@
             property="og:image"
             content="https://media-exp1.licdn.com/dms/image/C4D03AQHnmnhLoeWeUQ/profile-displayphoto-shrink_800_800/0/1643239289504?e=1649289600&v=beta&t=Tch_XNfZXK3s4ZM3tdSAyDXkErE3wh9kTf3m4dSfMuw"
         />
+        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+
 
         <!-- Twitter -->
         <meta property="twitter:card" content="summary_large_image" />
diff --git a/src/App.tsx b/src/App.tsx
index 126fe5c..26e0a19 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
-import './index.css';
 import { Route, Routes, useNavigate } from 'react-router-dom';
 
-import { StyledColumn, StyledContainer, StyledContent, StyledHeader, StyledOverlay } from './AppStyles';
+import { StyledColumn, StyledContainer, StyledContent, StyledHeader, StyledOverlay } from './styles';
 import data from './data/index.json';
 import { Button, Portefolio } from './components';
 import { ProjectsUI, ForumOutlet, Threads } from './pages';
@@ -20,8 +19,6 @@ export const App: React.FC = () => {
         navigate('/');
     };
 
-    // REFACTOR THIS INTO UI
-
     const App = (
         <StyledContainer>
             <StyledHeader>
@@ -34,8 +31,8 @@ export const App: React.FC = () => {
                             label={profile.label}
                             img={profile.img}
                             headline={profile.headline}
-                            link={profile.link}
-                            linkLabel={profile.linkLabel}
+                            currentStack={profile.currentTechStack}
+                            otherStack={profile.otherToolsFrameworks}
                             cards={profile.cards}
                         />
                     </StyledColumn>
diff --git a/src/GlobalStyles.tsx b/src/GlobalStyles.tsx
index e0e9fbc..daa664e 100644
--- a/src/GlobalStyles.tsx
+++ b/src/GlobalStyles.tsx
@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { createGlobalStyle, css } from 'styled-components';
 
 export const fontStyle = css`
     font-size: 16px;
@@ -12,6 +12,9 @@ export const buttonLabelStyle = css`
     font-weight: 500;
     letter-spacing: 0;
     font-family: 'Helvetica Neue', sans-serif;
+    text-transform: uppercase;
+    font-size: 0.9rem;
+    font-weight: 600;
 `;
 
 export const BACKGROUND = '#151515';
@@ -30,3 +33,117 @@ export const lightgrey1 = '#c5c5c5';
 export const setCursor = ({ disabled }: { disabled?: boolean }) => {
     return disabled ? 'not-allowed' : 'pointer';
 };
+
+export const GlobalStyle = createGlobalStyle`
+html {
+    height: 100%;
+    min-height: 100%;
+    position: relative;
+    background-color: #fafafa;
+}
+
+body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    font-family: monospace;
+    font-size: 1.2rem;
+    color: #333;
+    background-color: #fafafa;
+}
+
+#root {
+    width: 100%;
+    height: 100%;
+
+    /* Global Size Standards */
+    --mobile: 600px;
+    --small: 768px;
+    --medium: 1024px;
+    --large: 1440px;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    font: 1rem;
+    font-family: 'Roboto', sans-serif;
+}
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+table {
+    width: 100%;
+}
+
+thead {
+    width: 100%;
+    color: white;
+    background: rgb(27, 27, 27);
+    font-size: 14px;
+}
+
+tr {
+    width: 100%;
+}
+
+td,
+.header__item {
+    flex: 1 1 20%;
+    text-align: center;
+}
+
+.header__item {
+    text-transform: uppercase;
+}
+
+.filter__link {
+    color: white;
+    text-decoration: none;
+    position: relative;
+    display: inline-block;
+}
+
+`;
diff --git a/src/__snapshots__/App.test.tsx.snap b/src/__snapshots__/App.test.tsx.snap
index 0f863d4..c5a085a 100644
--- a/src/__snapshots__/App.test.tsx.snap
+++ b/src/__snapshots__/App.test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`renders snapshot correctly 1`] = `
 <div
-  className="sc-kgTSHT cKdTSH"
+  className="sc-ezOQGI jLXQH"
 >
   <div
-    className="sc-kDvujY koyayW sc-cwSeag hgPOZx"
+    className="sc-kDvujY lGomR sc-jIRcFI efuAGQ"
   >
     <button
       aria-label="Button"
@@ -18,58 +18,316 @@ exports[`renders snapshot correctly 1`] = `
       size="large"
     >
       <span
-        className="sc-gswNZR gnrOlr"
+        className="sc-gswNZR eXLoRM"
       >
         Projects
       </span>
     </button>
   </div>
   <div
-    className="sc-fLcnxK eHLQPQ"
+    className="sc-bYMpWt gOxeEx"
   >
     <div
-      className="sc-bBABsx fODJzf"
+      className="sc-kMjNwy fGowAf"
     >
       <div
-        className="sc-iveFHk fnClSR"
+        className="sc-ilhmMj pojUl"
       >
         <div
-          className="sc-hHTYSt cXlgDK"
+          className="sc-iJnaPW dFTIFI"
         >
-          <img
-            className="sc-hBxehG jKmbGY"
-            src="/images/me.jpg"
-          />
-          <span
-            className="sc-bqWxrE jFgBe"
-          >
-            Frontend Web Developer
-          </span>
-          <div
-            className="sc-fEXmlR hRrSOb"
-          >
-            <span
-              className="sc-ksBlkl bOpCiB"
+          <div>
+            <div
+              className="sc-idXgbr fZkMoO"
             >
-              <span>
-                Hi! I use React & Typescript to build a lot of cool things.
-              </span>
-              <div>
-                Working at:
-                <a
-                  className="sc-fnGiBr LZhWN"
-                  href="https://boost-it.pt/pt/"
+              <img
+                className="sc-hHTYSt duBETl"
+                src="/images/me.jpg"
+              />
+              <div
+                className="sc-bjfHbI fXoFTy"
+              >
+                <h1
+                  className="sc-bqWxrE jFgBe"
                 >
-                  Boost-IT
-                </a>
+                  Frontend Web Developer
+                </h1>
+                <h2
+                  className="sc-ksBlkl gHLbBE"
+                >
+                  Hey there! 👋 I'm passionate about crafting seamless user experiences using the power of HTML, CSS, and JavaScript/Typescript. With a knack for creative problem-solving, I specialize in Frontend development. My toolkit includes popular frameworks like React and technologies like TypeScript.
+                </h2>
               </div>
-            </span>
+            </div>
+            <div
+              className="sc-kgTSHT fapVhj"
+            >
+              <span
+                className="sc-fnGiBr gTgcKS"
+              >
+                <div>
+                  <span
+                    className="sc-hBxehG efYgmC"
+                  >
+                    Working with the following technologies:
+                  </span>
+                  <div
+                    className="sc-fLcnxK cHeipZ"
+                  >
+                    <div
+                      className="sc-bBABsx fLGBsx"
+                    >
+                      <span
+                        className="sc-fEXmlR dmBgmn"
+                      >
+                        Typescript
+                      </span>
+                      <img
+                        alt="Typescript"
+                        className="sc-dIfARi gqTHQu"
+                        src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/typescript-colored.svg"
+                      />
+                    </div>
+                    <div
+                      className="sc-bBABsx fLGBsx"
+                    >
+                      <span
+                        className="sc-fEXmlR dmBgmn"
+                      >
+                        Javascript
+                      </span>
+                      <img
+                        alt="Javascript"
+                        className="sc-dIfARi gqTHQu"
+                        src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/javascript-colored.svg"
+                      />
+                    </div>
+                    <div
+                      className="sc-bBABsx fLGBsx"
+                    >
+                      <span
+                        className="sc-fEXmlR dmBgmn"
+                      >
+                        React
+                      </span>
+                      <img
+                        alt="React"
+                        className="sc-dIfARi gqTHQu"
+                        src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/react-colored.svg"
+                      />
+                    </div>
+                    <div
+                      className="sc-bBABsx fLGBsx"
+                    >
+                      <span
+                        className="sc-fEXmlR dmBgmn"
+                      >
+                        Nextjs
+                      </span>
+                      <img
+                        alt="Nextjs"
+                        className="sc-dIfARi gqTHQu"
+                        src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/nextjs-colored.svg"
+                      />
+                    </div>
+                    <div
+                      className="sc-bBABsx fLGBsx"
+                    >
+                      <span
+                        className="sc-fEXmlR dmBgmn"
+                      >
+                        React Query
+                      </span>
+                    </div>
+                    <div
+                      className="sc-bBABsx fLGBsx"
+                    >
+                      <span
+                        className="sc-fEXmlR dmBgmn"
+                      >
+                        React Hook Form
+                      </span>
+                    </div>
+                    <div
+                      className="sc-bBABsx fLGBsx"
+                    >
+                      <span
+                        className="sc-fEXmlR dmBgmn"
+                      >
+                        React Router
+                      </span>
+                    </div>
+                    <div
+                      className="sc-bBABsx fLGBsx"
+                    >
+                      <span
+                        className="sc-fEXmlR dmBgmn"
+                      >
+                        Jotai
+                      </span>
+                    </div>
+                    <div
+                      className="sc-bBABsx fLGBsx"
+                    >
+                      <span
+                        className="sc-fEXmlR dmBgmn"
+                      >
+                        Module-Federation
+                      </span>
+                    </div>
+                    <div
+                      className="sc-bBABsx fLGBsx"
+                    >
+                      <span
+                        className="sc-fEXmlR dmBgmn"
+                      >
+                        MicroFrontends
+                      </span>
+                    </div>
+                    <div
+                      className="sc-bBABsx fLGBsx"
+                    >
+                      <span
+                        className="sc-fEXmlR dmBgmn"
+                      >
+                        Component Libraries
+                      </span>
+                    </div>
+                    <div
+                      className="sc-bBABsx fLGBsx"
+                    >
+                      <span
+                        className="sc-fEXmlR dmBgmn"
+                      >
+                        Storybook
+                      </span>
+                    </div>
+                    <div
+                      className="sc-bBABsx fLGBsx"
+                    >
+                      <span
+                        className="sc-fEXmlR dmBgmn"
+                      >
+                        GraphQL
+                      </span>
+                      <img
+                        alt="GraphQL"
+                        className="sc-dIfARi gqTHQu"
+                        src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/graphql-colored.svg"
+                      />
+                    </div>
+                    <div
+                      className="sc-bBABsx fLGBsx"
+                    >
+                      <span
+                        className="sc-fEXmlR dmBgmn"
+                      >
+                        Webpack
+                      </span>
+                      <img
+                        alt="Webpack"
+                        className="sc-dIfARi gqTHQu"
+                        src="https://raw.githubusercontent.com/devicons/devicon/d00d0969292a6569d45b06d3f350f463a0107b0d/icons/webpack/webpack-original-wordmark.svg"
+                      />
+                    </div>
+                    <div
+                      className="sc-bBABsx fLGBsx"
+                    >
+                      <span
+                        className="sc-fEXmlR dmBgmn"
+                      >
+                        Docker
+                      </span>
+                      <img
+                        alt="Docker"
+                        className="sc-dIfARi gqTHQu"
+                        src="https://raw.githubusercontent.com/devicons/devicon/master/icons/docker/docker-original-wordmark.svg"
+                      />
+                    </div>
+                    <div
+                      className="sc-bBABsx fLGBsx"
+                    >
+                      <span
+                        className="sc-fEXmlR dmBgmn"
+                      >
+                        Bash
+                      </span>
+                      <img
+                        alt="Bash"
+                        className="sc-dIfARi gqTHQu"
+                        src="https://www.vectorlogo.zone/logos/gnu_bash/gnu_bash-icon.svg"
+                      />
+                    </div>
+                    <div
+                      className="sc-bBABsx fLGBsx"
+                    >
+                      <span
+                        className="sc-fEXmlR dmBgmn"
+                      >
+                        Babel
+                      </span>
+                      <img
+                        alt="Babel"
+                        className="sc-dIfARi gqTHQu"
+                        src="https://www.vectorlogo.zone/logos/babeljs/babeljs-icon.svg"
+                      />
+                    </div>
+                    <div
+                      className="sc-bBABsx fLGBsx"
+                    >
+                      <span
+                        className="sc-fEXmlR dmBgmn"
+                      >
+                        GIT
+                      </span>
+                      <img
+                        alt="GIT"
+                        className="sc-dIfARi gqTHQu"
+                        src="https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg"
+                      />
+                    </div>
+                    <div
+                      className="sc-bBABsx fLGBsx"
+                    >
+                      <span
+                        className="sc-fEXmlR dmBgmn"
+                      >
+                        CI/CD
+                      </span>
+                    </div>
+                    <div
+                      className="sc-bBABsx fLGBsx"
+                    >
+                      <span
+                        className="sc-fEXmlR dmBgmn"
+                      >
+                        Jest
+                      </span>
+                      <img
+                        alt="Jest"
+                        className="sc-dIfARi gqTHQu"
+                        src="https://www.vectorlogo.zone/logos/jestjsio/jestjsio-icon.svg"
+                      />
+                    </div>
+                    <div
+                      className="sc-bBABsx fLGBsx"
+                    >
+                      <span
+                        className="sc-fEXmlR dmBgmn"
+                      >
+                        Styled-Components
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </span>
+            </div>
           </div>
           <div
-            className="sc-bjfHbI jJMIbg"
+            className="sc-iveFHk csPWnK"
           >
             <div
-              className="sc-dkrFOg hmHHOD sc-idXgbr gGEryw"
+              className="sc-dkrFOg hmHHOD sc-cwSeag ffPXVK"
             >
               <a
                 className="sc-ftTHYK PBCua"
@@ -95,7 +353,7 @@ exports[`renders snapshot correctly 1`] = `
               </a>
             </div>
             <div
-              className="sc-dkrFOg hmHHOD sc-idXgbr gGEryw"
+              className="sc-dkrFOg hmHHOD sc-cwSeag ffPXVK"
             >
               <a
                 className="sc-ftTHYK PBCua"
@@ -131,10 +389,10 @@ exports[`renders snapshot correctly 1`] = `
 exports[`renders without crashing 1`] = `
 <div>
   <div
-    class="sc-kgTSHT cKdTSH"
+    class="sc-ezOQGI jLXQH"
   >
     <div
-      class="sc-kDvujY koyayW sc-cwSeag hgPOZx"
+      class="sc-kDvujY lGomR sc-jIRcFI efuAGQ"
     >
       <button
         aria-label="Button"
@@ -142,58 +400,316 @@ exports[`renders without crashing 1`] = `
         data-testid="button"
       >
         <span
-          class="sc-gswNZR gnrOlr"
+          class="sc-gswNZR eXLoRM"
         >
           Projects
         </span>
       </button>
     </div>
     <div
-      class="sc-fLcnxK eHLQPQ"
+      class="sc-bYMpWt gOxeEx"
     >
       <div
-        class="sc-bBABsx fODJzf"
+        class="sc-kMjNwy fGowAf"
       >
         <div
-          class="sc-iveFHk fnClSR"
+          class="sc-ilhmMj pojUl"
         >
           <div
-            class="sc-hHTYSt cXlgDK"
+            class="sc-iJnaPW dFTIFI"
           >
-            <img
-              class="sc-hBxehG jKmbGY"
-              src="/images/me.jpg"
-            />
-            <span
-              class="sc-bqWxrE jFgBe"
-            >
-              Frontend Web Developer
-            </span>
-            <div
-              class="sc-fEXmlR hRrSOb"
-            >
-              <span
-                class="sc-ksBlkl bOpCiB"
+            <div>
+              <div
+                class="sc-idXgbr fZkMoO"
               >
-                <span>
-                  Hi! I use React & Typescript to build a lot of cool things.
-                </span>
-                <div>
-                  Working at:
-                  <a
-                    class="sc-fnGiBr LZhWN"
-                    href="https://boost-it.pt/pt/"
+                <img
+                  class="sc-hHTYSt duBETl"
+                  src="/images/me.jpg"
+                />
+                <div
+                  class="sc-bjfHbI fXoFTy"
+                >
+                  <h1
+                    class="sc-bqWxrE jFgBe"
+                  >
+                    Frontend Web Developer
+                  </h1>
+                  <h2
+                    class="sc-ksBlkl gHLbBE"
                   >
-                    Boost-IT
-                  </a>
+                    Hey there! 👋 I'm passionate about crafting seamless user experiences using the power of HTML, CSS, and JavaScript/Typescript. With a knack for creative problem-solving, I specialize in Frontend development. My toolkit includes popular frameworks like React and technologies like TypeScript.
+                  </h2>
                 </div>
-              </span>
+              </div>
+              <div
+                class="sc-kgTSHT fapVhj"
+              >
+                <span
+                  class="sc-fnGiBr gTgcKS"
+                >
+                  <div>
+                    <span
+                      class="sc-hBxehG efYgmC"
+                    >
+                      Working with the following technologies:
+                    </span>
+                    <div
+                      class="sc-fLcnxK cHeipZ"
+                    >
+                      <div
+                        class="sc-bBABsx fLGBsx"
+                      >
+                        <span
+                          class="sc-fEXmlR dmBgmn"
+                        >
+                          Typescript
+                        </span>
+                        <img
+                          alt="Typescript"
+                          class="sc-dIfARi gqTHQu"
+                          src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/typescript-colored.svg"
+                        />
+                      </div>
+                      <div
+                        class="sc-bBABsx fLGBsx"
+                      >
+                        <span
+                          class="sc-fEXmlR dmBgmn"
+                        >
+                          Javascript
+                        </span>
+                        <img
+                          alt="Javascript"
+                          class="sc-dIfARi gqTHQu"
+                          src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/javascript-colored.svg"
+                        />
+                      </div>
+                      <div
+                        class="sc-bBABsx fLGBsx"
+                      >
+                        <span
+                          class="sc-fEXmlR dmBgmn"
+                        >
+                          React
+                        </span>
+                        <img
+                          alt="React"
+                          class="sc-dIfARi gqTHQu"
+                          src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/react-colored.svg"
+                        />
+                      </div>
+                      <div
+                        class="sc-bBABsx fLGBsx"
+                      >
+                        <span
+                          class="sc-fEXmlR dmBgmn"
+                        >
+                          Nextjs
+                        </span>
+                        <img
+                          alt="Nextjs"
+                          class="sc-dIfARi gqTHQu"
+                          src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/nextjs-colored.svg"
+                        />
+                      </div>
+                      <div
+                        class="sc-bBABsx fLGBsx"
+                      >
+                        <span
+                          class="sc-fEXmlR dmBgmn"
+                        >
+                          React Query
+                        </span>
+                      </div>
+                      <div
+                        class="sc-bBABsx fLGBsx"
+                      >
+                        <span
+                          class="sc-fEXmlR dmBgmn"
+                        >
+                          React Hook Form
+                        </span>
+                      </div>
+                      <div
+                        class="sc-bBABsx fLGBsx"
+                      >
+                        <span
+                          class="sc-fEXmlR dmBgmn"
+                        >
+                          React Router
+                        </span>
+                      </div>
+                      <div
+                        class="sc-bBABsx fLGBsx"
+                      >
+                        <span
+                          class="sc-fEXmlR dmBgmn"
+                        >
+                          Jotai
+                        </span>
+                      </div>
+                      <div
+                        class="sc-bBABsx fLGBsx"
+                      >
+                        <span
+                          class="sc-fEXmlR dmBgmn"
+                        >
+                          Module-Federation
+                        </span>
+                      </div>
+                      <div
+                        class="sc-bBABsx fLGBsx"
+                      >
+                        <span
+                          class="sc-fEXmlR dmBgmn"
+                        >
+                          MicroFrontends
+                        </span>
+                      </div>
+                      <div
+                        class="sc-bBABsx fLGBsx"
+                      >
+                        <span
+                          class="sc-fEXmlR dmBgmn"
+                        >
+                          Component Libraries
+                        </span>
+                      </div>
+                      <div
+                        class="sc-bBABsx fLGBsx"
+                      >
+                        <span
+                          class="sc-fEXmlR dmBgmn"
+                        >
+                          Storybook
+                        </span>
+                      </div>
+                      <div
+                        class="sc-bBABsx fLGBsx"
+                      >
+                        <span
+                          class="sc-fEXmlR dmBgmn"
+                        >
+                          GraphQL
+                        </span>
+                        <img
+                          alt="GraphQL"
+                          class="sc-dIfARi gqTHQu"
+                          src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/graphql-colored.svg"
+                        />
+                      </div>
+                      <div
+                        class="sc-bBABsx fLGBsx"
+                      >
+                        <span
+                          class="sc-fEXmlR dmBgmn"
+                        >
+                          Webpack
+                        </span>
+                        <img
+                          alt="Webpack"
+                          class="sc-dIfARi gqTHQu"
+                          src="https://raw.githubusercontent.com/devicons/devicon/d00d0969292a6569d45b06d3f350f463a0107b0d/icons/webpack/webpack-original-wordmark.svg"
+                        />
+                      </div>
+                      <div
+                        class="sc-bBABsx fLGBsx"
+                      >
+                        <span
+                          class="sc-fEXmlR dmBgmn"
+                        >
+                          Docker
+                        </span>
+                        <img
+                          alt="Docker"
+                          class="sc-dIfARi gqTHQu"
+                          src="https://raw.githubusercontent.com/devicons/devicon/master/icons/docker/docker-original-wordmark.svg"
+                        />
+                      </div>
+                      <div
+                        class="sc-bBABsx fLGBsx"
+                      >
+                        <span
+                          class="sc-fEXmlR dmBgmn"
+                        >
+                          Bash
+                        </span>
+                        <img
+                          alt="Bash"
+                          class="sc-dIfARi gqTHQu"
+                          src="https://www.vectorlogo.zone/logos/gnu_bash/gnu_bash-icon.svg"
+                        />
+                      </div>
+                      <div
+                        class="sc-bBABsx fLGBsx"
+                      >
+                        <span
+                          class="sc-fEXmlR dmBgmn"
+                        >
+                          Babel
+                        </span>
+                        <img
+                          alt="Babel"
+                          class="sc-dIfARi gqTHQu"
+                          src="https://www.vectorlogo.zone/logos/babeljs/babeljs-icon.svg"
+                        />
+                      </div>
+                      <div
+                        class="sc-bBABsx fLGBsx"
+                      >
+                        <span
+                          class="sc-fEXmlR dmBgmn"
+                        >
+                          GIT
+                        </span>
+                        <img
+                          alt="GIT"
+                          class="sc-dIfARi gqTHQu"
+                          src="https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg"
+                        />
+                      </div>
+                      <div
+                        class="sc-bBABsx fLGBsx"
+                      >
+                        <span
+                          class="sc-fEXmlR dmBgmn"
+                        >
+                          CI/CD
+                        </span>
+                      </div>
+                      <div
+                        class="sc-bBABsx fLGBsx"
+                      >
+                        <span
+                          class="sc-fEXmlR dmBgmn"
+                        >
+                          Jest
+                        </span>
+                        <img
+                          alt="Jest"
+                          class="sc-dIfARi gqTHQu"
+                          src="https://www.vectorlogo.zone/logos/jestjsio/jestjsio-icon.svg"
+                        />
+                      </div>
+                      <div
+                        class="sc-bBABsx fLGBsx"
+                      >
+                        <span
+                          class="sc-fEXmlR dmBgmn"
+                        >
+                          Styled-Components
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </span>
+              </div>
             </div>
             <div
-              class="sc-bjfHbI jJMIbg"
+              class="sc-iveFHk csPWnK"
             >
               <div
-                class="sc-dkrFOg hmHHOD sc-idXgbr gGEryw"
+                class="sc-dkrFOg hmHHOD sc-cwSeag ffPXVK"
               >
                 <a
                   class="sc-ftTHYK PBCua"
@@ -219,7 +735,7 @@ exports[`renders without crashing 1`] = `
                 </a>
               </div>
               <div
-                class="sc-dkrFOg hmHHOD sc-idXgbr gGEryw"
+                class="sc-dkrFOg hmHHOD sc-cwSeag ffPXVK"
               >
                 <a
                   class="sc-ftTHYK PBCua"
diff --git a/src/components/Button/__snapshots__/Button.test.tsx.snap b/src/components/Button/__snapshots__/Button.test.tsx.snap
index 893f0d8..af84567 100644
--- a/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`renders component with all sizes 1`] = `
         data-testid="button"
       >
         <span
-          class="sc-gswNZR gnrOlr"
+          class="sc-gswNZR eXLoRM"
         >
           Button Label
         </span>
@@ -25,7 +25,7 @@ exports[`renders component with all sizes 1`] = `
       data-testid="button"
     >
       <span
-        class="sc-gswNZR gnrOlr"
+        class="sc-gswNZR eXLoRM"
       >
         Button Label
       </span>
@@ -96,7 +96,7 @@ exports[`renders component with all sizes 2`] = `
         data-testid="button"
       >
         <span
-          class="sc-gswNZR gnrOlr"
+          class="sc-gswNZR eXLoRM"
         >
           Button Label
         </span>
@@ -109,7 +109,7 @@ exports[`renders component with all sizes 2`] = `
         data-testid="button"
       >
         <span
-          class="sc-gswNZR gnrOlr"
+          class="sc-gswNZR eXLoRM"
         >
           Button Label
         </span>
@@ -123,7 +123,7 @@ exports[`renders component with all sizes 2`] = `
       data-testid="button"
     >
       <span
-        class="sc-gswNZR gnrOlr"
+        class="sc-gswNZR eXLoRM"
       >
         Button Label
       </span>
@@ -194,7 +194,7 @@ exports[`renders component with all sizes 3`] = `
         data-testid="button"
       >
         <span
-          class="sc-gswNZR gnrOlr"
+          class="sc-gswNZR eXLoRM"
         >
           Button Label
         </span>
@@ -207,7 +207,7 @@ exports[`renders component with all sizes 3`] = `
         data-testid="button"
       >
         <span
-          class="sc-gswNZR gnrOlr"
+          class="sc-gswNZR eXLoRM"
         >
           Button Label
         </span>
@@ -220,7 +220,7 @@ exports[`renders component with all sizes 3`] = `
         data-testid="button"
       >
         <span
-          class="sc-gswNZR gnrOlr"
+          class="sc-gswNZR eXLoRM"
         >
           Button Label
         </span>
@@ -234,7 +234,7 @@ exports[`renders component with all sizes 3`] = `
       data-testid="button"
     >
       <span
-        class="sc-gswNZR gnrOlr"
+        class="sc-gswNZR eXLoRM"
       >
         Button Label
       </span>
@@ -305,7 +305,7 @@ exports[`renders component with two types 1`] = `
         data-testid="button"
       >
         <span
-          class="sc-gswNZR gnrOlr"
+          class="sc-gswNZR eXLoRM"
         >
           Button Label
         </span>
@@ -319,7 +319,7 @@ exports[`renders component with two types 1`] = `
       data-testid="button"
     >
       <span
-        class="sc-gswNZR gnrOlr"
+        class="sc-gswNZR eXLoRM"
       >
         Button Label
       </span>
@@ -390,7 +390,7 @@ exports[`renders component with two types 2`] = `
         data-testid="button"
       >
         <span
-          class="sc-gswNZR gnrOlr"
+          class="sc-gswNZR eXLoRM"
         >
           Button Label
         </span>
@@ -403,7 +403,7 @@ exports[`renders component with two types 2`] = `
         data-testid="button"
       >
         <span
-          class="sc-gswNZR gnrOlr"
+          class="sc-gswNZR eXLoRM"
         >
           Button Label
         </span>
@@ -417,7 +417,7 @@ exports[`renders component with two types 2`] = `
       data-testid="button"
     >
       <span
-        class="sc-gswNZR gnrOlr"
+        class="sc-gswNZR eXLoRM"
       >
         Button Label
       </span>
@@ -488,7 +488,7 @@ exports[`renders snapshot correctly 1`] = `
         data-testid="button"
       >
         <span
-          class="sc-gswNZR gnrOlr"
+          class="sc-gswNZR eXLoRM"
         >
           Button Label
         </span>
@@ -502,7 +502,7 @@ exports[`renders snapshot correctly 1`] = `
       data-testid="button"
     >
       <span
-        class="sc-gswNZR gnrOlr"
+        class="sc-gswNZR eXLoRM"
       >
         Button Label
       </span>
@@ -573,7 +573,7 @@ exports[`renders without crashing 1`] = `
         data-testid="button"
       >
         <span
-          class="sc-gswNZR gnrOlr"
+          class="sc-gswNZR eXLoRM"
         >
           Button Label
         </span>
@@ -587,7 +587,7 @@ exports[`renders without crashing 1`] = `
       data-testid="button"
     >
       <span
-        class="sc-gswNZR gnrOlr"
+        class="sc-gswNZR eXLoRM"
       >
         Button Label
       </span>
diff --git a/src/components/Header/__snapshots__/Header.test.tsx.snap b/src/components/Header/__snapshots__/Header.test.tsx.snap
index 7b16ccc..1fd4349 100644
--- a/src/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -6,13 +6,13 @@ exports[`renders snapshot correctly 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="sc-bcXHqe fueQlU"
+        class="sc-bcXHqe fMdByr"
       />
     </div>
   </body>,
   "container": <div>
     <div
-      class="sc-bcXHqe fueQlU"
+      class="sc-bcXHqe fMdByr"
     />
   </div>,
   "debug": [Function],
@@ -75,13 +75,13 @@ exports[`renders without crashing 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="sc-bcXHqe fueQlU"
+        class="sc-bcXHqe fMdByr"
       />
     </div>
   </body>,
   "container": <div>
     <div
-      class="sc-bcXHqe fueQlU"
+      class="sc-bcXHqe fMdByr"
     />
   </div>,
   "debug": [Function],
diff --git a/src/components/Header/styles.tsx b/src/components/Header/styles.tsx
index 433b57e..bddac23 100644
--- a/src/components/Header/styles.tsx
+++ b/src/components/Header/styles.tsx
@@ -10,11 +10,9 @@ const setColor = ({ backgroundColor }: { backgroundColor?: string }) => {
 
 export const StyledHeader = styled.div<StyledHeaderProps>`
     position: relative;
-    top: 0;
     width: 100%;
     display: flex;
     background: ${setColor};
-    z-index: 999;
     flex-direction: row;
     justify-content: flex-end;
     height: 60px;
diff --git a/src/components/Portefolio/__snapshots__/Portefolio.test.tsx.snap b/src/components/Portefolio/__snapshots__/Portefolio.test.tsx.snap
index ef7ad8c..c0ebb9f 100644
--- a/src/components/Portefolio/__snapshots__/Portefolio.test.tsx.snap
+++ b/src/components/Portefolio/__snapshots__/Portefolio.test.tsx.snap
@@ -2,11 +2,35 @@
 
 exports[`renders snapshot correctly 1`] = `
 <div
-  className="sc-fEXmlR fQntTm"
+  className="sc-bBABsx kkchgb"
 >
-  <div
-    className="sc-bqWxrE lmeLXE"
-  />
+  <div>
+    <div
+      className="sc-hBxehG kesgI"
+    >
+      <div
+        className="sc-ksBlkl jjOdde"
+      />
+    </div>
+    <div
+      className="sc-idXgbr jNHMWW"
+    >
+      <span
+        className="sc-eDWCr kpbSzz"
+      >
+        <div>
+          <span
+            className="sc-csuSiG eGNmmC"
+          >
+            Working with the following technologies:
+          </span>
+          <div
+            className="sc-dIfARi fcSabg"
+          />
+        </div>
+      </span>
+    </div>
+  </div>
 </div>
 `;
 
@@ -16,21 +40,69 @@ exports[`renders without crashing 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="sc-fEXmlR fQntTm"
+        class="sc-bBABsx kkchgb"
       >
-        <div
-          class="sc-bqWxrE lmeLXE"
-        />
+        <div>
+          <div
+            class="sc-hBxehG kesgI"
+          >
+            <div
+              class="sc-ksBlkl jjOdde"
+            />
+          </div>
+          <div
+            class="sc-idXgbr jNHMWW"
+          >
+            <span
+              class="sc-eDWCr kpbSzz"
+            >
+              <div>
+                <span
+                  class="sc-csuSiG eGNmmC"
+                >
+                  Working with the following technologies:
+                </span>
+                <div
+                  class="sc-dIfARi fcSabg"
+                />
+              </div>
+            </span>
+          </div>
+        </div>
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="sc-fEXmlR fQntTm"
+      class="sc-bBABsx kkchgb"
     >
-      <div
-        class="sc-bqWxrE lmeLXE"
-      />
+      <div>
+        <div
+          class="sc-hBxehG kesgI"
+        >
+          <div
+            class="sc-ksBlkl jjOdde"
+          />
+        </div>
+        <div
+          class="sc-idXgbr jNHMWW"
+        >
+          <span
+            class="sc-eDWCr kpbSzz"
+          >
+            <div>
+              <span
+                class="sc-csuSiG eGNmmC"
+              >
+                Working with the following technologies:
+              </span>
+              <div
+                class="sc-dIfARi fcSabg"
+              />
+            </div>
+          </span>
+        </div>
+      </div>
     </div>
   </div>,
   "debug": [Function],
diff --git a/src/components/Portefolio/index.tsx b/src/components/Portefolio/index.tsx
index b923854..3b18be9 100644
--- a/src/components/Portefolio/index.tsx
+++ b/src/components/Portefolio/index.tsx
@@ -3,10 +3,17 @@ import React from 'react';
 import {
     StyledCard,
     StyledCardContainer,
+    StyledFlexContainer,
+    StyledHeaderLabelContainer,
     StyledHeadline,
     StyledImage,
+    StyledImageStack,
+    StyledItemStack,
     StyledLabel,
-    StyledLink,
+    StyledLabelHeader,
+    StyledStackItemLabel,
+    StyledStackList,
+    StyledSubtitle,
     StyledTextContainer,
     StyledWrapper
 } from './styles';
@@ -16,27 +23,38 @@ export const Portefolio: React.FC<PortefolioProps> = ({
     img,
     headline,
     label,
-    link,
-    linkLabel,
+    currentStack,
+    otherStack,
     cards
 }: PortefolioProps) => {
     return (
         <StyledWrapper>
-            {img && <StyledImage src={img} />}
-            {headline && <StyledHeadline>{headline}</StyledHeadline>}
-            <StyledTextContainer>
-                {link && linkLabel
-                    ? label && (
-                          <StyledLabel>
-                              <span>{label}</span>
-                              <div>
-                                  Working at:
-                                  <StyledLink href={link}>{linkLabel}</StyledLink>
-                              </div>
-                          </StyledLabel>
-                      )
-                    : label && <StyledLabel>{label}</StyledLabel>}
-            </StyledTextContainer>
+            <div>
+                <StyledFlexContainer>
+                    {img && <StyledImage src={img} />}
+                    <StyledHeaderLabelContainer>
+                        {headline && <StyledHeadline>{headline}</StyledHeadline>}
+                        {label && <StyledSubtitle>{label}</StyledSubtitle>}
+                    </StyledHeaderLabelContainer>
+                </StyledFlexContainer>
+                <StyledTextContainer>
+                    <StyledLabel>
+                        <div>
+                            <StyledLabelHeader>Working with the following technologies:</StyledLabelHeader>
+                            <StyledStackList>
+                                {currentStack?.map((stack) => (
+                                    <StyledItemStack key={stack.name}>
+                                        <StyledStackItemLabel>{stack.name}</StyledStackItemLabel>
+                                        {stack.logoUrl && (
+                                            <StyledImageStack src={stack.logoUrl} alt={stack.name} />
+                                        )}
+                                    </StyledItemStack>
+                                ))}
+                            </StyledStackList>
+                        </div>
+                    </StyledLabel>
+                </StyledTextContainer>
+            </div>
             {cards && (
                 <StyledCardContainer>
                     {cards.map((card, i) => (
diff --git a/src/components/Portefolio/styles.tsx b/src/components/Portefolio/styles.tsx
index 752ae5d..a11bee3 100644
--- a/src/components/Portefolio/styles.tsx
+++ b/src/components/Portefolio/styles.tsx
@@ -6,12 +6,33 @@ export const alignCenter = css`
     text-align: center;
 `;
 
-export const StyledHeadline = styled.span`
+export const StyledHeadline = styled.h1`
     margin: 20px 0 15px 0;
     font-size: 30px;
     color: white;
 `;
 
+export const StyledSubtitle = styled.h2`
+    margin: 20px 0 15px 0;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: initial;
+    color: white;
+    max-width: 600px;
+    text-align: justify;
+
+    @media (max-width: 600px) {
+        text-align: center;
+    }
+`;
+
+export const StyledLabelHeader = styled.span`
+    display: flex;
+    flex-direction: column;
+    color: white;
+    padding-bottom: 1rem;
+`;
+
 export const StyledLabel = styled.span`
     display: flex;
     flex-direction: column;
@@ -19,6 +40,39 @@ export const StyledLabel = styled.span`
     color: white;
 `;
 
+export const StyledStackItemLabel = styled.span`
+    font-weight: 500;
+    font-size: 1.2rem;
+    position: relative;
+    z-index: 1;
+    user-select: none;
+`;
+
+export const StyledHeaderLabelContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+`;
+
+export const StyledFlexContainer = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 50px;
+
+    @media (max-width: 600px) {
+        flex-direction: column;
+        padding: 20px;
+    }
+`;
+
+export const StyledImageStack = styled.img`
+    height: 50px;
+    top: 3px;
+    right: 3px;
+    position: absolute;
+    object-fit: contain;
+`;
+
 export const StyledImage = styled.img`
     max-height: 178px;
     max-width: 178px;
@@ -26,7 +80,7 @@ export const StyledImage = styled.img`
     width: 50%;
     height: 70%;
     border-radius: 50%;
-    margin: auto;
+    margin: 0;
     border: 2px solid white;
 `;
 
@@ -51,11 +105,37 @@ export const StyledLink = styled.a`
 `;
 
 export const StyledTextContainer = styled.div`
-    margin-bottom: 50px;
     font-size: 1.5rem;
+    padding: 20px 0;
+`;
+
+export const StyledStackList = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    overflow-y: auto;
+`;
+
+export const StyledItemStack = styled.div`
+    display: flex;
+    position: relative;
+    background-color: #3332321f;
+    border-bottom: 1px solid #ccc;
+    transition: background-color 0.3s ease;
+    margin-bottom: 10px;
+    flex-basis: calc(33% - 10px);
+    margin-bottom: 10px;
     padding: 20px;
-    * {
-        margin-bottom: 20px;
+    font-size: 1rem;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    @media screen and (max-width: 767px) {
+        flex-basis: calc(100% - 20px);
+    }
+
+    :hover {
+        background-color: #e3e3e336;
     }
 `;
 
@@ -89,8 +169,11 @@ export const StyledSocialSection = styled.div`
 export const StyledWrapper = styled.div`
     display: flex;
     flex-direction: column;
+    height: 100%;
     padding: 50px;
     color: white;
+    justify-content: space-between;
+    overflow-y: auto;
 
     ${StyledHeadline},
     ${StyledLabel},
diff --git a/src/components/Portefolio/types.ts b/src/components/Portefolio/types.ts
index 9fd23c7..71ad62b 100644
--- a/src/components/Portefolio/types.ts
+++ b/src/components/Portefolio/types.ts
@@ -1,13 +1,3 @@
-export interface PubLinksData {
-    link?: string;
-    linkLabel?: string;
-}
-
-export interface PubLinks {
-    label?: string;
-    data?: PubLinksData[];
-}
-
 export interface CardType {
     title?: string;
     subtitle?: string;
@@ -18,11 +8,16 @@ export interface CardType {
     };
 }
 
+export interface StackType {
+    name: string;
+    logoUrl: string;
+}
+
 export interface PortefolioProps {
     img?: string;
     headline?: string;
     label?: string;
-    link?: string;
-    linkLabel?: string;
+    currentStack?: StackType[];
+    otherStack?: StackType[];
     cards?: CardType[];
 }
diff --git a/src/data/index.json b/src/data/index.json
index 860d06e..6223cea 100644
--- a/src/data/index.json
+++ b/src/data/index.json
@@ -1,10 +1,106 @@
 {
     "profile": {
-        "label": "Hi! I use React & Typescript to build a lot of cool things.",
+        "label": "Hey there! 👋 I'm passionate about crafting seamless user experiences using the power of HTML, CSS, and JavaScript/Typescript. With a knack for creative problem-solving, I specialize in Frontend development. My toolkit includes popular frameworks like React and technologies like TypeScript.",
         "headline": "Frontend Web Developer",
         "img": "/images/me.jpg",
-        "link": "https://boost-it.pt/pt/",
-        "linkLabel": "Boost-IT",
+        "currentTechStack": [
+            {
+                "name": "Typescript",
+                "logoUrl": "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/typescript-colored.svg"
+            },
+            {
+                "name": "Javascript",
+                "logoUrl": "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/javascript-colored.svg"
+            },
+            {
+                "name": "React",
+                "logoUrl": "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/react-colored.svg"
+            },
+            {
+                "name": "Nextjs",
+                "logoUrl": "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/nextjs-colored.svg"
+            },
+            {
+                "name": "React Query",
+                "logoUrl": ""
+            },
+            {
+                "name": "React Hook Form",
+                "logoUrl": ""
+            },
+            {
+                "name": "React Router",
+                "logoUrl": ""
+            },
+            {
+                "name": "Jotai",
+                "logoUrl": ""
+            },
+            {
+                "name": "Module-Federation",
+                "logoUrl": ""
+            },
+            {
+                "name": "MicroFrontends",
+                "logoUrl": ""
+            },
+            {
+                "name": "Component Libraries",
+                "logoUrl": ""
+            },
+            {
+                "name": "Storybook",
+                "logoUrl": ""
+            },
+            {
+                "name": "GraphQL",
+                "logoUrl": "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/graphql-colored.svg"
+            },
+            {
+                "name": "Webpack",
+                "logoUrl": "https://raw.githubusercontent.com/devicons/devicon/d00d0969292a6569d45b06d3f350f463a0107b0d/icons/webpack/webpack-original-wordmark.svg"
+            },
+            {
+                "name": "Docker",
+                "logoUrl": "https://raw.githubusercontent.com/devicons/devicon/master/icons/docker/docker-original-wordmark.svg"
+            },
+            { "name": "Bash", "logoUrl": "https://www.vectorlogo.zone/logos/gnu_bash/gnu_bash-icon.svg" },
+            { "name": "Babel", "logoUrl": "https://www.vectorlogo.zone/logos/babeljs/babeljs-icon.svg" },
+            {
+                "name": "GIT",
+                "logoUrl": "https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg"
+            },
+            {
+                "name": "CI/CD",
+                "logoUrl": ""
+            },
+            {
+                "name": "Jest",
+                "logoUrl": "https://www.vectorlogo.zone/logos/jestjsio/jestjsio-icon.svg"
+            },
+            {
+                "name": "Styled-Components",
+                "logoUrl": ""
+            }
+        ],
+        "otherToolsFrameworks": [
+            {
+                "name": "Angular",
+                "logoUrl": "https://angular.io/assets/images/logos/angular/angular.svg"
+            },
+            {
+                "name": "AngularJS",
+                "logoUrl": "https://raw.githubusercontent.com/devicons/devicon/master/icons/angularjs/angularjs-original-wordmark.svg"
+            },
+            {
+                "name": "Vuejs",
+                "logoUrl": "https://raw.githubusercontent.com/devicons/devicon/master/icons/vuejs/vuejs-original-wordmark.svg"
+            },
+            {
+                "name": "Redux",
+                "logoUrl": "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/graphql-colored.svg"
+            }
+        ],
         "cards": [
             {
                 "title": "LinkedIn",
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index ac9124b..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,82 +0,0 @@
-/* Global CSS Variables */
-
-html {
-    height: 100%;
-    min-height: 100%;
-    position: relative;
-    background-color: #fafafa;
-}
-
-body {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    font-family: monospace;
-    font-size: 1.2rem;
-    color: #333;
-    background-color: #fafafa;
-}
-
-#root {
-    width: 100%;
-    height: 100%;
-
-    /* Global Size Standards */
-    --mobile: 600px;
-    --small: 768px;
-    --medium: 1024px;
-    --large: 1440px;
-}
-
-* {
-    font: 1rem brandon-grotesque, Helvetica, sans-serif;
-}
-
-*,
-*::before,
-*::after {
-    box-sizing: border-box;
-}
-
-table,
-th,
-td {
-    border-collapse: collapse;
-}
-
-th,
-td {
-    border-width: 0;
-}
-
-table {
-    width: 100%;
-}
-
-thead {
-    width: 100%;
-    color: white;
-    background: rgb(27, 27, 27);
-    font-size: 14px;
-}
-
-tr {
-    width: 100%;
-}
-
-td,
-.header__item {
-    flex: 1 1 20%;
-    text-align: center;
-}
-
-.header__item {
-    text-transform: uppercase;
-}
-
-.filter__link {
-    color: white;
-    text-decoration: none;
-    position: relative;
-    display: inline-block;
-}
diff --git a/src/index.tsx b/src/index.tsx
index efa5c4b..c67bd3c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,12 +5,14 @@ import { BrowserRouter } from 'react-router-dom';
 import { App } from './App';
 import { disableReactDevTools } from './disableReactDevTools';
 import * as serviceWorker from './serviceWorker';
+import { GlobalStyle } from './GlobalStyles';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
 root.render(
     <React.StrictMode>
         <BrowserRouter>
+            <GlobalStyle />
             <App />
         </BrowserRouter>
     </React.StrictMode>
diff --git a/src/pages/projects/styles.tsx b/src/pages/projects/styles.tsx
index 3df3769..4160135 100644
--- a/src/pages/projects/styles.tsx
+++ b/src/pages/projects/styles.tsx
@@ -4,11 +4,9 @@ import { Card, Header } from '../../components';
 import { COLOR_PRIMARY_2 } from '../../GlobalStyles';
 
 export const StyledContainer = styled.div`
-    display: block;
     height: 100%;
-    width: 100%;
-    box-sizing: border-box;
-    overflow: hidden;
+    display: flex;
+    flex-direction: column;
 `;
 
 export const StyledContent = styled.div`
@@ -40,7 +38,7 @@ export const StyledOverlay = styled.div`
     gap: 20px;
     -webkit-column-gap: 20px;
     column-gap: 20px;
-    justify-content: center;
+    justify-content: space-evenly;
     align-content: center;
     align-items: center;
     overflow-y: auto;
@@ -63,6 +61,11 @@ export const StyledCard = styled(Card)`
 
 export const StyledHeader = styled(Header)`
     border-bottom: 1px solid ${COLOR_PRIMARY_2};
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    height: 60px;
+    align-items: center;
 
     > * {
         margin: 10px;
diff --git a/src/AppStyles.tsx b/src/styles.tsx
similarity index 100%
rename from src/AppStyles.tsx
rename to src/styles.tsx