diff --git a/src/App.tsx b/src/App.tsx index 8ed905d..067750f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,16 +8,13 @@ import Navbar from './Components/Navbar'; import './App.scss'; import Footer from './Components/Footer/Footer'; +import OnePager from './Components/Test-Onepager/OnePager'; + const App: React.FC = () => { return (
- - } /> - } /> - } /> - } /> - +
); diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx index 5d7444f..238e5fd 100644 --- a/src/Components/About/About.tsx +++ b/src/Components/About/About.tsx @@ -86,7 +86,7 @@ const About: React.FC = () => { I'm not hard to track down, but you can find me on{' '} diff --git a/src/Components/Projects/Projects.scss b/src/Components/Projects/Projects.scss index 87ee421..46f2512 100644 --- a/src/Components/Projects/Projects.scss +++ b/src/Components/Projects/Projects.scss @@ -14,29 +14,27 @@ a { .ProjectsContainer { padding: 0px 20px; color: $text-color; - display: flex; - flex-direction: column; + display: grid; + grid-template-columns: 1fr; + gap: 20px; align-items: center; justify-content: center; min-height: 100vh; - text-align: center; - @media (max-width: 767px) { - padding: 0px 10px; - } - - @media (min-width: 768px) and (max-width: 1200px) { - padding: 0px 30px; + @media (min-width: 768px) { + grid-template-columns: repeat(2, 1fr); } @media (min-width: 1200px) { padding: 0px 40px; + grid-template-columns: repeat(2, 1fr); } } .ProjectsTitle { font-size: 2.8em; margin-bottom: 40px; + text-align: center; color: $text-color; @media (min-width: 768px) and (max-width: 1200px) { @@ -82,7 +80,7 @@ a { flex-direction: column; align-items: center; margin-bottom: 20px; - width: 90%; + width: 100%; background-size: cover; background-position: center; border-radius: 15px; @@ -101,7 +99,7 @@ a { } @media (max-width: 767px) { - width: 90%; + width: 100%; height: auto; min-height: 200px; } @@ -112,7 +110,7 @@ a { } @media (min-width: 1200px) { - width: 75%; + width: 100%; height: auto; min-height: 500px; } diff --git a/src/Components/Projects/Projects.tsx b/src/Components/Projects/Projects.tsx index fa77cb6..45a95e9 100644 --- a/src/Components/Projects/Projects.tsx +++ b/src/Components/Projects/Projects.tsx @@ -6,13 +6,16 @@ import './Projects.scss'; const Projects: React.FC = () => { return ( -
+

Notable projects

- {projects.map((project, index) => ( - - ))} +
+ + {projects.map((project, index) => ( + + ))} +
); }; diff --git a/src/Components/Test-Onepager/OnePager.tsx b/src/Components/Test-Onepager/OnePager.tsx new file mode 100644 index 0000000..afdef13 --- /dev/null +++ b/src/Components/Test-Onepager/OnePager.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import Hero from '../Home/Hero/Hero'; +import Projects from '../Projects/Projects'; +import Experience from '../Experience/Experience'; +import About from '../About/About'; + +const OnePager: React.FC = () => { + return ( +
+ + + + +
+ ); +}; + +export default OnePager; \ No newline at end of file