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)

• _website
• _{GitHub Repository}

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

• ReactJS (v18.2.0)

  • _{primary framework used to build the application}
  • _{created using the create-react-app tool}
  • _{React documentation}
  • _{Create React App documentation}

npx create-react-app .

• SCSS
  • _{CSS preprocessor used for styling the application}
  • _{SCSS documentation}

Key Dependencies

• react-router (v6.12.1)
  • _{a library that provides the foundational routing components and logic for React applications}
  • _{npm page}
  • _{GitHub repository}
  • _website
• react-router-dom (v6.12.1)
  • _{an implementation of react-router that includes additional components for browser-based routing}
  • _{npm page}
  • _{GitHub repository}
  • _website
• @emailjs/browser (v3.11.0)
  • _{package for sending emails directly from the browser using the EmailJS service}
  • _{npm page}
  • _{GitHub repository}
  • _website
• intersection-observer (v0.12.2)
  • _{a polyfill for the Intersection Observer API allowing you to observe when elements enter or exit the viewport or a parent container}
  • _{npm page}
  • _{GitHub repository}
• framer-motion (v3.11.0)
  • _{an open source animation library for React}
  • _{npm page}
  • _{GitHub repository}
  • _website
• react-transition-group (v4.4.5)
  • _{a library for handling animations and transitions in React applications}
  • _{npm page}
  • _{GitHub repository}
  • _website
• Sass (v1.77.8)
  • _{CSS preprocessor used for styling the application}
  • _{npm page}
  • _{GitHub repository}
• react-icons (v4.9.0)
  • _{a free and open-source project providing icons for use in React projects}
  • _{npm page}
  • _{GitHub repository}
  • _website
• react-tsparticles (v2.10.1)
  • _{a React component library that provides a way to integrate customizable particle animations into React applications}
  • _{npm page}
  • _{GitHub repository}
  • _website
• react-vertical-timeline-component (v3.6.0)
  • _{a React component library that provides a pre-built, customizable vertical timeline component/sub>}
  • _{npm page}
  • _{GitHub repository}
  • _website

UI and Design

• Fonts
  • main: 'Nulshock', designed by Typodermic Fonts
    • _{Cufon Fonts}
  • header: 'VT323', designed by Peter Hull
    • _{Google 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
    • _{A free and open-source project providing icons for use in React projects.}
    • _website
    • _{GitHub repository}
    • _license
• Timeline (Experience Section): react-vertical-timeline-component (v3.6.0)
  • _{a React component library that provides a pre-built, customizable vertical timeline component/sub>}
  • _{created by Stéphane Monnot}
  • _{npm page}
  • _{GitHub repository}
  • _website

Development Tools

• Git / GitHub
  • _{used for version control and collaboration}
  • _{Git website}
  • _{GitHub website}
• Visual Studio Code (VSCode)
  • _{code editor used for development}
  • _website
  • _{GitHub repository}
• Google Chrome & Chrome DevTools
  • _{used for testing, debugging, and developing in the browser}
  • _{Google Chrome website}
  • _{Chrome DevTools documentation}
• Excalidraw
  • _{tool used to create wireframes for the application}
  • _website
  • _{GitHub repository}
• ChatGPT4o:
  • _{generative AI tool used for debugging, development support and generating artwork for the README file}
  • _website
  • _{GitHub repository}
• Hostinger:
  • _{web hosting provider used to deploy the application}
  • _{UK website}

Resources and tutorials

• initial portfolio structure & navigation dots:
  • Build and Deploy a Fullstack Responsive Portfolio Website | ULTIMATE Step By Step Tutorial 2023 by JavaScript Mastery
• responsive navigation menu:
  • Animated Portfolio Website with React & Framer Motion | React Project for Beginners by Lama Dev
• timeline (experience section):
  • Simple Timeline for your Portfolio Website | React Tutorial by Aleks Popovic
• card hover effect (work section):
  • How To Create An Image Hover Effect With CSS by Web Dev Simplified
• image carousel (work section):
  • Build a Slider with React.js by The Web School.
• button fill effect:
  • Button Ripple Hover Effects using CSS & Javascript by Online Tutorials | Md Irshad Ansari

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