-
Landing page
Inspiration
In today’s tech-driven world, a résumé alone doesn’t capture a developer’s creativity or impact. I wanted to build something that speaks louder than credentials — a living identity that grows with every project, idea, and collaboration. The DevOne Hackathon 2025 theme — “Build Your Developer Portfolio” — perfectly aligned with this vision, inspiring me to craft a modern, dynamic portfolio that reflects both my skills and personality.
What it does
This project is a personal developer portfolio website, designed and developed using React, Tailwind CSS, and shadcn/ui components, enhanced with Framer Motion for subtle yet expressive animations. It features: A welcoming Home section introducing the developer A Projects section showcasing real work and GitHub links A Skills section highlighting tech stack A Contact form powered by Formspree / mail integration Dark-light theme toggle for accessibility and aesthetics
How we built it
The project was developed using a modular, component-based approach in React:
function App() { return ( <> </> ); }
Each section was built with reusable UI components for scalability and responsiveness. Tailwind CSS handled the layout and typography, while Framer Motion brought life through animated transitions. Deployed seamlessly on Vercel, the app offers a clean, mobile-first experience.
Challenges we ran into
Balancing design aesthetics with performance and accessibility Optimizing animations to remain smooth across devices Implementing theme toggles and smooth-scroll navigation seamlessly Managing layout responsiveness across breakpoints
Accomplishments that we're proud of
Built a fully responsive, animated portfolio with React and Tailwind. Integrated a functional contact form with Formspree. Designed a clean, minimal UI with dark/light mode. Optimized performance and animations using Framer Motion. Deployed seamlessly on Vercel within the hackathon timeframe.
What we learned
How design and code intersect to form digital storytelling Efficient state management and animation orchestration using Framer Motion hooks Building accessible, responsive UI with Tailwind CSS and shadcn/ui CI/CD workflows for instant deployment and version control Basics of form handling and integration with Formspree for secure contact submissions
What's next for Dev_one_portfolio
Add custom themes and color personalization so every user can brand their portfolio uniquely. Integrate a blog and project case study section with Markdown support. Enable AI-powered résumé generation from portfolio data. Expand to a portfolio builder template that others can fork and customize easily. Deploy with full SEO optimization and analytics for better visibility.
Built With
- css
- framer-motion-tools-&-platforms:-vite
- github
- javascript
- lucide-icons-design-&-productivity:-figma
- react
- shadcn/ui
- tailwind-css
- typescript
- typescript-frameworks-&-libraries:-react
- vercel-(for-deployment)-apis-&-integrations:-formspree-(contact-form)
- vscode
