diff --git a/src/App.tsx b/src/App.tsx index fe858ed..40c11ed 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -43,17 +43,23 @@ export default function App() { return (
-
+
- -
+
+
- -
+
+ +

Projects

diff --git a/src/assets/angular.svg b/src/assets/angular.svg new file mode 100644 index 0000000..5270e0b --- /dev/null +++ b/src/assets/angular.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/cpp.svg b/src/assets/cpp.svg new file mode 100644 index 0000000..519d9fe --- /dev/null +++ b/src/assets/cpp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/csharp.svg b/src/assets/csharp.svg new file mode 100644 index 0000000..59fb5db --- /dev/null +++ b/src/assets/csharp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/css.svg b/src/assets/css.svg new file mode 100644 index 0000000..98012d8 --- /dev/null +++ b/src/assets/css.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/docker.svg b/src/assets/docker.svg new file mode 100644 index 0000000..f2f3672 --- /dev/null +++ b/src/assets/docker.svg @@ -0,0 +1,7 @@ + + \ No newline at end of file diff --git a/src/assets/express.svg b/src/assets/express.svg new file mode 100644 index 0000000..8e276f1 --- /dev/null +++ b/src/assets/express.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/src/assets/firebase.svg b/src/assets/firebase.svg new file mode 100644 index 0000000..afa5807 --- /dev/null +++ b/src/assets/firebase.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/git.svg b/src/assets/git.svg new file mode 100644 index 0000000..834f553 --- /dev/null +++ b/src/assets/git.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/assets/html.svg b/src/assets/html.svg new file mode 100644 index 0000000..ebf0206 --- /dev/null +++ b/src/assets/html.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/java.svg b/src/assets/java.svg new file mode 100644 index 0000000..2f88a4c --- /dev/null +++ b/src/assets/java.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/javascript.svg b/src/assets/javascript.svg new file mode 100644 index 0000000..3c09daf --- /dev/null +++ b/src/assets/javascript.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/mysql.svg b/src/assets/mysql.svg new file mode 100644 index 0000000..59e00ad --- /dev/null +++ b/src/assets/mysql.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/nextjs-light.svg b/src/assets/nextjs-light.svg new file mode 100644 index 0000000..1a11c6a --- /dev/null +++ b/src/assets/nextjs-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/nodejs.svg b/src/assets/nodejs.svg new file mode 100644 index 0000000..b372fe6 --- /dev/null +++ b/src/assets/nodejs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/postgresql.svg b/src/assets/postgresql.svg new file mode 100644 index 0000000..8fcc16c --- /dev/null +++ b/src/assets/postgresql.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/python.svg b/src/assets/python.svg new file mode 100644 index 0000000..e9b1dc0 --- /dev/null +++ b/src/assets/python.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/sass.svg b/src/assets/sass.svg new file mode 100644 index 0000000..d50a8cd --- /dev/null +++ b/src/assets/sass.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/typeorm.svg b/src/assets/typeorm.svg new file mode 100644 index 0000000..234bb03 --- /dev/null +++ b/src/assets/typeorm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/typescript.svg b/src/assets/typescript.svg new file mode 100644 index 0000000..1ce5524 --- /dev/null +++ b/src/assets/typescript.svg @@ -0,0 +1,8 @@ + + \ No newline at end of file diff --git a/src/assets/unity.svg b/src/assets/unity.svg new file mode 100644 index 0000000..c92f3fb --- /dev/null +++ b/src/assets/unity.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Skills.tsx b/src/components/Skills.tsx index 40278a3..947d755 100644 --- a/src/components/Skills.tsx +++ b/src/components/Skills.tsx @@ -1,5 +1,80 @@ import "@styles/Skills.scss"; +import dockerLogo from "@assets/docker.svg"; +import typeScriptLogo from "@assets/typescript.svg"; +import expressLogo from "@assets/express.svg"; +import gitLogo from "@assets/git.svg"; +import javascriptLogo from "@assets/javascript.svg"; +import typeormLogo from "@assets/typeorm.svg"; +import firebaseLogo from "@assets/firebase.svg"; +import htmlLogo from "@assets/html.svg"; +import reactLogo from "@assets/react.svg"; +import nodejsLogo from "@assets/nodejs.svg"; +import cssLogo from "@assets/css.svg"; +import nextjsLogo from "@assets/nextjs-light.svg"; +import postgresqlLogo from "@assets/postgresql.svg"; +import sassLogo from "@assets/sass.svg"; +import angularjsLogo from "@assets/angular.svg"; +import mysqlLogo from "@assets/mysql.svg"; +import javaLogo from "@assets/java.svg"; +import unityLogo from "@assets/unity.svg"; +import cSharpLogo from "@assets/csharp.svg"; +import cppLogo from "@assets/cpp.svg"; +import pythonLogo from "@assets/python.svg"; + +function Skill({ + logo, + alt, + name, +}: { + logo: string; + alt: string; + name: string; +}) { + return ( +
+ {alt} +

{name}

+
+ ); +} export default function Skills() { - return
Skills
; + return ( +
+
+

Skills

+

Technologies & Tools

+
+
+ + + + + + + + + + + + + + + + + + + +
+ +
+
+ +
+
+ +
+
+
+ ); } diff --git a/src/styles/About.scss b/src/styles/About.scss index fc9634d..c7021e1 100644 --- a/src/styles/About.scss +++ b/src/styles/About.scss @@ -1,6 +1,6 @@ .about { height: 100vh; - padding: 5rem 10rem; + padding: 0rem 10rem; .greeting { color: var(--color-accent); } diff --git a/src/styles/App.scss b/src/styles/App.scss index 1c5c49a..e114abd 100644 --- a/src/styles/App.scss +++ b/src/styles/App.scss @@ -3,4 +3,9 @@ flex-direction: column; background-color: var(--color-background-body); min-height: auto; + + .section { + min-height: 100vh; + padding: 80px 0; + } } diff --git a/src/styles/Skills.scss b/src/styles/Skills.scss index 9e754d3..5e78efa 100644 --- a/src/styles/Skills.scss +++ b/src/styles/Skills.scss @@ -1,2 +1,65 @@ .skills { + display: flex; + flex-direction: column; + align-items: center; + gap: 30px; + + .title { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 20px 100px; + + .skill { + display: flex; + flex-direction: row; + align-items: center; + background-color: var(--color-background-foreground); + border-radius: 5px; + padding: 5px; + font-weight: 600; + border: 2px solid transparent; + transition: all 50ms ease-in-out; + gap: 10px; + // cursor: pointer; + + // &:hover { + // border-color: var(--color-accent-background); + // } + + img { + width: 32px; + height: 32px; + } + } + + @media (max-width: 768px) { + .skill { + img { + width: 24px; + height: 24px; + } + } + grid-gap: 10px; + } + + @media (max-width: 480px) { + .skill { + justify-content: center; + flex-direction: column; + gap: 5px; + + img { + width: 50px; + height: 50px; + } + } + } + } } diff --git a/src/styles/index.scss b/src/styles/index.scss index aa05abd..4d6dc39 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -66,10 +66,11 @@ h3 { @media screen and (max-width: 900px) { font-size: 1.5rem; } +} - @media screen and (max-width: 480px) { - font-size: 1rem; - } +h4 { + font-size: 1rem; + font-weight: 700; } body, diff --git a/src/styles/variables_colors.scss b/src/styles/variables_colors.scss index 192ca13..7dad240 100644 --- a/src/styles/variables_colors.scss +++ b/src/styles/variables_colors.scss @@ -2,6 +2,7 @@ /* Colors: General */ --color-background-body: #000000; + --color-background-foreground: #0e0e0e; --color-background-header: transparent; --color-background-sidebar: #1a1a1a;