diff --git a/src/App.tsx b/src/App.tsx index 75c22e4..fe858ed 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,6 +3,8 @@ import "@styles/App.scss"; import Header from "@components/Header"; import About from "@components/About"; import ScrollToTop from "@components/ScrollToTop"; +import Skills from "@components/Skills"; +import SectionLine from "@components/SectionLine"; export default function App() { const aboutRef = useRef(null); @@ -45,13 +47,16 @@ export default function App() { +
-

Skills

+
+

Projects

+

Website under construction 🚧👷

diff --git a/src/components/SectionLine.tsx b/src/components/SectionLine.tsx new file mode 100644 index 0000000..a9aa131 --- /dev/null +++ b/src/components/SectionLine.tsx @@ -0,0 +1,9 @@ +import "@styles/SectionLine.scss"; + +export default function SectionLine() { + return ( +
+
+
+ ); +} diff --git a/src/components/Skills.tsx b/src/components/Skills.tsx index e69de29..40278a3 100644 --- a/src/components/Skills.tsx +++ b/src/components/Skills.tsx @@ -0,0 +1,5 @@ +import "@styles/Skills.scss"; + +export default function Skills() { + return
Skills
; +} diff --git a/src/styles/SectionLine.scss b/src/styles/SectionLine.scss new file mode 100644 index 0000000..16df9ee --- /dev/null +++ b/src/styles/SectionLine.scss @@ -0,0 +1,23 @@ +.sectionLine { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + + hr { + width: 60%; + border: 1px solid var(--color-border); + } + + @media screen and (max-width: 768px) { + hr { + width: 80%; + } + } + + @media screen and (max-width: 480px) { + hr { + width: 90%; + } + } +} diff --git a/src/styles/Skills.scss b/src/styles/Skills.scss new file mode 100644 index 0000000..9e754d3 --- /dev/null +++ b/src/styles/Skills.scss @@ -0,0 +1,2 @@ +.skills { +} diff --git a/src/styles/variables_colors.scss b/src/styles/variables_colors.scss index 418ce0d..192ca13 100644 --- a/src/styles/variables_colors.scss +++ b/src/styles/variables_colors.scss @@ -8,7 +8,7 @@ --color-font: #ffffff; --color-font-muted: #a0a0a0; - --color-border: #1c1c1c; + --color-border: #2b2b2b; --color-danger: #cf000f; --color-success: #009944;