Welcome to my personal portfolio, a digital showcase of my journey in front-end development and graphic design. It's a place where I bring my passion for creativity, experimenting, learning, and crafting unique projects to life. Whether it's through code or design, I love expressing myself by building and making cool stuff.
Step into a world of creativity, innovation, and collaboration. Whether you're curious about my journey, interested in exploring my projects, or eager to discuss new creative endeavors, you'll find it all here.
In the "About" section, you'll get to know a bit about me and my background as a passionate front-end developer and graphic designer.
I'll share insights into the technologies and tools I work with, which include front-end development, graphic design, and SEO.
Discover the diverse range of projects I create. From eye-catching web designs to interactive front-end development, and the fine art of optimizing for search engines.
Step into my world of web development creativity. In this section, you'll find a collection of diverse web projects, including a resume creator, an aim trainer game, and more!
Each project comes with detailed descriptions, mockups, the technology stack used, and links to both the hosted project and its GitHub repository. Explore the real-world applications of my skills in action and discover the unique digital experiences I've crafted.
Within this creative space, a tapestry of visual stories unfolds - from logos and flyers to icons and color palettes. These designs invite exploration, with each piece weaving its own narrative. Discover the subtle nuances that make every design a captivating chapter, as we embark on this visual journey together.
Have questions, ideas, or a burning desire to collaborate on something amazing? Don't hesitate to reach out! Let's make amazing things happen together! I can't wait to hear from you and explore the creative possibilities we can unlock together :)
This Vue-powered project is a playground of creativity and innovation. It features an animated background and smooth fade-in animations, demonstrating that even the simplest elements can be engaging. The goal was to craft a user-friendly and aesthetically pleasing design while keeping things understandable.
Building on experiences from previous projects, this portfolio website became a platform for experimentation and skill enhancement. Explore the code and uncover how simplicity can be beautiful and engaging.
A simple, fixed navigation with uniquely animated icons. The mobile version has an interesting feature - there is a close-button cursor proximity indicator. When the user is closer to the close button, the indicator changes to occupy more navigation border spa. It's a nice, visually appealing feature that enhances the navbar's interactivity and engagement.
A parallax hero section containing an animated name and a dev icon with outlines that are animated on page load, similar to a loading animation.
The section includes an auto-scroll feature that automatically navigates to the "About Me" section. During this transition, the outlines are "unloaded" as the section fades away.
The modals pop out from their exact position on the page, resembling the stretching of a tile to cover the entire page. The tile modals contain various projects.
The Web Dev projects include a mockup that can be toggled to resemble a desktop or mobile version of the project. It's a screenshot that can be scrolled like a regular website. Additionally, there is information about the project, the tech stack, and links to the GitHub repository, as well as the hosted project.
The Graphic Design Modals are galleries featuring grids of images, including logos, flyers, icons, and color palettes. Each image can be opened in a full-screen mode.
The form uses an external mail API (currently Formspree) to handle submissions since GitHub Pages do not support backend. There are multiple checks, such as verifying empty required fields, validating email addresses, and bot prevention.
There is a popup providing useful information about the current action, such as successful or failed, sumbission, too many attempts, etc. If the API response takes too long, the user will be notified via the popup.
Many parts of the website are animated to introduce visually appealing design and interactivity.
The background includes animated blobs that constantly move and bounce off the edges of the screen (inspired by the legendary DVD Screensaver). The navigation features icons, each with a unique hover animation.
The hero section has a parallax effect, along with a name outline "loading" animation. The main sections gracefully fade in as the user scrolls down the page.
-
Code
- Vue 3
- HTML 5
- CSS 3
- SASS (SCSS)
- JavaScript
- TypeScript
- External Mail API
-
Graphics & Icons
- SVG
- Figma
- Adobe Illustrator
Portfolio by Wojciech Bocho - All Rights Reserved.