Portfolio E-Commerce Website

Role: Full-Stack Developer • Year: 2025

HTML/CSS/JavaScript Stripe API Netlify Functions Responsive Design

Client loads a header partial, which is injected and wired to theme logic. Theme and cart state persist to localStorage; checkout requests go to serverless functions and Stripe.

Project Overview

Built this full-stack portfolio and e-commerce website from scratch to showcase both technical skills and farm products. The site features integrated Stripe payments, serverless backend functions, responsive design, and a custom domain setup.

Technical Implementation

Frontend Development

Built with vanilla HTML, CSS, and JavaScript for optimal performance
Implemented CSS custom properties for theme switching (dark/light mode)
Created responsive grid layouts using CSS Grid and Flexbox
Designed accessible UI with ARIA labels and keyboard navigation
Optimized for SEO with meta tags and Open Graph protocol

E-Commerce Integration

Integrated Stripe Checkout for secure payment processing
Built shopping cart functionality with localStorage persistence
Created quick-view modals for product previews
Implemented real-time cart updates and badge notifications

Backend & Deployment

Developed serverless functions on Netlify for checkout session creation
Set up custom domain with DNS configuration
Implemented form handling with Netlify Forms
Configured continuous deployment from Git repository

Key Features

Dynamic product grid with modal previews
Shopping cart with persistent state across sessions
Stripe-powered secure checkout flow
Dark/light theme toggle with localStorage preference saving
Contact form with spam protection
Newsletter integration with Mailchimp
Blog section for project updates
Fully responsive design for all screen sizes

Challenges & Solutions

One challenge was maintaining cart state across different pages while keeping the implementation simple. I solved this by using localStorage to persist cart items and created a reusable cart management system that works across all pages.

Another challenge was securing the Stripe integration. I implemented serverless functions to handle checkout session creation server-side, keeping API keys secure while maintaining a smooth user experience.

Results & Impact

Successfully launched a professional portfolio that serves as both a showcase of technical abilities and a functional e-commerce platform. The site handles product sales, captures leads through the contact form and newsletter, and provides a platform for sharing project updates via the blog.