When I decided to create my portfolio website, I wanted something clean, fast, and developer-friendly. After exploring various options, I settled on using Vercel's Next.js portfolio template as my foundation. This decision would prove to be both practical and educational, giving me a solid starting point while allowing room for customization.
Choosing the Vercel Template
The Vercel portfolio template caught my attention for several reasons:
- Modern tech stack: Built with Next.js 14, TypeScript, and Tailwind CSS
- Blog functionality: Built-in MDX support for writing technical content
- Performance optimized: Server-side rendering and static generation out of the box
- Clean design: Minimalist aesthetic that I could build upon
- Easy deployment: Seamless integration with Vercel's hosting platform
Starting with a template meant I could focus on content and unique features rather than spending weeks on boilerplate setup.
Personalizing the Foundation
Once I had the template running locally, my first task was to make it truly mine. This involved several key modifications:
Site Title and Branding
I changed the site title from the generic template name to "PUC-tafolio by develipster". The name is a playful combination of:
- PUC: Referencing my alma mater, Pontificia Universidad Católica de Chile
- Portfolio: The obvious purpose of the site
- develipster: My developer persona, combining "developer" with a modern twist
Personal Description
The homepage description was completely rewritten to reflect my background:
"I'm a recent Computer Engineering graduate with expertise in full-stack development, cloud computing, and data-driven solutions. Proven track record in developing scalable web applications using modern technologies including React.js, Node.js, Python, and AWS. Strong foundation in software architecture, process mining, and artificial intelligence. Passionate about creating efficient, well-documented solutions that drive business value and optimize user experiences."
This description encapsulates my technical skills, educational background, and professional aspirations.
Navigation and Links
I updated the navigation structure to include:
- Home: The main portfolio landing page
- Blog: Technical articles and project documentation
- Projects: Showcasing my development work (planned)
- Contact: Professional contact information
The footer was also updated with my social media links and professional profiles, replacing the template's placeholder links with my actual GitHub, LinkedIn, and other relevant platforms.
Technical Setup Process
Getting the template up and running involved several steps:
- Cloning the repository from Vercel's GitHub
- Installing dependencies with
pnpm install - Local development setup with
pnpm dev - Customizing the configuration files (next.config.js, tailwind.config.js)
- Setting up the deployment pipeline with Vercel
The template's structure was well-organized, making it easy to understand where different components lived and how they interacted.
Preparing for Future Features
While making these initial changes, I was already planning the next major feature: an interactive knowledge graph that would visualize my academic journey and technical skills. This graph would become the centerpiece of the homepage, showing connections between different courses, technologies, and projects from my university career.
The blog system would serve as documentation for this development process, allowing me to share both the technical implementation details and the design decisions behind each feature.
Lessons Learned
Starting with a template taught me several valuable lessons:
- Templates accelerate development without sacrificing quality
- Customization requires understanding the underlying architecture
- Good documentation (like Vercel's) makes adoption much smoother
- Planning ahead for future features influences early design decisions
Next Steps
With the foundation in place, the next phase would involve implementing the knowledge graph feature using D3.js, creating an interactive visualization that would set my portfolio apart from typical static sites. This would require diving deep into data visualization, force simulations, and advanced React patterns.
The journey from template to personalized portfolio was just the beginning of what would become a comprehensive showcase of my technical capabilities and creative problem-solving approach.
This marks the first entry in documenting the development of PUC-tafolio. Stay tuned for more technical deep-dives as I continue building and refining this digital representation of my engineering journey.