Folio 2025, building a website without framework
02.16.25
Post
A straightforward personal portfolio built from scratch using Express, Vite, and Three.js.
After months of work, I’m really happy to share my new portfolio for 2025. This project is designed to be a refined, professional showcase of my work as a front-end developer. More than just a gallery for projects and case studies, it serves as a flexible platform for sharing blog entries and ongoing experiments. My aim was to transition towards a more professional presentation while using it as a way of experimenting.
Key objectives included:
- Showcase My Work: Present new projects, detailed technical case studies, and blog entries in a clear, engaging format.
- Establish a Professional Identity: Create a cohesive and modern platform that accurately reflects my skills and design sensibility.
- Create a Versatile Platform: Develop a system that supports diverse content types while allowing for easy updates and reorganization.
Design
The website was designed by Concrete Club with a clear set of goals: to showcase my work and provide a unique space for sharing various types of content. I wanted something different from the typical portfolio layout—a design that stands out while remaining approachable and easy to navigate.
Sitemap and Layout
Homepage
The homepage features immersive 3D scenes that represent physical spaces—a concept I carried over from my previous portfolio.
Information
A straightforward section that provides essential background details in a clean, minimal format.
Work and Case Studies
A dedicated area where projects and detailed case studies are presented clearly, making it easy for visitors to explore my work.
Blog and Posts
A space designed for sharing a variety of content, from technical insights to personal reflections, ensuring the site remains dynamic and up-to-date.
Development
The site was built from scratch without relying on a full frontend framework, granting me complete control over performance and functionality. This custom development approach allowed me to integrate advanced visual elements while keeping the code lean.
Frontend Technologies
- Vite: Provides fast bundling and an efficient development workflow, significantly reducing build times.
- GSAP: Powers smooth, high-performance animations—from subtle hover effects to dynamic transitions between sections.
- Three.js: Integral for creating immersive 3D visuals and shader transitions, used in key areas such as the hero section and project presentations.
- Lenis Scroll: Ensures a refined scrolling experience that enhances navigation across long pages like project listings and case studies.
Backend Technologies
- Node.js & Express.js: The backend is built from scratch using Node.js and Express.js, providing a lightweight yet robust solution. This approach offers complete flexibility and scalability as the site evolves.
- Prismic (Headless CMS): Integrated to streamline content management, Prismic uses a slice-based architecture that makes it simple to add and organize content. This enables effortless updates for projects, case studies, and blog entries without deep technical intervention.
Key Features
Immersive Hero Section:
Features three distinct animated 3D scenes that greet visitors on entry. Click-triggered shader transitions powered by Three.js create an engaging and interactive introduction that sets the tone for the site.
Interactive Project Presentation:
The Home Page highlights projects with dynamic visuals rendered with Three.js. An infinite scroll feature on the Project Listing page provides a seamless, playful way for users to explore my work without interruption.
Dynamic Case Study Navigation:
Detailed case study pages incorporate smooth, scroll-triggered transitions that guide users effortlessly from one project to the next. This fluid navigation enhances the storytelling of each case study while maintaining a consistent user experience.
Editorial-Style Informations Page:
Designed with a minimalist, content-first approach that prioritizes readability and clarity. The clean, straightforward layout—shaped in collaboration with Concrete Club—ensures that the focus remains on the content without distractions.
The site now features what I hope is a clean, consistent design that makes it easy for visitors to explore my work. From the immersive hero section to the case studies, every element is crafted to be clear and accessible.
The portfolio accommodates various content types—projects, case studies, and blog posts—ensuring that it can grow and adapt as my work evolves. By combining simple design with practical technical choices, the site offers an intuitive navigation experience that keeps the focus on the content. Hopefully, this portfolio reflects my ongoing journey as a front-end developer. It combines a playful approach with a clean, modern design—supporting my goal of continually refining my work and expanding my professional capabilities.
If you’re interested in collaborating on a new project or have any questions about my process, feel free to email me. Let’s build something great together.
