Designing a self-taught portfolio & creative prompt generator
This project marked a significant milestone in my self-taught design and development journey, combining a personal portfolio website with a creative prompt generator tool. Inspired by a cinematography professor's weekly photo assignments, I engineered an innovative JavaScript-based tool that generated randomized creative prompts, which I used to maintain a regular photography practice.
The portfolio showcased a minimalist, card-based design with a glassy layered aesthetic, implementing my developing skills in HTML, CSS, and JavaScript. Beyond technical implementation, this project served as my entrance into strategic self-marketing, with a zero-budget launch that achieved over 100 unique visits on day one through targeted promotion.
Prompt: B&W - Midday light - Minimalism - Fantasy/Rule of thirds
Prompt: Texture - Diffused light - Fine art - Experimental/Square format
Create a professional portfolio website with a custom prompt generator, showcasing both my design skills and supporting personal creative practice.
July 2021 - September 2022 (14 months of active development and maintenance)
Self-taught designer, developer, marketer, and content creator (photography)
HTML, CSS, JavaScript, WordPress, PHP, Adobe After Effects, Adobe Premiere Pro, Adobe Creative Suite
Building a professional-quality portfolio without formal training presented multiple challenges that went beyond simple technical hurdles:
My approach combined structured self-education with creative problem-solving to overcome these challenges:
The portfolio featured a minimalist card-based design with glassy layers and intuitive navigation
This project evolved through distinct phases, each building on lessons learned from previous stages and projects like Humpr, showing significant growth in my design capabilities.
My journey began with Codecademy courses to establish a foundation in HTML, CSS, and JavaScript. Simultaneously, I analyzed existing portfolio sites, noting effective navigation patterns, content organization, and aesthetic approaches. This dual learning approach allowed me to understand both technical implementation and design principles. I developed an objectives-focused methodology where I first defined what the portfolio needed to accomplish, then explored multiple potential solutions before selecting the most effective approaches.
My initial wireframe sketch showing planned layout and functionality during the planning phase
Inspired by my cinematography professor's approach to weekly photo assignments, I engineered a JavaScript-based tool that combined template structures with randomized elements to generate creative photography prompts. The algorithm selected from categorized variables (lighting conditions, technical requirements, subjects, compositional approaches) and combined them into coherent challenges. This technical solution not only showcased my JavaScript skills but created tangible value by establishing a framework for consistent creative practice, resulting in several photographs reaching the popular section on 500px.
The most challenging phase was implementing the design, particularly the header which required a week of focused effort. I applied a systematic approach to create a minimalist card-based design with a glassy, layered aesthetic. User experience was prioritized with clear navigation and intuitive information hierarchy. The contact card implementation became a standout feature, incorporating strategic social proof by showcasing brands that had trusted my work. Throughout this phase, I continuously improved my skills with each component, becoming progressively more efficient as the project advanced.
Screenshot of my work-in-progress as I was writing the code, showing early development of the minimalist card-based design
The launch strategy centered around a promotional video created entirely in After Effects, showcasing my animation abilities while highlighting the portfolio's features. I utilized social media analytics to determine optimal posting times for maximum engagement without paid promotion. This strategic zero-budget approach resulted in over 100 unique visits on launch day. The site maintained a strong focus on user privacy, with a dedicated privacy policy page detailing minimal data collection practices—a principled stance that differentiated it from typical analytics-heavy portfolios.
This project yielded significant results across both technical skill development and creative output, serving as a pivotal milestone in my professional evolution.
Beyond metrics, this project delivered significant outcomes that influenced my professional trajectory:
Before taking the portfolio site offline, I recorded a video walkthrough to document the complete user experience. This recording showcases the functional website with its minimalist card-based design, glassy layered aesthetic, and the integrated creative prompt generator tool in action.
"Building this portfolio from scratch transformed my perspective on what's possible through self-directed learning. The technical challenges that once seemed insurmountable became stepping stones to greater capabilities."
— Personal reflection on the project's impact
This project marked a significant evolution from my previous work on Humpr, showing dramatic growth in both technical execution and design sensibility. The journey from concept to completion provided valuable insights that continue to influence my approach to projects.
This project demonstrated that structured self-learning combined with deliberate practice can yield professional-quality results without formal training. The confidence gained from successfully implementing complex technical solutions has fundamentally altered my approach to new challenges—seeing them as opportunities for growth rather than obstacles. The principles learned through this project, particularly around objective-driven design and integrating creative practice with technical development, have become foundational to my current portfolio approach, with each iteration building on lessons from previous work.
