For the past three weeks, I’ve been working on my portfolio inside my self-learning journey, and today I’m really happy to say that it’s finally complete ✅.
This portfolio isn’t just a website — it’s a reflection of everything I learned, revised, struggled with, and implemented during this time.
🔹 What I Built
My portfolio now includes:
A modern React-based UI
Smooth navigation using React Router
A scroll-animated About section with video
A fully working Contact Form
A serverless backend using Netlify Functions
Email delivery via Nodemailer + Gmail
Clean layout using Tailwind CSS
Small but meaningful UX details (loading states, messages, smooth scrolling)
Instead of focusing on quantity, I focused on doing things the right way.
🔹 Concepts I Already Knew (Revised Deeply)
Some concepts were familiar, but implementing them properly helped me understand them better:
useState for form handling
Form validation
Component-based structure
Basic React Router setup
Conditional rendering
Clean UI with Tailwind
Revising fundamentals gave me strength and clarity.
🔹 New & Advanced Concepts I Learned
Some things were completely new to me — and I learned them with the help of ChatGPT, documentation, and experimentation:
useLocation for smart routing behavior
Scroll-based animations using Framer Motion
Using useEffect for browser APIs
Fullscreen + audio handling in video playback
Serverless backend with Netlify Functions
Environment variables for security
Email sending using Nodemailer
Understanding how frontend talks to backend APIs
At first, these concepts felt confusing, but once I implemented them myself, everything started to make sense.
🔹 Biggest Learning Moment
The video audio & fullscreen logic taught me a lot.
Handling:
browser restrictions,
mute behavior,
fullscreen state,
and user interaction timing
gave me real confidence.
Now I truly feel that next time, I’ll build this even better and faster.
🔹 What This Project Gave Me
✅ More confidence
✅ Better problem-solving mindset
✅ Real-world frontend + backend understanding
✅ Less fear of advanced concepts
🌐 Live link 🖇️ https://usama-react-dev.netlify.app/
🔹 Final Thoughts
This portfolio represents progress, not perfection.
If you’re learning web development:
Don’t rush
Build slowly
Understand deeply
Ask questions
Break things and fix them again
👉 I’d really appreciate it if you check out my portfolio and share your feedback.
Feedback helps me grow.
Top comments (0)