projects to have skill list

Author: keshavlingala

src/components/Projects.tsx

@@ -18,6 +18,8 @@ const ProjectCard = styled(Link)`
     text-decoration: none;
     color: inherit;
     overflow: hidden;
+    border-radius: 1em;
+    animation: bubble 0.7s ease-in;
 
     &:after {
         content: '';
@@ -38,10 +40,11 @@ const ProjectCard = styled(Link)`
         &:after {
             content: '';
             transform: scale(1);
-            animation: growCenter 0.5s ease-in-out;
+            animation: infinite growCenter 2s ease-in-out;
         }
 
-        animation: pulse 0.5s ease-in-out;
+        //animation: pulse 0.5s ease-in-out;
+        box-shadow: 2px 2px 5px 0 #ffd285;
     }
 
     &:active {
@@ -86,8 +89,9 @@ const SkillImg = styled.img`
     height: 40px;
 `
 
-const SkillIconListContainer = styled.div`
+export const SkillIconListContainer = styled.ol`
     display: flex;
+    margin-left: 0;
     margin-bottom: 10px;
     flex-direction: row;
     justify-content: flex-start;
@@ -136,22 +140,26 @@ const Projects: React.FC = () => {
                     <ProjectCardContent>
                         <h3>{project.frontmatter.title}</h3>
                         <p>
-                            {isExpanded ? project.frontmatter.description+' ': project.frontmatter.description.substring(0, 300) + "..."}
-                            <Link to={project.frontmatter.slug} onClick={(e) => {
+                            {isExpanded ? project.frontmatter.description + ' ' : project.frontmatter.description.substring(0, 300) + "..."}
+                            <span style={{textDecoration:'underline'}} onClick={(e) => {
                                 e.stopPropagation();
                                 e.preventDefault();
                                 setIsExpanded(!isExpanded);
                             }}>
                                 {isExpanded ? "Read Less" : "Read More"}
-                            </Link>
+                            </span>
                         </p>
 
                         <SkillIconListContainer>
                             {project.frontmatter.techs &&
-                                icons.filter(icon => project.frontmatter.techs.includes(icon.name))
-                                    .map(icon => <ToolTipItem tooltip={icon.name} key={icon.name}>
-                                        <img width="40px" height="40px" src={icon.icon} alt={icon.name}/>
-                                    </ToolTipItem>)
+                                project.frontmatter.techs.map(tech => {
+                                    const icon = icons.find(icon => icon.name === tech);
+                                    return icon ? (
+                                        <ToolTipItem tooltip={icon.name} key={icon.name}>
+                                            <img width="40px" height="40px" src={icon.icon} alt={icon.name}/>
+                                        </ToolTipItem>
+                                    ) : null;
+                                })
                             }
                         </SkillIconListContainer>
                         <CreatedOn>- {date}</CreatedOn>

src/content/posts/aakarshan/index.mdx

@@ -11,9 +11,6 @@ techs: [HTML, CSS, Bootstrap, Angular, Typescript, Firebase, PWA]
 ---
 
 
-# Aakarshan Artboard
-***
-
 ![Aakarshan Logo](feature.jpg)
 
 

src/content/posts/algoanalyser/index.mdx

@@ -10,8 +10,6 @@ techs: [Python, Bash, Git, Jira]
 ---
 
 
-# Python GUI App to Analyze Sorting Algorithms
-
 Simple Python GUI using PyQt5 and Qt-Material to analyze sorting algorithms.
 
 

src/content/posts/angular2-timeline/index.mdx

@@ -10,9 +10,6 @@ demo: https://www.npmjs.com/package/angular2-timeline
 techs: ['Angular', 'CSS', 'HTML', 'Typescript']
 ---
 
-# NPM: angular2-timeline
----
-
 ![ScreenShot of UI ](feature.jpg)
 
 

src/content/posts/bigdata/index.mdx

@@ -9,7 +9,6 @@ code: https://github.com/keshavlingala/SplitwiseRealtimeDataProcessing
 techs: ['Apache Kafka', 'Apache Spark','Spring Boot', Hadoop, 'Apache Cassandra', 'Docker', Kotlin, Bash, Git]
 ---
 
-# Real time Processing of Splitwise Data using Bigdata Technologies
 
 ## Introduction
 

src/content/posts/blockvote/index.mdx

@@ -9,9 +9,6 @@ code: https://github.com/keshavlingala/BlockVote
 techs: [HTML, CSS, Javascript, Typescript, Angular, Firebase]
 ---
 
-
-# BlockVote
-
 Secure and Transparent Elections: Implementing a Blockchain-Based Voting System
 
 ## Introduction

src/content/posts/bump/index.mdx

@@ -10,8 +10,6 @@ code2: https://github.com/keshavlingala/pothole-api
 techs: [Angular, 'Spring Boot', AWS, MySQL, Firebase, PWA, Jira, Bootstrap]
 ---
 
-# Business Unit to Manage Potholes
----
 
 ![Logo](feature.png)
 

src/content/posts/chainreaction/index.mdx

@@ -11,7 +11,6 @@ techs: [HTML, CSS, Javascript, Typescript, Angular, Firebase]
 ---
 
 
-# ChainReaction with Minimax
 
 > Live demo: https://chainreactionai.web.app/
 

src/content/posts/dashboard-ui/index.mdx

@@ -9,10 +9,6 @@ code: https://github.com/keshavlingala/smart-conference-dashboard
 techs: [HTML, CSS, Javascript, Typescript, Angular, Firebase]
 ---
 
-# Smart Conference IOT Room Admin Dashboard
----
-
-
 ## Description
 
 This is a sample admin dashboard for smart conference IOT room. This dashboard is build using Angular 11, Angular Material, Angular Flex Layout

src/content/posts/edithminibot/index.mdx

@@ -10,8 +10,6 @@ demo: https://t.me/edithminibot
 techs: [NodeJS, Keras, Tensorflow, Javascript, Typescript ]
 ---
 
-# Telegram ChatBot Webhook using NodeJS
-
 
 ```toc
 # This code block gets replaced with the TOC

src/content/posts/floydvisualizer/index.mdx

@@ -11,8 +11,6 @@ techs: [Python, HTML, CSS, Javascript, Typescript, Angular, Jira]
 ---
 
 
-# Graph Algorithm Learning: Introducing My Interactive Educational Platform
-
 ```toc
 # This code block gets replaced with the TOC
 ```

src/content/posts/havmor-movies/index.mdx

@@ -10,7 +10,7 @@ demo: http://havmormovies.web.app/
 techs: [HTML, CSS, Javascript, Typescript, Angular, Bootstrap, Firebase]
 ---
 
-# Havmor Movies (No Longer Operational)
+
 
 ![Havmor Movies](feature.png)
 

src/content/posts/mylocaltask/index.mdx

@@ -12,7 +12,6 @@ demo: https://mylocaltask.web.app
 techs: ['HTML','CSS','Angular','Typescript','Firebase','Github Actions']
 ---
 
-# Task Manager Application - Angular 17
 
 ### Key Features:
 

src/content/posts/payment-dbs/index.mdx

@@ -13,8 +13,6 @@ techs: [HTML, CSS, Javascript, Typescript, Angular, 'Spring Boot', MySQL, PWA ]
 ---
 
 
-# Simple Payment Front-end
-
 Simple payment portal front-end integrated with spring-boot
 backend at  [Payment Spring Server](https://github.com/keshavlingala/payment-project)
 

src/content/posts/seeinghome/index.mdx

@@ -10,8 +10,6 @@ demo: http://seeinghome.web.app
 techs: [HTML, CSS, Javascript, Typescript, Angular, Firebase, Bootstrap]
 ---
 
-# Zonal Dashboard
-***
 Simple and fully functional web application made as part of wayfair competition
 
 Won 2nd prize🏆 on Scholar Jet wayfair Seeing Home Competition

src/content/posts/synopsis/index.mdx

@@ -10,7 +10,6 @@ demo: https://github.com/keshavlingala/synopsis-chrome-extension/releases/tag/v1
 techs: [HTML, CSS, Javascript, Python, Keras, Tensorflow, Jira]
 ---
 
-# Synopsis
 
 ![Synopsis](feature.png)
 

src/layouts/layout.css

@@ -770,10 +770,10 @@ p > img {
 
 @keyframes bubble {
     0% {
-        clip-path: polygon(52.91% 111px, 121px 46.01%, 50.33% 70.05%, 70.29% 45.77%)
+        clip-path: circle(0% at 0% 50%);
     }
     100% {
-        clip-path: polygon(37.75% 0px, 2px 99.65%, 100% 100%, 99.69% -0.11%)
+        clip-path: circle(100% at 50% 50%);
     }
 }
 
@@ -793,8 +793,11 @@ p > img {
     from {
         transform: scale(0);
     }
+    50% {
+        transform: scale(1.1);
+    }
     to {
-        transform: scale(1);
+        transform: scale(0);
     }
 }
 

src/templates/PostLayout.tsx

@@ -6,6 +6,9 @@ import {SEO} from "../components/SEO";
 import {Link} from "gatsby";
 import styled from "@emotion/styled";
 import {AdjacentNode, PostLayoutNode} from "../types";
+import {icons} from "../hooks/useIcons";
+import {ToolTipItem} from "../components/ToolTip";
+import {SkillIconListContainer} from "../components/Projects";
 
 const Navigator = styled.div`
     display: flex;
@@ -67,6 +70,17 @@ const PostLayout: React.FC<{
                         </NavigationLink>
                     )}
                 </Navigator>
+                <h1>{node.frontmatter.title}</h1>
+                <h3>Technologies Used</h3>
+                <SkillIconListContainer>
+                    {node.frontmatter.techs &&
+                        icons.filter(icon => node.frontmatter.techs.includes(icon.name))
+                            .map(icon => <ToolTipItem tooltip={icon.name} key={icon.name}>
+                                <img width="40px" height="40px" src={icon.icon} alt={icon.name}/>
+                            </ToolTipItem>)
+                    }
+                </SkillIconListContainer>
+                <hr/>
                 <MDXProvider>
                     {props.children}
                 </MDXProvider>

src/types.d.ts

@@ -63,6 +63,7 @@ interface PostLayoutNode {
         featuredImage: {
             publicURL: string;
         };
+        techs: string[];
     };
     internal: {
         contentFilePath: string;