add articles

src/app/layout.tsx

@@ -3,7 +3,7 @@ import "@/styles/index.scss";
 import Hero from "@/components/Hero";
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "Zonnenberg Portfolio",
   description: "Generated by create next app",
 };
 

src/components/Article.tsx

@@ -1,3 +1,4 @@
+import SingleArticle from './SingleArticle';
 import ArticleList from '@/data/articles.json';
 
 const Articles = () => {
@@ -11,11 +12,11 @@ const Articles = () => {
           <span key={index}>{letter}</span>
         ))}
       </h2>
-      {ArticleList.map((item, index) => (
-        <article key={index}>
-          <h3>{item.title}</h3>
-        </article>
-      ))}
+      <div className="container">
+        {ArticleList.map((item, index) => (
+          <SingleArticle key={index} article={item} />
+        ))}
+      </div>
     </section>
   )
 }

src/components/FindMe.tsx

@@ -39,7 +39,7 @@ const FindMe = () => {
 
           return (
             <div className='link-container'>
-              <Link href="#" alt={item.alt}>
+              <Link href={item.url} target="_blank" alt={item.alt}>
                 {findIcon(item.site)}
               </Link>
             </div>

src/components/PortfolioCard.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faLink } from '@fortawesome/free-solid-svg-icons';
 import { faGithubAlt } from '@fortawesome/free-brands-svg-icons';
@@ -6,30 +7,56 @@ const PortfolioCard = ({
   project: {
     title,
     github,
-    liveLink
+    liveLink,
+    description,
+    madeWith
   }
 }: {
   project: {
     title: string;
     github?: string;
     liveLink?: string;
+    description?: string;
+    madeWith?: string[];
   }
 }) => {
   return (
     <div className='card-container'>
       <div className='card'>
-        <div className='heading'>
-          <h3>
-            {title}
-          </h3>
-          <div className='icons-container'>
-            {liveLink && (
-              <FontAwesomeIcon icon={faLink} />
-            )}
-            {github && (
-              <FontAwesomeIcon icon={faGithubAlt} />
+        <div>
+          <div className='heading'>
+            <h3>
+              {title}
+            </h3>
+            {madeWith && (
+              <div className='made-with-container'>
+                <ul>
+                  {madeWith.map((item, index) => (
+                    <li key={index}>
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
             )}
           </div>
+          {description && (
+            <div className='description-container'>
+              {description}
+            </div>
+          )}
+        </div>
+        <div className='icons-container'>
+          {liveLink && (
+            <Link href={liveLink} target="_blank">
+              <FontAwesomeIcon icon={faLink} />
+            </Link>
+          )}
+          {github && (
+            <Link href={github} target="_blank">
+              <FontAwesomeIcon icon={faGithubAlt} />
+            </Link>
+          )}
         </div>
       </div>
     </div>

src/components/SingleArticle.tsx

@@ -0,0 +1,31 @@
+import Link from "next/link";
+
+const SingleArticle = ({
+  article: {
+    title,
+    description,
+    date,
+    link
+  }
+}: {
+  article: {
+    title: string;
+    description?: string;
+    date: string;
+    link: string;
+  }
+}) => {
+  return (
+    <div className='card-container'>
+      <Link href={link} target="_blank" className='card'>
+        <div className='heading'>
+          <h3>
+            {title}
+          </h3>
+        </div>
+      </Link>
+    </div>
+  )
+}
+
+export default SingleArticle

src/data/articles.json

@@ -1,7 +1,10 @@
 [{
-  "title": "Basic Color Theory for Web Developers"
+  "title": "Basic Color Theory for Web Developers",
+  "link": "https://dev.to/nikacodes/basic-color-theory-for-web-developers-15a0"
 }, {
-  "title": "Good Practices: ReactJS (2023)"
+  "title": "Good Practices: ReactJS (2023)",
+  "link": "https://dev.to/nikacodes/reactjs-good-practices-59b3"
 }, {
-  "title": "From Chocolate Factory to Software Firm"
+  "title": "From Chocolate Factory to Software Firm",
+  "link": "https://technical.ly/software-development/nicole-zonnenberg-software-career/"
 }]

src/data/projects.json

@@ -1,13 +1,19 @@
 [{
   "title": "GenCon Calendar",
   "github": "https://github.com/Sun-Mountain/GenConCal",
-  "liveLink": "https://genconcal.com"
+  "liveLink": "https://genconcal.com",
+  "description": "An schedule organizer for the GenCon gaming convention that hosts over 22,000 events over 4 days.  This app allows users to search for events, add them to their schedule, and view their schedule.",
+  "madeWith": ["NextJS", "TypeScript"]
 },{
   "title": "Shelf Esteem",
   "github": "https://github.com/Sun-Mountain/shelf-esteem/",
-  "liveLink": "https://shelf-esteem.fly.dev"
+  "liveLink": "https://shelf-esteem.fly.dev",
+  "description": "A personal library organizer that allows users to upload books via ISBN, search for books, and view their library.",
+  "madeWith": ["NextJS", "TypeScript", "Prisma", "PostgreSQL"]
 },{
   "title": "Student Rooster",
   "github": "https://github.com/Sun-Mountain/student-rooster",
-  "liveLink": "https://student-rooster.fly.dev/"
+  "liveLink": "https://student-rooster.fly.dev/",
+  "description": "A student tracker application that allows users to add students, assign them to classes, and view their schedule and progress.",
+  "madeWith": ["Ruby on Rails", "fly.io"]
 }]

src/data/socialmedia.json

@@ -1,8 +1,13 @@
 [{
   "site": "BlueSky",
-  "alt": "Blue Sky Account @nikacodes.bsky.social"
+  "alt": "Blue Sky Account @nikacodes.bsky.social",
+  "url": "https://bsky.app/profile/nikacodes.bsky.social"
 }, {
-  "site": "GitHub"
+  "site": "GitHub",
+  "alt": "GitHub Account @Sun-Mountain",
+  "url": "https://github.com/Sun-Mountain"
 }, {
-  "site": "Dev.to"
+  "site": "Dev.to",
+  "alt": "Dev.to Account @nikacodes",
+  "url": "https://dev.to/nikacodes"
 }]

src/styles/components/_cards.scss

@@ -7,8 +7,72 @@
 }
 
 .card {
+  display: flex;
+  justify-content: space-between;
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    min-width: 200px;
+
+    li {
+      border-radius: 1rem;
+      color: $white;
+      padding: 8px 12px 5px 12px;
+
+      margin: 5px;
+
+      &:hover {
+        cursor: default;
+      }
+    }
+
+    @for $i from 1 through length($colors-dark) {
+      li:nth-child(#{$i}) {
+        background-color: nth($colors-dark, $i);
+      }
+    }
+  }
+
   .heading {
+    h3, svg {
+      display: flex;
+      flex-direction: column;
+      margin: auto 0;
+    }
+  }
+
+  .made-with-container {
+    margin: 5px 0 10px 0;
+  }
+
+  .icons-container {
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
+    margin: auto 1rem;
+
+    svg {
+      fill: $outer-space;
+      margin: 0 .5rem;
+      height: 2rem;
+      width: 2rem;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .card {
+    flex-direction: column;
+
+
+    .icons-container {
+      flex-direction: row;
+      justify-content: center;
+
+      svg {
+        margin: 1rem 2rem 0 2rem;
+      }
+    }
   }
 }

src/styles/components/_media-icons.scss

@@ -2,8 +2,8 @@
   display: flex;
 
   svg {
-    height: 2rem;
-    width: 2rem;
+    height: 3rem;
+    width: 3rem;
   }
 
   .link-container {

src/styles/components/_spotlights.scss

@@ -27,13 +27,5 @@
   flex-direction: column;
   margin: 1.5rem 0;
   padding: 1rem;
-}
-
-.icons-container {
-  svg {
-    fill: $outer-space;
-    margin: 0 .5rem;
-    height: 1.5rem;
-    width: 1.5rem;
-  }
+  max-width: 1200px;
 }

src/styles/index.scss

@@ -18,4 +18,26 @@ body {
 
 h1, h2, h3, h4, h5, h6 {
   margin: 0;
+}
+
+header, main {
+  margin: 0 auto;
+  max-width: 1240px;
+}
+
+a, a:visited {
+  color: $neon-blue;
+}
+
+a:hover {
+  color: $carnation-pink;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+
+  li {
+    margin: 0;
+  }
 }

src/styles/utils/colors.scss

@@ -1,13 +1,24 @@
 $carnation-pink: #ff7eb9;
+$carnation-pink-dark: #ff4d8f;
 $wisteria: #a291fb;
+$wisteria-dark: #6a4f9b;
 $blue-jeans: #5f9cfb;
+$blue-jeans-dark: #3a77d5;
 $medium-turquoise: #4cd3c2;
+$medium-turquoise-dark: #2bb8a4;
 $light-green: #8bc34a;
+$light-green-dark: #5a9216;
 $yellow: #fde07e;
+$yellow-dark: #f9c513;
 $fawn: #f6a961;
+$fawn-dark: #f68c2e;
 $tomato: #ff6347;
+$tomato-dark: #ff3d1f;
+
+$neon-blue: #4d8cf6;
 
 $colors: $carnation-pink, $wisteria, $blue-jeans, $medium-turquoise, $light-green, $yellow, $fawn, $tomato;
+$colors-dark: $carnation-pink-dark, $wisteria-dark, $blue-jeans-dark, $medium-turquoise-dark, $light-green-dark, $yellow-dark, $fawn-dark, $tomato-dark;
 
 $eerie-black: rgba(33, 37, 41, 1);
 $onyx: rgba(52, 58, 64, 1);