--- title: Building a Modern Portfolio | daily.dev description: A showcase of a modern developer portfolio built with Next.js 15.3, featuring cinematic animations powered by Framer Motion, glass morphism effects, and... canonical: https://daily.dev/posts/building-a-modern-portfolio-8p7blemkn twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Building a Modern Portfolio | daily.dev og:description: A showcase of a modern developer portfolio built with Next.js 15.3, featuring cinematic animations powered by Framer Motion, glass morphism effects, and... og:url: https://daily.dev/posts/building-a-modern-portfolio-8p7blemkn og:image: https://api.daily.dev/og/posts/8p7BLEMkN.png og:image:alt: Building a Modern Portfolio og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Building a Modern Portfolio **[Dev Squad](https://daily.dev/sources/devsquad)** · [@lightify97](https://daily.dev/lightify97) · 2 min read · 484 upvotes · 73 comments ## Summary A showcase of a modern developer portfolio built with Next.js 15.3, featuring cinematic animations powered by Framer Motion, glass morphism effects, and comprehensive sections including projects, experience, and testimonials. The portfolio demonstrates technical excellence with TypeScript, PostHog analytics integration, EmailJS contact functionality, and mobile-first responsive design with both dark and light themes. ## Content **Live Demo:** [https://mramazan.dev](https://mramazan.dev) **Source:** [Github](https://github.com/lightify97/portfolio)  ## 🚀 **Next.js Portfolio with a Unique Touch** ### ✨ **What Makes This Special** **🎬 Cinematic Animations** - Custom typewriter effects - Floating orbital elements with mathematical precision - Glass morphism effects with real-time gradient animations - Scroll-triggered animations that feel like butter **🛠️ Technical Excellence** - **Next.js 15.3** with App Router and TypeScript - **Framer Motion** for physics-based animations - **PostHog** integration for analytics (with proper feature flag implementation) - **EmailJS** for contact functionality - **Radix UI** components for accessibility **🎨 Design Philosophy** - Dark and Light themes with carefully crafted gradients - Mobile-first responsive design - Custom scrollbar styling - Geometric accent patterns ### 🔥 **Standout Features** 1. **Interactive Hero Section** - Animated background particles, orbital elements, and a gradient-shifting role banner 2. **Comprehensive Sections** - Hero, Overview, Tech Stack, Experience, Projects, Testimonials, Certifications, and Contact 3. **Performance Optimized** - Static generation, image optimization, and code splitting 4. **Developer Experience** - Clean TypeScript codebase with proper component architecture ### 🎪 **The Developer Behind It** Muhammad Ramazan - A passionate Full Stack Developer and AI enthusiast specializing in React, Next.js, and healthcare IT solutions. Top-rated on Upwork with a 91% success score. ## Community discussion Top comments from developers on daily.dev. **@b69** · 47 upvotes > everytime i read a chat gpt generated description like this one i feel assault idk **@lai0602** · 22 upvotes > The website is nice but there is only 1 issue for me: The website is VERY laggy when scrolling through areas like Technology Stack and Featured Project. I think this is because the website has lots of things to render in these areas. It would be great if you could disable the scrolling slow down effect. > > The scrolling slow down effect has been a major problem because I use trackpad on macbook to scroll. Because the trackpad already comes with a slow down animation in macos by default, navigating websites with this effect turned on will be a headache for trackpad users. **@kyoukhana** · 5 upvotes > Overkill stack for a portfolio **@amitgajare** · 4 upvotes > Superb **@deepaksharma62** · 3 upvotes > It's looking good, but there are some mis-alignments that should be taken care of and to make the ux really smooth. ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#framer-motion](https://daily.dev/tags/framer-motion), [#nextjs](https://daily.dev/tags/nextjs), [#typescript](https://daily.dev/tags/typescript), [#webdev](https://daily.dev/tags/webdev) [View this post on daily.dev](https://daily.dev/posts/building-a-modern-portfolio-8p7blemkn) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/building-a-modern-portfolio-8p7blemkn","headline":"Building a Modern Portfolio","text":"A showcase of a modern developer portfolio built with Next.js 15.3, featuring cinematic animations powered by Framer Motion, glass morphism effects, and comprehensive sections including projects, experience, and testimonials. The portfolio demonstrates technical excellence with TypeScript, PostHog analytics integration, EmailJS contact functionality, and mobile-first responsive design with both dark and light themes.","url":"https://daily.dev/posts/building-a-modern-portfolio-8p7blemkn","datePublished":"2025-05-27T19:52:01.720Z","dateModified":"2025-09-06T02:50:37.949Z","author":{"@type":"Person","name":"Muhammad Ramzan","url":"https://daily.dev/lightify97","image":"https://avatars1.githubusercontent.com/u/16276964?v=4","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":655}},"interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":484},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":73}],"comment":[{"@type":"Comment","text":"everytime i read a chat gpt generated description like this one i feel assault idk","datePublished":"2025-05-27T22:59:04.313Z","url":"https://daily.dev/posts/8p7BLEMkN#c-tnAD5dUd0","author":{"@type":"Person","name":"YCK","url":"https://daily.dev/b69","image":"https://media.daily.dev/image/upload/s--oUNFO8KZ--/f_auto/v1784902751/avatars/avatar_zw1jOJqOboFCnLykwn3cV?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":47}},{"@type":"Comment","text":"The website is nice but there is only 1 issue for me: The website is VERY laggy when scrolling through areas like Technology Stack and Featured Project. I think this is because the website has lots of things to render in these areas. It would be great if you could disable the scrolling slow down effect.\nThe scrolling slow down effect has been a major problem because I use trackpad on macbook to scroll. Because the trackpad already comes with a slow down animation in macos by default, navigating websites with this effect turned on will be a headache for trackpad users.","datePublished":"2025-05-29T09:28:22.287Z","dateModified":"2025-05-29T09:30:08.938Z","url":"https://daily.dev/posts/8p7BLEMkN#c-SA1NGfHdD","author":{"@type":"Person","name":"Jace Tang","url":"https://daily.dev/lai0602","image":"https://avatars.githubusercontent.com/u/83352569?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":22}},{"@type":"Comment","text":"Overkill stack for a portfolio","datePublished":"2025-05-29T13:10:23.308Z","url":"https://daily.dev/posts/8p7BLEMkN#c-7C2hr8BGM","author":{"@type":"Person","name":"Kevin","url":"https://daily.dev/kyoukhana","image":"https://avatars2.githubusercontent.com/u/756849?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"Superb","datePublished":"2025-05-30T10:47:03.964Z","url":"https://daily.dev/posts/8p7BLEMkN#c-dsTLWBKNF","author":{"@type":"Person","name":"Amit Gajare","url":"https://daily.dev/amitgajare","image":"https://media.daily.dev/image/upload/s--7lr6XGRA--/f_auto/v1735367756/avatars/avatar_UU1stgGJldM9pQP0QluF0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"It’s looking good, but there are some mis-alignments that should be taken care of and to make the ux really smooth.","datePublished":"2025-05-30T04:25:19.089Z","url":"https://daily.dev/posts/8p7BLEMkN#c-hCGjueZMR","author":{"@type":"Person","name":"Deepak Sharma","url":"https://daily.dev/deepaksharma62","image":"https://lh3.googleusercontent.com/a/ACg8ocLOT2iFfC0FSfca--alks9naZ5bh0fl001FCXFydFsfHigC_w=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/devsquad","name":"Dev Squad"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Dev Squad","item":"https://daily.dev/squads/devsquad"},{"@type":"ListItem","position":3,"name":"Building a Modern Portfolio"}]} ```