Introduction
Welcome to the very first look under the hood of DaleyDownload.com. This project started as a simple idea: an IT portfolio to showcase professional achievements. However, like all good (and bad) projects, it continued to evolve into something more personal and technically interesting along the way.
In this post, I’m going to walk through the initial build of the site before the blog you're reading right now even existed. We'll explore the design challenges of a dual-portfolio site, and the deployment pipeline that brings it all to life.
The Tech Stack:
Framework:
Next.js (React)
Language:
TypeScript
Styling:
Tailwind CSS
Hosting:
Vercel
Source Control:
GitHub
Why I Built This
This site was initially built for several different reasons. Primarily, I wanted a centralized hub to display my resume and technical projects that went a little deeper than a normal Resume or a glance at my LinkedIn profile. Thankfully, I already owned the domain DaleyDownload.com, so the foundation was all there.
However, the scope expanded when my wife, Kiersta, expressed interest in having a portfolio as well on the site. This presented a unique challenge: How do you build a personal portfolio that isn't just for one person? Because of this, it needed to be a "dual portfolio". The challenge was in creating a shared space that felt cohesive yet distinct for two different professional identities.
On a technical level, I had a specific experiment in mind. I wanted to see how far VS Code with GitHub Copilot could take a developer with relatively little frontend experience.
Key Features & Design Challenges
The Home Page: Solving the "Two-Person" Problem
My initial challenge was the Landing Page. Integrating two different people into a single-entry point without it feeling cluttered or confusing is difficult and I didn't want a generic split-screen. I wanted something that felt like a directory.
I drew inspiration from corporate "Meet the Team" pages. These often utilize card-based layouts to present employee information cleanly. This led to the design you see today: distinct "Profile Cards" for me and Kiersta.
Each card acts as a portal, linking to a dedicated subdirectory containing our individual resumes and project lists. While the navigation worked wonderfully, it introduced a new problem: The Void.
Conquering White Space
After implementing the cards, the site felt sterile. There was too much negative white space, and it lacked character. It didn't look good to look at, and it didn't feel like us. The site clearly lacked any personality.
The Solution: Color & Motion
The Palette:
My wife loves green, specifically Sage Green. To balance this, I needed a complimentary color that felt warm and grounded. I ended up picking Terracotta after looking at a few. This dual-tone approach allowed us to "brand" our specific sections of the site.
The Gradient:
To tie the two together, I implemented a gradient text effect on the main title, blending our two colors to symbolize the partnership.
The Background:
To fix the whitespace issue, I used our color palette to create a background. I selected icons representing our fields a Server Icon for my IT work and a Leaf/Book Icon for her and applied them as background elements. By using low opacity and a heavy blur filter, these icons add depth and "pop" without distracting from the content.
The Portfolio Section
Once the user clicks through a profile card, the focus shifts to content. The Resume and Projects sections were built with readability in mind. Using Tailwind CSS, I created layouts that stack neatly on mobile devices but expand to a grid view on desktop.
The goal here was data separation. Even before integrating a CMS (which I'll discuss in a future post), I structured the data in JSON files within the codebase. This allowed me to map over arrays of job history and skills to generate UI components dynamically, rather than hard-coding HTML thanks to help with CoPilot.
Deployment & Hosting
When it came time to ship, Vercel was the obvious choice.
Why Vercel?
Seamless Next.js Integration:
Since Vercel created Next.js, the optimization is out of the box.
CI/CD Pipeline:
The integration with GitHub is flawless. Every time I push code to the main branch, Vercel automatically detects the change, builds the project, and deploys it to AWS.
Free for Hobbyists:
Finally, Vercel offers a free tier for hobbyists who are looking to host something small.
The setup was incredibly straightforward. After linking my GitHub repository to Vercel, the platform auto detected the Next.js framework and configured the build settings. Within a few minutes the site was live with valid SSL certificates and global CDN distribution which saved me a lot of additional effort compared to self-hosting.
Looking Forward
This build represents the "Static Era" of DaleyDownload. It was functional, fast, and looked great. However, updating content required a code commit, a push to GitHub, and a rebuild. I knew that if I wanted to write regularly, I needed something else. This is where Contentful comes in.
In my next post, I will detail how I transformed this static site into a dynamic application by integrating the app as a Headless CMS, connecting it to Vercel via Webhooks, and building the blog section you are reading right now.
Conclusion
Building DaleyDownload has been a rewarding journey of learning modern frontend architecture and the power of AI that is directly involved in the project files. After wrestling with CSS gradients, configuring DNS records, and several failed deployments, every step has been a lesson in full-stack development.
I invite you to explore the site, check out our respective portfolios, and stay tuned for the next technical post!