Transitioning to Web Development: A Project-Based Approach

Written by Joe, February 27, 2025

Core Technical Specialization

My primary expertise has been in backend development, focusing on the creation of robust APIs, frameworks, and applications. The design-oriented aspects of web development initially held less appeal. This preference was rooted in a strong focus on data management and system architecture.

Professional Project Context

A significant project within a freelance portal/service company involved the development of a comprehensive web application designed for the management of client and freelancer orders. This project, spanning over a year, demanded extensive backend development, including the implementation of complex data management systems and API construction. This engagement provided valuable practical experience in the development of large-scale web applications.

Portfolio Development: Inspiration and Implementation

Inspiration for personal portfolio development arose from observing a friend and fellow developer's portfolio, which demonstrated effective design principles. Here's an example of their work:

Image of friend's portfolio

The objective was to extend technical capabilities into front-end development. The process commenced with an analysis of the friend's source code to understand its structure and functionality.

Figma was employed for design prototyping. While initially I found the tool less intuitive, its utility became evident during this project. The design process focused on implementing effective layout and user interface principles, resulting in a complete redesign of the site. This was my initial design concept in Figma:

Image of first Figma design

The portfolio was developed using the friend's website as a foundational structure. Customizations included:

Homepage Redesign: Complete restructuring of the homepage layout to align with personal design preferences.
Styling Overhaul: Implementation of a new style guide to ensure visual consistency and enhance user experience.
Dynamic Data Management: Transition from a static JSON data structure to a Git-based content management system (https://github.com/joehosten/portfolio), facilitating dynamic content updates and reducing deployment overhead.
Functionality Expansion: Integration of a photography section featuring custom gallery components and pagination to enhance content presentation and navigation.

Technical Architecture

The portfolio utilizes SvelteKit, TypeScript, GitHub API integration, Google Firebase hosting, and GitHub Actions for automated deployment. This technical architecture supports efficient development and deployment workflows, ensuring maintainability and scalability.

Skill Development and Future Objectives

This project-based approach facilitated the development of skills in web development, particularly in front-end technologies. Learning was achieved through practical application and detailed code analysis.

Future development objectives include:

Exploration of diverse technology stacks to broaden technical expertise.
Integration of robust database solutions, such as MongoDB or SQL, to enhance data management capabilities.
Development of web applications with practical utility to address real-world needs.

This experience underscores the value of project-based learning in expanding technical competencies and fostering continuous professional development.