ugzsourcecode / web-portfolio

Simple app to present my projects and skills

Portfolio App

⭐ Star me on GitHub — it motivates me a lot!

This is a simple portfolio app designed to showcase my projects and skills.

placeholder for screenshot

Project Name	Web portfolio
Project Start Date	01-03-2024
Status	In Progress

Table Of Content

• Why
• Features
  • Must have
  • Nice to have
• Quick Start
  • Running the Mock Web Application
  • More about Running the Web Application
• Participation in the "100 Commits" Challenge
  • Why This Project is Part of the "100 Commits" Challenge
• License
• Links

Why

I'm going to do few small projects, and portfolio is way to present my person, skills and job for investors.

Features

Must have

• Documentation
• About Me Page
  • Link to my CV
  • Short description of myself
  • Skills section
  • Contact section
• Projects page
• Application Top Bar
  • Links to my social media
  • Logo
  • Navigation buttons
• Support for 2 languages
  • Polish
  • English

Nice to have

• Pages for Project Descriptions (one per project)
• Contact Form
  • Captcha Mechanism
• Google Analytics
• Recommendations Page
  • Book Tab
  • Courses Tab
  • Software Tab
  • Hardware Tab
• Backend
  • Send mail from contact form to my mail

Work plan

• Learn how to do UX research
• Research UX
• Learn how to create design for website
• Draw portfolio design
• Ask people what think about my design
• Implement MVP website -> Must have
• Test website usability and performance
• Make necessary adjustments based on feedback
• Publish my portfolio
• Promote portfolio on social media and relevant platforms
• Implement additional features for website
• Implement webserver
• Monitor and maintain the website
• Gather continuous feedback for improvements

Quick start

Cloning repository and install dependencies

placeholder for gif

1. Clone the web-portfolio repository:

git clone [email protected]:UgzSourceCode/web-portfolio.git

2. Navigate to web-portfolio folder:

cd web-portfolio

3. Install global dependencies

npm i

4. Navigate to web-app folder:

cd web-app

5. Install web-app dependencies:

npm i

Running the Mock Web Application

1. Clone the repository like in Cloning repository and install dependencies
2. Navigate to `web-app' folder:
3. Run the developer server with mocks:

npm run dev

More about Running the Web Application

Instructions on setting up the React application can be found in web-app/README.md

Participation in the "100 Commits" Challenge

This repository is participating in the "100commitów" challenge. The challenge involves making at least one commit daily to an open-source project for 100 consecutive days.

The goal of the challenge is to encourage consistent contributions to open-source projects and to foster a habit of regular coding and collaboration within the developer community.

Why This Project is Part of the "100 Commits" Challenge

My motivation for participating in this challenge includes:

• I have wanted to prepare a portfolio page for some time.
• This challenge has a community and Discord server where I can link my portfolio, which will be beneficial for the web app's SEO.
• Some of my friends from the Order Of Devs are also participating with their projects.
• I aim to make progress on it every day, step by step.

Summary of the "100 Commits" Challenge

When I started this project, I thought I could finish some MVP before the end of this challenge. However, I couldn't. I didn't have much time for it, so I spent only 5-15 minutes on this project every day.

Some statistics:

• Few dates:

  • Start project: 01-03-2024
  • Start voting: 12-06-2024
  • Used joker: 15-04-2024

• My contribution diagram after this challenge:

• Quantity of commits/stars in this project (before starting the voting):

  • Commits: 211
  • Stars: 16

• Quantity of pull requests:

  • PR's: 124

• Commits in the biggest pull request:

  • For some time, I started updating the diary every day, but I worked on another branch separate from the main one. So, for this statistic, I want to show the quantity of commits in my longest PR.
  • In this project, I used "squash and merge", so the main branch has fewer commits than all the PRs.
    • Commits in PR: 88
    • My priority was to conduct some UX research on my own, so the PR related to this is quite large.

This project is still ongoing at its own pace.

License

This project is licensed under the Creative Commons Attribution 4.0 International License - see the LICENSE file for details.

Links

• Documentation
• Issues

Picture sources

• Portfolio logo - source

web-portfolio's Issues

[SPIKE] Which method to write styles is better for this project?

Create a base structure for React application

[BUG] In docs/README.md don't exit link to summary of architectural decision

[SPIKE] Prepare quick start descriptions with husky and apps

[SPIKE] Plan web-app files structure

[FIX] Add links to PR in diary

I forgot about two links

[SPIKE] Find potential designs

ToDO:

• Find example designs
• Find example websites
• Find example template
• Create a doc file with links
• Add some screens for designs/websites/templates
• Do some questionnaire about which is better and why
• Add my answers to doc
• Describe answers from questionnaire in the doc resume
• Create summary with what you want

[SPIKE] Do we need Storybook? Are there any alternatives?

[SPIKE] Prepare summary of Architecture Decision

[REFACTOR] Convert all components to arrow function components with named exports during declaration.

Create root README file

Add gif for quick start in README

[docs] Assumptions file should have link to back to docs/README.md like docs/diary.md

The assumptions file should include a link back to docs/README.md, similar to docs/diary.md.

[BUG] Eslint + prettier PoC not exist on PoC list

This PoC not exist on list https://github.com/UgzSourceCode/web-portfolio/blob/main/docs/PoC/002-Eslint-linter.md

ADL document format and links to ADL

1. Format - ADL should have header and link to back to docs/README.md
2. Link to ADL - docs/README.md should have link to ADL document

[DOC] Summary for the 100commits

[DEV] Install storybook in web-app

Create contributing doocument

Create assumptions list for project

Create ADR template

[SPIKE] Are git hooks necessary? If so, how will they be implemented?

[BUG] Link to 001 ADR not works

In docs/ADR/README.md link to 'Which framework will be better for the frontend of the portfolio?' not working
https://github.com/UgzSourceCode/web-portfolio/blob/main/docs/ADR/README.md -> list
Result:

[SPIKE] Decide how the component will be declared and exported

Potential export ways:

• export default
• export const

Potential components declaration:

• anonymous function

const name = () => {}

• classic function

function name() {}

• class

ADR should be result for this task.

[BUG] Several documents lack a back link to the documentation README

• File structure
• Frontend file structure
• Git branching

Describe design in root readme

[SPIKE] Which component library is better for this project?

[DEV] Install Docz in web-app

Prepare (install + configuration) linter and formater

Install and configure i18next for translations

[SPIKE] Decide which framework and language should be used to build the frontend application

ADR should be result for this task

[SPIKE] Create "feature description" template

Add LICENSE

Create github flow description document

[SPIKE] Describe AboutMe page

[EDUCATION] Learn figma

[SPIKE] Which linter and formatter use for frontend app?

Update node packages

Create ADL document

Create diary template + first one

Do file structure refaktor

Describe scripts for web-app

[SPIKE] Which library for translation?

[FEATURE] Implement pre-commit git hook (check lint + format)

[DOC] Create description how to update packages

[DEV] Install and configure Chakra UI?

Describe work plan in root readme

Work plan draft:

• Learn how to do research UX
• Research UX with another portfolio (design, website, template)
• Learn how to prepare design website
• Draw portfolio design
• Ask people what think about it
• Implement website