www.christian-schwanse.com - Portfolio Website

On the website I present myself, my skills, professional experience and projects. The portfolio website itself is also a project. No front-end framework such as React or Angular was intentionally used for the website in order to understand the native HTML, CSS and JavaScript very well! Only one framework was used for unit tests / TDD: Jest.

The website is mobile responsive as well (e. g. burger menu):

The website has also been optimized for accessibility (multilingual, motion sickness, screen reader, ...).

Example: Preventing motion sickness by allowing the user to set whether animations should be used or not.

Another example: The language of the website can be changed to English.

Information about the Project

General

• Client: Myself
• Project Goal: Demonstrate my skills, professional experience, projects and learn frontend web development without a framework.
• Number of Project Participants: 1
• Time Period: May, 2024 - August, 2024 (+ new implementations from time to time)
• Industry / Area: Web Development
• Role: Lead Developer / Website Owner
• Languages: German, English
• Result: A website that can be found on the Internet by all kinds of interested parties all over the world.
  The website has been optimized for all possible end devices and is therefore mobile-friendly. In addition, a significant improvement in knowledge of front-end web development (HTML, CSS and JavaScript) as well as the Jest testing framework and domain hosting without a content management system (CMS).

Tech Stack

• HTML
• CSS
• JavaScript
• PHP
• Testing Framework: Jest
• Static Code Analysis: ESLint (Same configuration used by the ESLint Team)
• Inkscape
• Gimp
• Github
• MS Visual Studio
• Domain Hosting: Strato
• FTP: FileZilla
• Material Design

How I worked on this project

Planning at the beginning. Answering questions such as:

• How do I want to implement the website?
• What scope should the project have - taking into account that I work and have other commitments?
• Which pages and content should the website contain?
• Who should the website be aimed at and how should it be accessible / findable (e.g. marketing)?

Once the planning was complete, it was time to get down to business - a cycle consisting of the following steps:

• Planning a work step for a new functionality
• Programming
• Testing
• If successful: Code Refactoring. If failed: Bug Fixing
• Testing
• Github Commit / Push

As a final step, the website was fine-tuned: mobile responsiveness, code refactoring, user-friendliness and SEO.

=== Update: 04/09/24 === As I have learned about new technologies, my usual approach has changed over time: I plan my projects with the Kanban board function in Github Projects. Desired changes are created with the help of a self-created Github issue template. Within the template, the Gherkin syntax for Behavior-Driven Development (BDD) is used. The issues are sorted by priority. I use the Scrum methodology and define the sprints for what should be done next in the near future. Issues with the highest priority are completed first. Once it is clear what needs to be done, I use the Jest testing framework to create the tests that need to be fulfilled afterwards (test-driven development, TDD). After a sprint, I reflect on what could be done better. The next sprint is then planned and implemented.

Why I implemented the project in this way

I developed this website without a framework - just the lovely triangle: HTML, CSS and JavaScript. Reason: It's my first real, self-programmed website. I'm generally a fan of practicing the basics first before venturing into new, "interesting" things. I also had the thought that I would clearly see the advantages and compromises of frameworks in the future.

=== Update: 04/09/24 === Testing Framework Jest for unit testing added. I chose Jest because it is a well-known testing framework and I was told that it is easy to set up.

My most important points that I have learned from this project

1. Create your own components such as headers or footers that can be can be reused across pages.
2. Mobile responsiveness. I thought it would be done with Flexbox and Grid - I was very wrong. I had to adapt the design in various places so that it looks good on small, medium-sized and extra-extra-large screens. The testing alone was time-consuming enough.
3. It is very time-consuming to develop a website (including content) from scratch. Figma would make sense in the long term. A tool for designers and developers to create prototypes of UIs. This avoids the case of programming something for a long time and then discarding it in the end because you don't like it after all - I'd rather not say whether this happened to me during the project 😉 Todo management software such as Jira is also helpful.
4. Testing Framework Jest: It was unclear to me how to carry out unit tests in JavaScript. So I familiarized myself with the topic from scratch.
5. Kanban board in Github Projects: I didn't know that there was such a function in Github. It helps me to keep track of projects and todos. It also allows me to use BDD as well as document important notes.

Contact

If you have any questions, please feel free to reach out via email: christian-schwanse (at) gmx.net