Overview
A quick look at general information about the project with a brief description of the development process.
Project
It is a static single-page application in the form of a portfolio introducing my humble person to the world. Made with React, styled with Styled Components, project configured with Create-React-App and Gatsby. It contains the front page, which is about who I am as a person, where I am coming from, and to show my passion for programming, especially the front-end side of web development through presented projects and their case studies.
Project difficulties
Most of the problems revolved around how I should organize the project (design, implementation, and deployment). I had to adapt to the newly learned topics (SEO, page loading time, various asset formats, content creation methods, bundling, and accessibility). Along with the development, the structure of the project required changes, mainly due to the readability of the code.
Solutions
Major focused on learning best practices for what i have struggled with. For design I used Figma and tried wireframes/layout/mockup process. As a state management, I used useContext for passing content down the component tree, and locally useState for components functionality or style alterations, useEffect for component life cycle according to required functionality, if shared with other components, created as custom hook globally. I have used create react app boilerplate for the build process, to be straightforward. Deployed using linode hosting and their documentation.
Notable features
Contact form using react hook form.
Input validation with yup.
Blog posts supporting MDX format, with code snippets using prismjs.
Blog menu filtering posts by the key (tags) of the topics discussed.
Table of content using Intersection Observer API.
React custom hooks for menu visibility, fetching content with GraphQL queries, or triggering animations.
Gatsby statically generates project case studies or the about me section from markdown files.
Iframe autoplay implemented with Intersection Observer and Vimeo player API.
Navbar with a mobile, animated menu.
SVG animations.
Responsiveness using grid and flex layout.
Tech stack
TypeScript
React
Gatsby
GraphQL
Styled-components
Project goals
Section which trying to answer question: why this project?
Responsive and reusable components
The main focus was on creating responsive and reusable components, building blocks of my portfolio. The site has three major sections (about, project, blog) and each one is introducing me to the world with a different story. Each story needs its design, implementation, and delivery. The result is as much about technologies as about the process of getting there.
![Responsive and reusable componentsProject goals]()
Design process
The goal was to create at least a loose wireframe for each component. Then it became a section or a page layout. In no time UI/UX/Design podcasts became something not that distant anymore. I enjoyed getting to know this part of the project way deeper than before.
![Design processProject goals]()
Time is of the essense
After getting familiar with version control (git), it felt natural to try github issues, milestones for tracking the project progess. When it gives a structure to chunks of code pushed with commits, its not the best tool of tracking timing. For that i decided to explore agile environment using Jira, as much for tasks as for git commit message best practice.
![Time is of the essenseProject goals]()
Playground for new libraries
I have started the project with Create React App, react-router v6, styled components, configured with eslint, prettier, lint-staged, and husky. Then i moved to Gatsby, conifugred eslint, prettier, lint-staged, and husky again, and explored react/reach in place of react-router. I wanted to find out what are the risks of migrating whole project to different technology in terms of technological conflicts but as well in project tracking (github/jira).
Deployment
The last part of the process, was deploying project to the web. Not the easiest possible way, but to use it as a opportuinity to learn as much as i can about how server works. I choose linode as a hosting provider, learned how to dockerize the project, run it on nginx, configuring proxy as another layer on the server. The goal was to automate whole process with github actions.
Tech stack decisions
Mainly to push a little bit deeper in react syntax, giving the idea of how to React structure works, was especially handy while learning concepts around component props, and hooks. For example objects possibly undefined from returning array method, or the possibility of fetching data with an undefined return, makes catching errors a little bit less chaotic.
At first, I was looking for a way to have a single file for JSX, react syntax, and CSS. Along the way, I just loved the simplicity of using props for style modifications and alterations. It improved a lot of accessibility and readability of the code.
As someone who tries to learn as much as I possibly can from the project, it was difficult to draw the invisible line between choosing a shortcut and reinventing the wheel for no reason. So for example with IntersectionObserver I used Scroll Reveal for animations and lazy images and made my way of tracking content on the project component to learn IO mechanics insights.
No, it was a great way to explore how the browser works, what can be done with styling, and what are the works around some issues. CSS gave me instant visual gratification, which in terms of motivation helped immensely. I find a lot of similarities with street magicians to how CSS works under the hood, and how our perception as human beings works. It has some weird mechanics, but its effects can be magical.
It saved me a lot of time just thinking about solutions. When i put them into graphic interpretations, solutions or at least directions started to appear naturally. Understanding connections between typography, telling the story, the way we see things. It was a great playground to think about composition as a concept. In straightforward manner, i was able to create my own logos, graphics, svg icons and images that i could not find on the web.
Create react app using client-side rendering(CSR) which means when the user request site information, the server sends initial HTML with javascript files, then the user browser generates HTML content from javascript and displays the result. With Gatsby, which can be used as a static site generator(SSG), on user request, the server sends a prebuilt HTML file which includes static generated javascript part of the site, display HTML immediately, then process dynamic javascript and required media, rerendering only components where that data was needed. SSG improves the performance of single-page applications, as well as improves immensely SEO results because it provides much more information in the initial HTML file.
Notable features
Blog
This is one of the core features of Gatsby, creating a blog/documentation. Posts staticly generated from markdown files on build time, with formatting support from prismjs library, makes it possible to write personal blog with code snippets in them.
Contact form
Form with input validation, submit sends request to the simple backend written in node on my server with nodemailer sending body of the submit as a mail.
Table of content
I was using scroll reveal, which is based on IntersectionObserver (IO) API, so I decided to write custom hook, which implements a table of content dynamically showing which section is actually in the viewport of the user.