♻️ styles, bugfixes

jooncco · Dec 8, 2023 · 041ebaa · 041ebaa
1 parent a6d695f
commit 041ebaa
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 62 deletions.
diff --git a/components/CapabilityCard.jsx b/components/CapabilityCard.jsx
@@ -16,7 +16,7 @@ const CapabilityCard = ({index, title, iconSrc}) => (
       className="w-full green-violet-gradient p-[1px] rounded-[20px] drop-shadow-2xl">
       <div
         options={{max: 45, scale: 1, speed: 450}}
-        className="bg-neutral2 rounded-[20px] py-5 px-12 min-h-[280px] flex flex-col justify-evenly items-center">
+        className="bg-neutral2/90 rounded-[20px] py-5 px-12 min-h-[280px] flex flex-col justify-evenly items-center">
         <Image
           src={iconSrc}
           alt={title}

diff --git a/components/Contact.jsx b/components/Contact.jsx
@@ -9,11 +9,9 @@ import {styles} from '@/app/styles';
 const Contact = () => (
   <>
     <motion.div variants={textVariant()}>
-      <p className={styles.sectionSubText}>Get in touch</p>
+      <p className={styles.sectionSubText}>We&apos;re just a few clicks away</p>
       <h1 className={styles.sectionHeadText}>Contact</h1>
     </motion.div>
-    Looking for a self-motivated & mission oriented engineer ? Man, you're on
-    the right track.
   </>
 );
 

diff --git a/components/Portfolio.jsx b/components/Portfolio.jsx
@@ -28,51 +28,28 @@ const tabs = [
     icon: <GlobeIcon />,
     items: [
       {
-        title: 'jooncco.dev',
+        title: 'jooncco.dev-fe',
         thumbnail: '/img/portfolio/jooncco.dev-fe.png',
         linkUrl: 'https://github.com/jooncco/jooncco.dev-fe',
-        tags: ['blog', 'next.js', 'tailwindcss', 'material-tailwind'],
+        desc: "Jooncco's knowledge base frontend, built with Next.js 14.",
       },
       {
-        title: 'NFT Marketplace',
+        title: 'naemo.io',
         thumbnail: '/img/portfolio/nftmarketplace.png',
         linkUrl: 'https://naemo.io',
-        tags: [
-          'marketplace',
-          'react.js',
-          'mobx',
-          'nft',
-          'blockchain',
-          'ethereum',
-          'solana',
-        ],
+        desc: 'Exchange fancy NFTs with crypto currency such as Ethereum, Solana and more.',
       },
       {
-        title: 'Spring API Server Template',
+        title: 'Spring Boot API Server Template',
         thumbnail: '/img/portfolio/springapiservertemplate.png',
         linkUrl: 'https://github.com/jooncco/spring-api-server-template',
-        tags: [
-          'api-server',
-          'template',
-          'spring-boot',
-          'java',
-          'flyway',
-          'mybatis',
-        ],
+        desc: 'Spring Boot api server example, aiming to show best practices in production-level.',
       },
       {
         title: 'jooncco.com',
         thumbnail: '/img/portfolio/jooncco.com.png',
-        linkUrl: 'https://github.com/jooncco/jooncco.dev-fe',
-        tags: [
-          'deprecated',
-          'blog',
-          'github-pages',
-          'jekyll',
-          'html',
-          'css',
-          'javascript',
-        ],
+        linkUrl: 'https://github.com/jooncco/jooncco.github.io',
+        desc: "(Deprecated) A blog based on github.io and jekyll template 'Minimal Mistakes'.",
       },
     ],
   },
@@ -97,19 +74,19 @@ const tabs = [
         title: 'Bitcoin Price Predictor',
         thumbnail: '/img/portfolio/bitcoinpricepredictor.png',
         linkUrl: 'https://github.com/jooncco/bitcoin-price-predictor',
-        tags: ['ai', 'python', 'lstm-rnn', 'linear-regression'],
+        desc: 'Bitcoin price prediction with market indicators and google trend using regression models & LSTM RNN',
       },
       {
         title: 'Coindrop Game AI Agent',
         thumbnail: '/img/portfolio/coindropgameaiagent.png',
         linkUrl: 'https://github.com/jooncco/coindrop-game-ai-agent',
-        tags: ['ai', 'python', 'reinforcement-learning', 'q-learning'],
+        desc: 'Reflex agent trained with reinforcement learning(Q-learning). This agent plays coin drop game implemented using pygame module.',
       },
       {
         title: '"is a" Relationship Teller',
         thumbnail: '/img/portfolio/isarelationshipteller.png',
         linkUrl: 'https://github.com/jooncco/is-A-relationship-teller',
-        tags: ['ai', 'python', 'nlp', 'fast-text'],
+        desc: 'NLP for Korean words. Returns whether a given (Entity, Concept) pair is in is-a relationship or not.',
       },
     ],
   },
@@ -122,19 +99,19 @@ const tabs = [
         title: 'Kakaotalk Chat Exporter',
         thumbnail: '/img/portfolio/kakaotalkchatexporter.png',
         linkUrl: 'https://github.com/jooncco/kakaotalk-chat-exporter',
-        tags: ['scrapper', 'python', 'open-cv', 'macro', 'automation'],
+        desc: 'Automated text exporter for Kakaotalk messenger.',
       },
       {
         title: 'CP Snippet Java',
         thumbnail: '/img/portfolio/cpsnippetjava.png',
         linkUrl: 'https://github.com/jooncco/cp-snippet-java',
-        tags: ['snippets', 'java', 'competitive-programming', 'vs-code'],
+        desc: 'Json for java code snippets. Extremly useful when competitive programming.',
       },
       {
         title: 'CP Stamper C++',
         thumbnail: '/img/portfolio/cpstampercpp.png',
         linkUrl: 'https://github.com/jooncco/cp-stamper-cpp',
-        tags: ['comment-writer', 'cpp', 'competitive-programming'],
+        desc: 'Simple comment writer. The comment generated contains author and timestamp.',
       },
     ],
   },
@@ -153,7 +130,7 @@ const Portfolio = () => (
           indicatorProps={{
             className: 'rounded-lg bg-primary/25 shadow-inner',
           }}
-          className="bg-neutral bg-gray-300/20 dark:bg-base/10">
+          className="bg-gray-300/20 dark:bg-base/10">
           {tabs.map(({id, label, icon, items}) => (
             <Tab
               key={id}
@@ -180,13 +157,13 @@ const Portfolio = () => (
               key={id}
               value={id}
               className="p-6 flex flex-wrap gap-x-6 gap-y-4">
-              {items.map(({title, thumbnail, linkUrl, tags}, index) => (
+              {items.map(({title, thumbnail, linkUrl, desc}, index) => (
                 <PortfolioCard
                   key={index}
                   title={title}
                   thumbnail={thumbnail}
                   linkUrl={linkUrl}
-                  tags={tags}
+                  desc={desc}
                 />
               ))}
             </TabPanel>

diff --git a/components/PortfolioCard.jsx b/components/PortfolioCard.jsx
@@ -10,8 +10,8 @@ import {
 import Image from 'next/image';
 import Link from 'next/link';
 
-const PortfolioCard = ({title, thumbnail, linkUrl, tags}) => (
-  <Card className="w-full sm:w-[250px] bg-neutral2 justify-between shadow-lg">
+const PortfolioCard = ({title, thumbnail, linkUrl, desc}) => (
+  <Card className="w-full sm:w-[250px] bg-neutral2 justify-between shadow-2xl">
     <div>
       <CardHeader shadow={false} floated={false} className="h-32 sm:h-40">
         <Image
@@ -27,25 +27,24 @@ const PortfolioCard = ({title, thumbnail, linkUrl, tags}) => (
           <Typography className="font-semibold text-text">{title}</Typography>
         </div>
         <div className="flex flex-wrap gap-x-1">
-          {tags.map((tag, index) => (
-            <Typography
-              key={index}
-              variant="small"
-              color="gray"
-              className="font-normal opacity-75">
-              #{tag}
-            </Typography>
-          ))}
+          <Typography
+            variant="small"
+            color="gray"
+            className="font-normal opacity-75">
+            {desc}
+          </Typography>
         </div>
       </CardBody>
     </div>
     <CardFooter className="pt-0">
-      <Button
-        ripple={false}
-        fullWidth={true}
-        className="bg-blue-gray-200/30 text-text shadow-none hover:scale-105 hover:shadow-none focus:scale-105 focus:shadow-none active:scale-100">
-        <Link href={linkUrl}>TAKE A LOOK</Link>
-      </Button>
+      <Link href={linkUrl}>
+        <Button
+          ripple={false}
+          fullWidth={true}
+          className="bg-blue-gray-200/30 text-text shadow-none hover:scale-105 hover:shadow-none">
+          TAKE A LOOK
+        </Button>
+      </Link>
     </CardFooter>
   </Card>
 );

diff --git a/components/Work.jsx b/components/Work.jsx
@@ -104,7 +104,7 @@ const Work = () => (
     <motion.div
       className="mt-8 flex flex-col"
       variants={fadeIn('left', 'tween', 0, 1)}>
-      <Timeline>
+      <Timeline className="p-8 bg-gray-300/20 dark:bg-neutral2 h-[960px] overflow-scroll rounded-lg shadow-inner">
         {experiences.map((experience, index) => (
           <TimelineItem key={index}>
             <TimelineConnector />