Skip to content

Commit

Permalink
feat: experiment with WordCloud
Browse files Browse the repository at this point in the history
  • Loading branch information
martapanc committed Mar 11, 2024
1 parent 33c1da3 commit d990a3c
Show file tree
Hide file tree
Showing 8 changed files with 504 additions and 66 deletions.
Binary file modified .yarn/install-state.gz
Binary file not shown.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
"react-syntax-highlighter": "^15.5.0",
"react-tippy": "^1.4.0",
"react-toastify": "^10.0.4",
"react-wordcloud": "^1.2.7",
"rehype-raw": "^7.0.0",
"remark-gfm": "^4.0.0",
"styled-components": "^6.1.8",
Expand Down
53 changes: 28 additions & 25 deletions src/components/organisms/home/Intro.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,35 @@
import clsx from 'clsx';
import { Inder } from 'next/font/google';
import React from 'react';
import { FaLaptopCode, FaLightbulb } from 'react-icons/fa';
import { MdHomeWork } from 'react-icons/md';

const inder = Inder({ weight: '400', subsets: ['latin'] });
import styles from './home.module.css';

const Intro = () => {
import clsxm from '@/lib/clsxm';
import { shuffleArray } from '@/lib/helper';

import TagCloud from '@/components/organisms/home/TagCloud';

import Terminal from './Terminal';

import { CodeSnippet } from '@/types/CodeSnippet';

export interface IntroProps {
codeSnippets: CodeSnippet[];
greeting: string;
}

const Intro = ({ greeting, codeSnippets }: IntroProps) => {
return (
<div className='flex h-[500px] md:h-[300px] w-full justify-center mt-6 lg:h-[288px] lg:w-1/2 lg:justify-end lg:mt-0 me-10 rounded-md'>
<div
className={clsx(
'flex flex-col items-end gap-2 text-xl w-[265px] justify-center',
inder.className,
)}
>
<div className='bg-[#97C1FF] dark:bg-[#004AB7] p-3 rounded-sm flex w-full justify-between drop-shadow-md'>
<FaLaptopCode className='w-8 mt-1 me-3' />
Full-Stack Engineer
</div>
<div className='bg-[#6DA7FF] dark:bg-[#003687] p-3 rounded-sm flex w-11/12 justify-between tracking-wide drop-shadow-md'>
<FaLightbulb className='w-8 mt-1 me-3' />
Lifelong Learner
</div>
<div className='bg-[#4791FF] dark:bg-[#00204F] p-3 rounded-sm flex w-10/12 justify-between text-[19px] drop-shadow-md'>
<MdHomeWork className='w-7 mt-1 me-3' />
WFH enthusiast
</div>
<div className='mb-6 flex h-fit flex-col pb-6'>
<h1 className='pb-4 text-5xl antialiased'>
<span className={clsxm(styles.greeting, 'drop-shadow-lg')}>
{greeting}
</span>{' '}
<span className='inline-block animate-waving-hand'>👋</span>
</h1>

<div className='mt-8 flex flex-col lg:flex-row'>
<TagCloud />

<Terminal codeSnippets={shuffleArray(codeSnippets)} />
</div>
</div>
);
Expand Down
38 changes: 0 additions & 38 deletions src/components/organisms/home/Intro2.tsx

This file was deleted.

50 changes: 50 additions & 0 deletions src/components/organisms/home/TagCloud.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
'use client';

// import {Inder} from 'next/font/google';
import React from 'react';
import ReactWordcloud from 'react-wordcloud';

import 'tippy.js/dist/tippy.css';
import 'tippy.js/animations/scale.css';

import tags from '@/data/tags.json';

// const inder = Inder({weight: '400', subsets: ['latin']});

interface Options {
colors?: string[];
rotations?: number;
rotationAngles?: [number, number];
deterministic?: boolean;
fontFamily?: string;
fontSizes?: [number, number];
padding?: number;
randomSeed?: string;
enableTooltip?: boolean;
}

const TagCloud = () => {
const callbacks = {
// getWordColor: (tag: Tag) => tag.value > 10 ? "blue" : "lightblue",
// onWordClick: console.log,
// onWordMouseOver: console.log,
// getWordTooltip: (tag: Tag) => `${tag.text} (${tag.value}) [${tag.value > 50 ? "good" : "bad"}]`,
};
const options: Options = {
colors: ['#0d40a4', '#1A86D2', '#61c1f8', '#FFCE47'],
rotations: 1,
rotationAngles: [0, 0],
fontFamily: 'verdana',
fontSizes: [10, 42],
deterministic: true,
enableTooltip: false,
};

return (
<div className='flex flex-col h-[500px] md:h-[300px] w-full justify-center mt-6 lg:h-[288px] lg:w-1/2 lg:justify-between items-end lg:mt-0 me-10 rounded-md bg-gray-50 p-1'>
<ReactWordcloud callbacks={callbacks} options={options} words={tags} />
</div>
);
};

export default TagCloud;
4 changes: 2 additions & 2 deletions src/components/pages/home-page.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';

import Intro2 from '@/components/organisms/home/Intro2';
import Intro from '@/components/organisms/home/Intro';
import Summary from '@/components/organisms/home/Summary';

import { CodeSnippet } from '@/types/CodeSnippet';
Expand All @@ -14,7 +14,7 @@ export default function HomePage({ homePage, codeSnippets }: HomePageProps) {
return (
<section className='dark:bg-dark bg-white'>
<div className='layout relative flex flex-col py-16 md:py-24'>
<Intro2 greeting={homePage.greeting} codeSnippets={codeSnippets} />
<Intro greeting={homePage.greeting} codeSnippets={codeSnippets} />

<Summary homePage={homePage} />
</div>
Expand Down
222 changes: 222 additions & 0 deletions src/data/tags.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,222 @@
[
{
"value": 20,
"text": "software engineer"
},
{
"value": 20,
"text": "full-stack developer"
},
{
"value": 17,
"text": "frontend"
},
{
"value": 19,
"text": "backend"
},
{
"value": 18,
"text": "Java"
},
{
"value": 18,
"text": "Kotlin"
},
{
"value": 16,
"text": "Typescript"
},
{
"value": 17,
"text": "Javascript"
},
{
"value": 16,
"text": "next.js"
},
{
"value": 15,
"text": "Spring Boot"
},
{
"value": 14,
"text": "CSS"
},
{
"value": 15,
"text": "HTML"
},
{
"value": 18,
"text": "lifelong learner"
},
{
"value": 17,
"text": "WFH enthusiast"
},
{
"value": 13,
"text": "remote work"
},
{
"value": 16,
"text": "Appetize"
},
{
"value": 14,
"text": "Resourcify"
},
{
"value": 16,
"text": "Booking.com"
},
{
"value": 13,
"text": "BJSS"
},
{
"value": 13,
"text": "UniBZ"
},
{
"value": 15,
"text": "University of Manchester"
},
{
"value": 15,
"text": "College of Charleston"
},
{
"value": 12,
"text": "Tongji University"
},
{
"value": 5,
"text": "multilingual"
},
{
"value": 11,
"text": "python"
},
{
"value": 11,
"text": "C#"
},
{
"value": 12,
"text": "computer science"
},
{
"value": 10,
"text": "writing"
},
{
"value": 10,
"text": "reading"
},
{
"value": 10,
"text": "bookworm"
},
{
"value": 9,
"text": "\uD83D\uDCDA"
},
{
"value": 9,
"text": "oboe"
},
{
"value": 9,
"text": "\uD83C\uDFB6"
},
{
"value": 10,
"text": "travel"
},
{
"value": 8,
"text": "photos"
},
{
"value": 8,
"text": "food"
},
{
"value": 8,
"text": "recipes"
},
{
"value": 7,
"text": "podcasts"
},
{
"value": 8,
"text": "video games"
},
{
"value": 6,
"text": "\uD83D\uDC08"
},
{
"value": 6,
"text": "\uD83D\uDC22"
},
{
"value": 6,
"text": "\uD83E\uDD94"
},
{
"value": 8,
"text": "classical music"
},
{
"value": 16,
"text": "React"
},
{
"value": 15,
"text": "Angular"
},
{
"value": 10,
"text": "Vue"
},
{
"value": 16,
"text": "APIs"
},
{
"value": 12,
"text": "UI"
},
{
"value": 13,
"text": "tailwind"
},
{
"value": 13,
"text": "android"
},
{
"value": 11,
"text": "iOS"
},
{
"value": 7,
"text": "PHP"
},
{
"value": 8,
"text": "Docker"
},
{
"value": 8,
"text": "SQL"
},
{
"value": 7,
"text": "GraphQL"
}
]
Loading

0 comments on commit d990a3c

Please sign in to comment.