2 - Intermediate
Developer Portfolio
Modern developer portfolio with light and dark mode
- 🎨 Designing and implementing a modern, sleek, responsive layout.
- 🌙 Adding dark/light theme switching using modern CSS techniques.
- 📏 Mastering absolute positioning through floating background elements and icons.
- 🔄 Using JS to create an infinite testimonial carousel.
There is a floating navbar with links to page sections.
In mobile view, navbar is present as a hamburger menu.
The theme toggle is located in the top right in desktop view and top left in mobile view.
Clicking on the theme toggle switches between light and dark mode
Each section has relevant floating icons or grid backgrounds.
The hero section includes a title, subtitle, connect button, and a hero image.
The tech stack section displays a card with known languages listed with their icons.
The 'Best Works' section contains 4 cards. Each card includes an image, title, link, description, and the languages used.
The testimonials section scrolls automatically.
Each testimonial card containing an image, name, role, and description
The work experience section lists experiences in a column
Each experiene card contains company logo, company name, role, dates, and a description.
The contact section includes a 'Get in Touch' button and social icons.
The app works in both light and dark mode.
The app works for both mobile and desktop screens.
- 🎨 Designing and implementing a modern, sleek, responsive layout.
- 🌙 Adding dark/light theme switching using modern CSS techniques.
- 📏 Mastering absolute positioning through floating background elements and icons.
- 🔄 Using JS to create an infinite testimonial carousel.
Add scroll transitions and animations on click/hover.
Add an intro video to the hero section.
Implement smooth scroll to section when navbar item is clicked.
Add a download resume button which downloads a resume PDF.
Add a blog page with blog articles arranged by publish date.
- Click on the 'Download Design' button to get the .fig file.
- Upload the .fig file to your Figma account using these steps. You can now open the design and see what you have to make.
- Export assets from Figma by pressing Ctrl+Shift+E (or Cmd+Shift+E on Mac) while nothing is selected and then clicking the 'Export' button that shows up.
- Implement the design using your preferred language or framework (aim for pixel-perfect accuracy).
- Deploy your solution for free using GitHub Pages, Netlify, or Vercel.
- Submit your solution link here and try to get a perfect score!