Merge pull request #300 from manuelc2209/feat/project-revamp

UI Update
manuelc2209 · Oct 11, 2023 · 218ebcf · 218ebcf
2 parents 9ee0752 + 89c748a
commit 218ebcf
Show file tree

Hide file tree

Showing 29 changed files with 1,255 additions and 444 deletions.
diff --git 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
@@ -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
@@ -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;
+}
+
+`;