This portfolio is built using Vite as a framework, with React as the core library for creating reusable components. The project follows a modular structure, organizing all assets, components, and layout files in a way that promotes reusability and maintainability. The goal was to follow a design in Figma as closely as possible. Being a designer I opted for designing my own portfolio and implementing that design.
- assets: Contains fonts, icons, and images used across the site to keep the design cohesive.
- components: Holds the individual, reusable components such as buttons, headers, tags, and typography elements that I created for different parts of the portfolio.
- layout: Contains the layout-specific components like Hero, Footer, and sections for projects and articles.
- data: JSON files that store data for articles, projects, skills, and tech stack, allowing for easy updates and scalability.
- styles: Global CSS styles to ensure consistency across the site.
Component-Based Structure: I broke the design into reusable components (e.g., Button, Tag, Header, Footer) for better maintainability. Each component is isolated, allowing me to adjust or reuse them across different sections without duplicating code.
Modular Layouts: I separated layout-specific components (e.g., Hero, Projects, Articles) into a layout folder, keeping the structure clear and making it easy to locate each section of the site.
Data: Stored project and skill data in JSON files to easily add or update content without hardcoding it in the components.
In the future I would like to blend my design projects and development projects in a nice way, maybe with a option to filter. I would also like to add pages like About me and Contact. If I decide to actually write articles I would also link to the actual articles in some way, preferably they would have individual pages as well.