Portfolio This Website Calculator Login UrlShrink Twitter Scraping Financial Data

This website

Let's talk about how the website was created. But first let me show you what was used:
- React
- Vite
- NodeJs

I also have this dependencies installed:
- react-dom
- react-router-dom
- styled-components
- react-icons
- slick-carousel
- react-slick
- react-syntax-highlighter

Most of my website it's quite simple using flex or grid or both to arrange the content, you can see at "About Me", "Blog", "Hobbies" pages. Also using the router-dom to make it's navigation wich is quite normal for a react project. So i won't be talking about this here, i'll focus on what's somewhat different.

The Carousel:

Let's begin at "Career" page. There you can see a carousel with my Professional Experience in each card. This was built using:
- slick-carousel
- react-slick
To make it work was a little challenging for I haven't realized that this dependency uses Flex components and i was trying to make it work also using it. And let me say, the beginning was pure chaos, imagine using flex with another thing using it as well, trust me, CHAOS.
However as soon as i removed what i did the dependency worked just fine and i was able to make it work.
At my JSX file I had to use a quite simple code to define what type of carousel i wanted as long as how many cards i was going to show.
So to install it:

npm install slick-carousel react-slick

To make it work at you JSX file you have to create the settings and use it into the return, you can do that directly into the return or you can create a const with it, I created a const.
About the settings I defined what type of carousel it would be, if it's an infinity scroll, how many slides, the speed:

Import:

import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

Const:

const settings = {
  className: "center",
  centerMode: true,
  infinite: true,
  centerPadding: "0rem",
  slidesToShow: 3,
  speed: 500
};

Return:

<Slider {...settings}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</Slider>

It's important to notice that there are many many other types of carousel, you can find it right here at their website.

Code Blocks:

To make the code blocks that you're seeing here i used:
- react-syntax-highlighter
This dependency allow me to build with many options the block code that i want to display including the theme, but the theme you have to decide when you import it. Here we also can build everything into the return or we can also create consts that are going to be used in the return.
First install and import it:

Install:

npm install react-syntax-highlighter

Import:

import SyntaxHighlighter from 'react-syntax-highlighter';
import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';

Here's the example const used above, a const and the return:

const codeString02 = `const settings = {
className: "center",
centerMode: true,
infinite: true,
centerPadding: "0rem",
slidesToShow: 3,
speed: 500};
`;

<SyntaxHighlighter lineProps={{style: {wordBreak: 'break-all', whiteSpace: 'pre-wrap', flexWrap: 'wrap'}}} style={a11yDark}  wrapLines={true} language="jsx">
  {codeString06}
</SyntaxHighlighter>

I hope you've enjoyed the reading!