The latest articles on DEV Community by Asish Kumar Yeleti (@noiseless47). https://dev.to/noiseless47 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2881604%2Fec1e024c-1f79-4ac1-9f4c-f2224938fbb0.jpeg https://dev.to/noiseless47 en Asish Kumar Yeleti Tue, 18 Feb 2025 14:53:35 +0000 https://dev.to/noiseless47/building-a-modern-portfolio-with-nextjs-13-tailwind-css-and-framer-motion-12ei https://dev.to/noiseless47/building-a-modern-portfolio-with-nextjs-13-tailwind-css-and-framer-motion-12ei <p>Hey everyone! I recently built my portfolio website (4sish.vercel.app) using modern web technologies, and I wanted to share my experience.</p> <p><strong>Tech Stack:</strong></p> <ul> <li>Next.js 13 with App Router</li> <li>TypeScript for type safety</li> <li>Tailwind CSS for styling</li> <li>Framer Motion for animations</li> <li>Geist Font for typography</li> </ul> <p><strong>Key Features:</strong></p> <ol> <li> <p>Dark/Light Mode</p> <ul> <li>Smooth theme transitions</li> <li>System preference detection</li> <li>Persistent theme selection</li> </ul> </li> <li> <p>Responsive Design</p> <ul> <li>Mobile-first approach</li> <li>Clean, minimal interface</li> <li>Smooth animations</li> </ul> </li> <li> <p>Social Integration</p> <ul> <li>GitHub profile</li> <li>LinkedIn connection</li> <li>LeetCode stats</li> <li>Dev.to blog integration</li> </ul> </li> <li> <p>Performance</p> <ul> <li>Fast page loads</li> <li>Optimized for mobile</li> <li>SEO friendly</li> </ul> </li> </ol> <p>What I Learned:</p> <ol> <li>Next.js App Router is a game-changer for routing and layouts</li> <li>Framer Motion makes complex animations simple</li> <li>Tailwind CSS speeds up development significantly</li> <li>TypeScript catches errors before they happen</li> </ol> <p>Challenges I Faced:</p> <ol> <li>Making the dark mode transition smooth</li> <li>Ensuring mobile responsiveness</li> <li>Optimizing animations for performance</li> <li>Implementing a clean, minimal design</li> </ol> <p>Future Plans:</p> <ol> <li>Adding more blog content</li> <li>Implementing project filters</li> <li>Adding more interactive elements</li> <li>Improving accessibility</li> </ol> <p>Check out the live site at 4sish.vercel.app and let me know what you think!</p> <p>GitHub: github.com/noiseless47<br> LinkedIn: linkedin.com/in/asishkumaryeleti</p> <h1> webdev #nextjs #typescript #portfolio </h1> webdev javascript productivity