50 - Personal Portfolio

Description

Build a single-page website to showcase your skills, experience, and projects in a visually appealing and informative way.

• Present your name, profession, and a brief introduction.

• Highlight your key skills and expertise through icons, text, or interactive elements.

• Showcase your past projects with descriptions, links, and potentially visual media like screenshots or demos.

• Include contact information or links to other online profiles.

• Make the website responsive and adapt to different screen sizes.

Algorithm

1. Create React components for different sections of the portfolio (intro, skills, projects, contact).

2. Utilize React state to manage data for each section (e.g., skill list, project details).

3. Implement conditional rendering to show or hide certain elements based on state.

4. Use CSS styles and potentially libraries like React Bootstrap or Material UI for responsive design and visual appeal.

Code

import React, { useState } from 'react';
import Intro from './Intro';
import Skills from './Skills';
import Projects from './Projects';
import Contact from './Contact';

const App = () => {
  const [skills, setSkills] = useState([
    { name: 'React', icon: 'react-icon.svg' },
    { name: 'JavaScript', icon: 'javascript-icon.svg' },
    { name: 'CSS', icon: 'css-icon.svg' },
  ]);
  const [projects, setProjects] = useState([
    { title: 'Project 1', description: '...', link: 'https://...' },
    { title: 'Project 2', description: '...', link: 'https://...' },
  ]);

  return (
    <div className="App">
      <Intro name="Your Name" profession="Your Profession" />
      <Skills skills={skills} />
      <Projects projects={projects} />
      <Contact email="[e-mail]" />
    </div>
  );
};

export default App;

const Intro = ({ name, profession }) => (
  <div className="intro">
    <h1>{name}</h1>
    <h2>{profession}</h2>
    <p>Your brief introduction goes here...</p>
  </div>
);

export default Intro;

const Skills = ({ skills }) => (
  <div className="skills">
    <h2>Skills & Expertise</h2>
    <ul>
      {skills.map((skill) => (
        <li key={skill.name}>
          <img src={skill.icon} alt={skill.name} />
          <p>{skill.name}</p>
        </li>
      ))}
    </ul>
  </div>
);

export default Skills;

const Projects = ({ projects }) => (
  <div className="projects">
    <h2>Projects</h2>
    <ul>
      {projects.map((project) => (
        <li key={project.title}>
          <h3>{project.title}</h3>
          <p>{project.description}</p>
          <a href={project.link}>View Project</a>
        </li>
      ))}
    </ul>
  </div>
);

export default Projects;

const Contact = ({ email }) => (
  <div className="contact">
    <h2>Get in touch</h2>
    <p>Email: {email}</p>
    {/* Add other contact information or links here */}
  </div>
);

export default Contact;

Explanation

• App.js manages the overall state of the portfolio, including skills and projects data.

• Each component handles its own display logic and props.

• State is used to dynamically update the content based on data.

• CSS is needed for styling and responsiveness.

Additional Notes

• This is a basic example, and you can customize it extensively.

• Consider adding visual elements like screenshots, animations, or video demos.

• Include social media links or other online profiles.

• Make the portfolio accessible for all users.

• Use libraries like React Router for additional navigation features.