Portfolio

Pros of v4

• More sophisticated design with smooth animations and transitions
• Better code organization and modular structure
• Extensive documentation and setup instructions

Cons of v4

• Higher complexity, potentially harder to customize for beginners
• Requires more dependencies and build tools
• Less focus on showcasing projects compared to Portfolio

Code Comparison

v4:

const StyledHeader = styled.header`
  ${({ theme }) => theme.mixins.flexBetween};
  position: fixed;
  top: 0;
  z-index: 11;
  padding: 0px 50px;
  width: 100%;
  height: var(--nav-height);
  background-color: var(--navy);
  filter: none !important;
  pointer-events: auto !important;
  user-select: auto !important;
  backdrop-filter: blur(10px);
  transition: var(--transition);
`;

Portfolio:

const Navbar = ({ theme, changeTheme }) => {
  const [expand, updateExpanded] = useState(false);
  const [navColour, updateNavbar] = useState(false);

  function scrollHandler() {
    if (window.scrollY >= 20) {
      updateNavbar(true);
    } else {
      updateNavbar(false);
    }
  }

The v4 project uses styled-components for more advanced styling, while Portfolio uses traditional CSS classes and state management for navbar behavior.

Pros of simplefolio

• More lightweight and easier to customize
• Includes a dark mode feature
• Better documentation and setup instructions

Cons of simplefolio

• Less visually appealing design
• Fewer built-in sections and features
• Limited animation and interactivity

Code Comparison

simplefolio:

export const heroData = {
  title: '',
  name: '',
  subtitle: '',
  cta: '',
};

Portfolio:

export const greeting = {
  username: "Soumyajit Behera",
  title: "Hi all, I'm Soumyajit",
  subTitle: emoji("🚀 A passionate Full Stack Software Developer 🚀"),
  resumeLink: "https://drive.google.com/file/d/1ofFdKF_mqscH8WvXkSObnVvC9kK7Ldlu/view?usp=sharing"
};

The code comparison shows that Portfolio uses a more detailed and structured approach to defining user information, including emojis and additional fields like a resume link. simplefolio, on the other hand, keeps it simpler with basic title and name fields.

Pros of react-vertical-timeline

• Focused on a specific component (vertical timeline), making it easier to integrate into existing projects
• Provides a customizable and reusable timeline component with various styling options
• Lightweight and has fewer dependencies compared to Portfolio

Cons of react-vertical-timeline

• Limited to timeline functionality, while Portfolio offers a complete personal website solution
• Less actively maintained, with fewer recent updates compared to Portfolio
• Lacks additional features like project showcases or blog integration found in Portfolio

Code Comparison

react-vertical-timeline:

import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';

<VerticalTimeline>
  <VerticalTimelineElement
    className="vertical-timeline-element--work"
    date="2011 - present"
    iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
  >
    <h3 className="vertical-timeline-element-title">Creative Director</h3>
  </VerticalTimelineElement>
</VerticalTimeline>

Portfolio:

<Row style={{ justifyContent: "center", padding: "10px" }}>
  {projects.map((project, index) => (
    <Col md={4} className="project-card" key={index}>
      <ProjectCard
        imgPath={project.image}
        isBlog={false}
        title={project.name}
        description={project.description}
        ghLink={project.github}
        demoLink={project.demo}
      />
    </Col>
  ))}
</Row>