This repository currently hosts the source code for my personal portfolio, a showcase of my web development and design skills. It's built on a solid foundation of HTML5, CSS3 (with Sass), and vanilla JavaScript. You'll find a strong emphasis on responsive design, a robust grid-based layout, and essential interactive elements like a contact form with email validation and a smooth-scrolling navigation menu. It even includes modals for project details and a loading animation for a slick user experience.
- Responsive Design with a focus on Accessibility
- Built with HTML5, CSS3, and JavaScript
- Utilizes Sass for CSS pre-processing
- Features a grid-based layout system
- Includes a contact form with email validation
- Has a working navigation menu with smooth scrolling
- Includes a modal for displaying additional project information
- Has a loading animation for faster page loading times
While the current setup is effective, I'm actively working on a major refactor to SvelteKit. This upgrade will significantly enhance the portfolio's maintainability, performance, and scalability. With SvelteKit, I'll be leveraging:
- Component-based Architecture: Breaking down existing HTML sections into reusable Svelte components for cleaner and more manageable code.
- Built-in Routing: SvelteKit's file-system based routing will streamline navigation, simplifying what might currently be manual JavaScript handling.
- Reactive UI: Svelte's powerful reactivity will simplify managing dynamic content, like contact form validation and modal interactions, often with far less code than vanilla JavaScript.
- Static Site Generation (SSG): This is crucial for deployment! SvelteKit can pre-render the entire site into highly optimized, static HTML, CSS, and JS files.
The refactor aims to create an even more polished and performant portfolio by:
- Modernizing Features: Reimplementing interactive elements using Svelte's reactive approach for a more efficient codebase.
- Enhanced Accessibility: Leveraging Svelte's capabilities to ensure even better accessibility for all interactive components.
- Improved Performance: Benefiting from Svelte's famously small bundle sizes and fast execution, providing a lightning-fast user experience.
I'm incredibly excited to announce that this refactor will be based on Svelte 5's new "Runes" API! This cutting-edge feature promises to make implementing dynamic functionalities even more intuitive and powerful.
The new Runes (like $state, $derived, and $effect) introduce a more explicit, signal-based reactivity model that will feel incredibly natural. This will allow me to:
- Simplify state management: Declaring reactive variables will be crystal clear with
$state. - Enhance reusability: Create reactive functions and logic that can be easily shared across components, making complex features like advanced filtering much cleaner.
- Implement Dynamic Project Filtering: With
$derivedand$effectrunes, I'll be able to create highly efficient and dynamic filtering mechanisms for my portfolio projects. Imagine instantly filtering projects by type (e.g., "Web Development," "UI/UX Design," "JavaScript") or specific tools used, providing a much richer and more personalized Browse experience for visitors!
You can see the current version of the portfolio, deployed directly from this repository to GitHub Pages, right here:
https://pixelpusher829.github.io/Personal-Portfolio
Stay tuned for updates as I integrate the new Svelte 5 Runes and roll out that dynamic project filtering feature very soon! It's going to be a game-changer for showcasing my work! 🤩
- Clone the repository:
git clone [repository-url] - Navigate into the project directory:
cd [project-name] - Install the dependencies:
npm install - Run the development server:
npm run dev - Open your web browser and navigate to
http://localhost:1234
- HTML5
- CSS3
- Sass
- JavaScript
- Parcel
- CSS Grid
- Flexbox
- Responsive design
- Accessibility features
- SvelteKit (coming soon)