My Portfolio

My personal portfolio website! Click below to find out more.

View App

Get Started

$ git clone git@github.com:albertchitta/personal-bio.git
$ cd personal-bio

About the User

• Users can visit this website to learn about me, a web developer. If you're interested in hiring me or want to see how I built some of my projects step-by-step, this will be a great place to find your answers.

Features

• Authentication (Admin) - Admins can login and logout of the application using Google.
• CRUD (Admin) - Admins can create, read, update, and delete projects and technologies in private routes.
• React and Reactstrap for Modals
• Styled Components
• Responsive and mobile-friendly

Video Walkthrough of My Portfolio

https://www.loom.com/share/957e2bb77c4644abbbf3f6252105a4cc

Relevant Links

• Check out the deployed site
• Wireframes
• ERD
• Project Board

Code Snippet

Modal is used to show the details of a project including a loom video, a link to GitHub, and a link to the deployed website.

      <Modal
        show={show}
        size="lg"
        onHide={() => setShow(false)}
        aria-labelledby="example-modal-sizes-title-lg"
      >
        <Modal.Header closeButton>
          <Modal.Title style={{ color: '#2f4550' }}>{project.name}</Modal.Title>
        </Modal.Header>
        <Modal.Body style={{ color: '#586f7c' }}>
          <StyledVideo>
            <iframe
              src={project.loomUrl}
              frameBorder="0"
              allow="autoplay; encrypted-media"
              allowFullScreen
              title="video"
            />
            <p>{project.description}</p>
          </StyledVideo>
        </Modal.Body>
        <Modal.Footer as="div" bsPrefix="modal-footer">
          <StyledLinks>
            <a
              aria-label="github"
              href={project.githubUrl}
              target="_blank"
              rel="noreferrer"
              className="btn btn-primary github"
              onClick={handleClose}
            >
              <i className="fab fa-github" />
              <span> GitHub</span>
            </a>
            <a
              aria-label="website"
              href={project.websiteUrl}
              target="_blank"
              rel="noreferrer"
              className="btn btn-primary website"
              onClick={handleClose}
            >
              <i className="fas fa-external-link-alt" />
              <span> Website</span>
            </a>
          </StyledLinks>
        </Modal.Footer>
      </Modal>

Project Screenshots

Contributors

• Albert Chittaphong