Skip to content

Latest commit

 

History

History
275 lines (220 loc) · 12.7 KB

README.md

File metadata and controls

275 lines (220 loc) · 12.7 KB
Raw

Developer Portfolio Website

Overview

  1. Description
  2. Deployment Link
  3. Installation
  4. Technologies Used
  5. Deliverables
  6. Planning/Build Process
  7. Challenges
  8. Wins
  9. Key Learnings & Takeaways
  10. Future Improvements

1. Description

I started the development of this portfolio project after completion of the General Assemlby Software Engineering Immersive Course in order to showcase the projects I had built and the skills I had gained during the course.

2. Deployment link

🔗   https://katieloesch.co.uk/

3. Installation

Package Manager: npm (v9.5.0)

Getting Started

  • Ensure Git is installed on your machine.
  • Clone the repository by running this command in your terminal:
git clone https://github.com/katieloesch/portfolio.git
  • Navigate to the project directory to install dependencies:
cd portfolio

Running the Application Locally in a local development environment:

1. Install Dependencies

  • Run the following command in the project’s root directory to install all necessary dependencies:
npm install

2. Start the Development Server

  • After installing the dependencies, start the development server with:
npm start

3. Access the Application

  • The development server will start at http://localhost:3000.
  • By default, your web browser should automatically open and navigate to this address.
  • If it doesn’t, you can manually access the application by entering http://localhost:3000 in any web browser.

4. Technologies Used

Core Technologies


npx create-react-app .

Key Dependencies

UI and Design

  • Fonts
  • Icons
    • Iconify
      • A free and open-source framework providing access to a vast number of icons, designed for use across various platforms and environments, including React.
      • website
      • GitHub repository
      • license
    • Font Awesome
      • A popular icon library offering a large set of scalable and customizable icons, with a free version that is open source.
      • website
      • GitHub repository
      • license
    • React Icons
  • Timeline (Experience Section): react-vertical-timeline-component (v3.6.0)

Development Tools

Resources and tutorials

5. Deliverables

MVP

  • make a website that showcases
    • easy-to-find contact information - email, GitHub, Linkedin and other relevant links
      • include a contact form
    • about you section
      • brand statement + background
      • info about industry interests (Meetups, online resources, podcasts, coding online courses etc)
      • What do you do outside of work? What are your interests?
      • Blogs
    • experience + education
    • skills & methodologies
    • transferrable previous experience
    • projects including:
      • project name
      • description
      • timeframe
      • Solo vs Group
      • Links to GitHub ReadMe & deployed project
      • A visual
  • make the website mobile responsive
  • deploy portfolio website online

Stretch Goals

  • animations
  • effects

6. Planning / Build Process

User Stories

  • As a user I should be able to easily find contact information including email, linkedIn and GitHub accounts.
  • As a user I should be able to send a message via contact form.
  • As a user I should be able to easily find relevant experience, education and skills.
  • As a user I should be able to easily find information on previous projects.
  • As a user I should be able to navigate the website from any device.

I started the building process for this project on 13/06/2023. Initial deployment on gh-pages: 26/06/2023. Deployment to custom domain obtained from Hostinger on 29/06/2023.

7. Challenges

  • depending on how much text is provided to the modal showing details on each project, the container overflows but by default you can't scroll down on a modal
  • In order to scroll on overlay text the scroll on the body needs to be disabled first which took me a while to figure out.

8. Wins

  • fully responsive design
  • implementation of animations + effects
  • I'm glad I decided to use React.js for my portfolio as I definitely learned a lot doing this project and feel more confident using this framework.

9. Key Learnings & Takeaways

10. Future Improvements

  • include information about my industry interests
  • include blogs + podcasts I'm interested in