Updated coloring and sizing

tassyguy · Oct 17, 2023 · 2a38a22 · 2a38a22
1 parent a05191e
commit 2a38a22
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 9 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -19,7 +19,7 @@ export default function RootLayout({
       <head>
         <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
       </head>
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}><div className={'content-container'}>{children}</div></body>
     </html>
   )
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -17,7 +17,7 @@ const Home: React.FC = () => { // Get the section ID from the URL
        <p>Welcome to my website! This site is currently under construction so be cautioned. I would LOVE to have the design finished but Google seems to want to take their time with releasing Material Design 3.</p>
        <p>It&apos;s fine, I&apos;m fine. 🙃</p>
               <p>This site was built using Next.JS, TypeScript, React, SCSS, and deployed using GitHub Actions.</p>
-              <Link href='https://github.com/tassyguy/my-resume-website'>Check out the repo for this website here!</Link>
+              <Link href='https://github.com/tassyguy/my-resume-website' className='repo'>Check out the repo for this website here!</Link>
               <LastCommitTimestamp/>
               <p>Current site roadmap:</p>
               <ul className='features'>
@@ -34,7 +34,7 @@ const Home: React.FC = () => { // Get the section ID from the URL
                 <li>🔲Add accessibility features</li>
                 <li>🔲Proper mobile browser support</li>
                 <li>🔲Allow for custom theme switching</li>
-                <li>🔲Light/dark mode support</li>
+                <li>✅Light/dark mode support</li>
                 <li>🔲Add and password-protect References page</li>
                 <li>🔲Reduce file size of project</li>
               </ul>

diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
@@ -9,7 +9,7 @@ const Portfolio: React.FC = () => {
     <div>
       <Header />
       <h1 className='section-header'>Portfolio</h1>
-      <p>Some portfolio links of mine.</p>
+      <p className='portfolio-subheader'>Some portfolio links of mine.</p>
       <PortfolioGrid/>
     </div>
   );

diff --git a/src/app/work-experience/page.tsx b/src/app/work-experience/page.tsx
@@ -3,12 +3,14 @@ import React, { useEffect, useState } from 'react';
 import Header from '@/components/Header';
 import workExperiences from '../../../data/workExperience.json';
 import '../../../styles/styles.scss';
+import ContentContainer from '@/components/ContentContainer';
 
 const WorkExperience: React.FC = () => {
   return (
     <div>
       <Header />
       <h1 className='section-header'>Work Experience</h1>
+      <p className='work-subheader'>Places I&apos;ve work at or for.</p>
       {workExperiences.map((employer, index) => (
         <div key={index}>
           <h2 className='section-header'>{employer.employerName}</h2>

diff --git a/src/components/ContentContainer.tsx b/src/components/ContentContainer.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const ContentContainer = ( children ) => {
+  return (
+    <div className={'content-container'}>
+        {children}
+    </div>
+  );
+};
+
+export default ContentContainer;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -31,6 +31,11 @@ const Header: React.FC = () => {
           </div>*/}
         </ul>
       </nav>
+      <div className="repo-logo">
+        <Link href="https://github.com/tassyguy/my-resume-website">
+          <Image src="/logos/github-mark.svg" alt="GitHub Logo" width={40} height={40} className="repo-image"/>
+        </Link>
+      </div>
     </header>
 
   );

diff --git a/src/components/Portfolio/Grid/PortfolioGrid.module.scss b/src/components/Portfolio/Grid/PortfolioGrid.module.scss
@@ -1,7 +1,9 @@
 .linksContainer {
-    display: grid;
+    display: flex;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 16px;
+    gap: 48px;
+    align-items: center;
+    justify-content: center;
 }
 
 @media (max-width: 768px) {

diff --git a/src/components/Portfolio/Grid/PortfolioGrid.tsx b/src/components/Portfolio/Grid/PortfolioGrid.tsx
@@ -2,11 +2,11 @@
 import React from 'react';
 import PortfolioLink from '@/components/PortfolioLink';
 import portfolioData from '../../../../data/portfolio.json';
-import './PortfolioGrid.module.scss';
+import styles from './PortfolioGrid.module.scss';
 
 const PortfolioGrid: React.FC = () => {
   return (
-    <div className='linksContainer'>
+    <div className={styles.linksContainer}>
     {portfolioData.map((item, index) => (
         <PortfolioLink
         key={index}

diff --git a/styles/styles.scss b/styles/styles.scss
@@ -18,7 +18,7 @@ body {
     background-color: var(--md-sys-color-background);
 }
 
-p, ul, li, .section-header, .portfolio-header, .school, .about, .job-info, .timestamp {
+p, ul, li, .section-header, .portfolio-header, .school, .about, .job-info, .timestamp, .repo {
     color: var(--md-sys-color-on-background);
 }
 
@@ -85,6 +85,8 @@ p, ul, li, .section-header, .portfolio-header, .school, .about, .job-info, .time
     color: var(--md-sys-color-on-primary);
     /* Text color for navigation items */
     text-decoration: none;
+
+    font-weight: bold;
     /* Remove underlines from links */
 }
 
@@ -115,8 +117,26 @@ img {
     vertical-align: middle;
 }
 
+.portfolio-subheader, .work-subheader {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 .profile {
     display: block;
     margin-left: auto;
     margin-right: auto;
+}
+
+.content-container {
+    max-width: 1440px;
+    display: block;
+        margin-left: auto;
+        margin-right: auto;
+}
+
+.repo-logo {
+    padding-right: 10px;
+    filter: invert(0%) sepia(100%) saturate(7%) hue-rotate(165deg) brightness(97%) contrast(103%);
 }