Resume - Readme

My personal portfolio website written in Angular

Table of Contents

• Overview ✨
  • About
  • Features
  • Technologies
  • Setup
  • Acknowledgements
• Details 📜
  • User interface
  • Projects data

Overview ✨

About

My personal portfolio website, built with Angular, includes detailed and well-organized information about me and my projects. Its responsive layout and animations make the presentation visually appealing.

Check out the live version.

Technologies

Languages:

• JavaScript
• TypeScript
• CSS
• HTML

Libraries and frameworks:

• Angular 19.0.0
• Tailwind CSS 3.4.17
• FontAwesome 6.7.2
• GoogleFonts

Programs:

• VSCode
• PowerToys
• ShareX
• GIMP

Features

• Router and scroll animations
• Responsive layout for all devices
• Clear and detailed presentation
• Properly linked websites and GitHub projects
• Well-described GitHub projects
• Downloadable PDF resume
• Skills section
• Selected projects section
• Education and experience sections
• Organized project data structure
• Project filtering and pagination
• Overview of all projects with images
• Technologies used in projects
• Live version and source code links for projects
• Contact form
• Social media and portfolio links

Note

Room for improvements:

• More projects
• Certificates
• Non formal education (cirriculums and courses without certificates)
• Details on used software

Setup

• Use live version.

• Download this repository and:

  • Open project in VSCode
  • Run npm install
  • Run ng serve or ng serve --host <your-ip> --disable-host-check for preview in local network
  • Open generated address in the browser

• Deployment for GitHub:

  • Run ng build --output-path docs --base-href /Resume/
  • Move conetent from /docs/browser to /docs
  • In main-XXX.js and styles-XXX.css files replace all '/images' with 'images'

Acknowledgements

• Animate on scroll
• Router fade animation
• SVG backgrounds and patterns
• Favicon emoji

Details 📜

User interface

Header

• Each view shares a navbar, allowing users to navigate through the website by clicking on the navbar items.
• On mobile devices, the navbar transforms into a collapsible menu for better usability.
• A header section displaying the name of the current view is positioned at the top of the scrollable content area, providing clear context to the user.

---

Footer

The footer is a consistent part of every view, positioned at the bottom of the page.

It contains:

• A round, decorative shape and an inspiring quote to add visual appeal.
• Contact links for easy access to my communication channels.
• Copyright information and author details.

---

Intro

The Intro section is the first part of the About view, providing a quick overview of who I am.

It includes:

• A brief introduction about me and my background.
• A structured content list outlining the 'About' view.
• A direct link to download my resume in PDF format.
• Links to my most important professional profiles, such as GitHub, CodePen, and LinkedIn.

---

What I Do

The "What I Do" section offers a more detailed look at my expertise and activities.

It is divided into four categories:

• Programming – Covers the programming languages I use and my technical proficiency.
• Challenges – Showcases the platforms I use for coding challenges and problem-solving.
• Improvements – Highlights my continuous improvement efforts and the tools I use for self-enhancement.
• Learning – Focuses on the topics and technologies I am currently studying.

---

Skills

The Skills section presents my self-assessed competencies. It includes both skills I am comfortable with and those I have had some exposure to.

The skills are categorized into four columns:

• Languages – Programming languages I have experience with.
• Frameworks and Libraries – Technologies I have worked with in various projects.
• Programs and Tools – Software and utilities I frequently use.
• Other – Additional skills that do not fit into the above categories.

Below the skills table, there is a button that reveals additional skills when clicked.

---

Selected projects

This section provides a brief overview of my six best projects, showcasing their key aspects. Users interested in more projects can navigate to the Projects view for a complete list.

---

Education

My formal education is presented in a timeline format, with detailed descriptions of each stage of my academic journey. This provides insight into my background and learning path.

---

Experience

Similar to the Education section, my professional experience is displayed on a timeline with descriptions of my roles, responsibilities, and achievements in various positions.

---

Projects

The Projects view presents an overview of all my projects, offering users an interactive experience to explore my work.

Each project entry includes:

• A carousel showcasing images of the project.
• The project title.
• The group or category it belongs to.
• A detailed description of the project.
• The relevant skills used in its development.
• Links to the GitHub repository and live demo for further exploration.

Users can filter projects based on:

• Group – Categorizing projects for easier browsing.
• Search Text – Allowing users to find projects using keywords.
• Skills – Users can select one or multiple skills to filter projects that match their expertise.

Filtered projects are displayed in paginated views, and users can navigate through them. Additionally, they can adjust the number of projects displayed per page.

---

Contact

The Contact section provides various ways to get in touch with me and includes a contact form for direct communication.

It also lists websites where my work is showcased, allowing visitors to explore more of my projects and contributions.

Projects data

All of the projects are contained in a single file, projects_data.json.

This file organizes data into three categories:

• groups – names of the project groups
• skills – names of the skills
• projects – data related to individual projects

Each project entry includes:

• name – the name of the project
• images – a list of images for the carousel
• description – a short description of the project
• live_version – a link to the live version of the project
• github_repo – a link to the GitHub repository of the project
• skills – a list of skill IDs used in the project
• group – the ID of the group that the project belongs to
• hidden – a flag indicating whether the project should be hidden from display

{
  "groups": [
    "Personal projects",
    "TOP - The Odin Project",
    "FM - Frontend Mentor",
    "UR - University of Rzeszów",
    "Other"
  ],
  "skills": [
    "HTML",
    "CSS",
    "JavaScript",
    "TypeScript",
    "Python",
    ... And more ...
  ],
  "projects": [
    {
      "name": "TicTacToe",
      "images": [
        "images/TicTacToe/main-menu.png",
        "images/TicTacToe/multiplayer-lobby.png",
        "images/TicTacToe/win-movable.png",
        "images/TicTacToe/movable.png",
        "images/TicTacToe/one-mark.png"
      ],
      "description": "Three tic-tac-toe versions in two modes, vs AI, vs player locally and multiplayer in real-time.",
      "live_version": "https://tic-tac-toe-alqu.onrender.com/",
      "github_repo": "https://github.com/Pasek108/TicTacToe",
      "skills": [2, 4, 42, 45, 34, 0],
      "group": 0,
      "hidden": false
    },
    ... And more ...
}