Creating a personal portfolio is more than just developing a website — it’s about building a digital identity. As someone deeply passionate about Artificial Intelligence, web development, and automation, I wanted my website to represent my personality and my vision of technology — sleek, animated, futuristic, and intelligently connected.
I am Anugrah Tripathi, an AI enthusiast, web developer, and BCA student with a growing interest in artificial intelligence, machine learning, and web technologies. My goal with this portfolio website was to craft a unique space that not only introduces who I am but also demonstrates what I can build. Every section, every animation, and even the email workflow behind the contact form has been thoughtfully designed to showcase innovation, creativity, and logic — the very principles that drive me.
This is the story of how I designed and developed my dark-themed, blue-neon, animated portfolio website, integrated with Make.com automation for real-time communication, and built an online identity that truly reflects my technical and creative potential.
The Concept: Blending Technology with Personality
From the very beginning, I didn’t want my portfolio to be just another simple scrollable webpage with a few sections. I envisioned something immersive — a website that feels alive, where every movement and glow speaks the language of modern technology.
The theme was decided early: dark mode with blue neon gradients, glowing glassmorphism buttons, and 3D parallax effects. The dark theme represents depth and focus, while the neon accents add that futuristic glow of intelligence and innovation.
My inspiration came from modern AI dashboards, futuristic operating systems, and cinematic sci-fi user interfaces — designs that merge technology with emotion. I wanted every visitor to feel like they were entering a digital realm — my realm — where AI, design, and interactivity come together.
Technical Blueprint: The Prompt that Guided the Vision
Before development, I wrote a detailed design and animation prompt to guide every stage of building:
“Design a highly animated dark-themed portfolio website for Anugrah Tripathi, an AI enthusiast, web developer, and BCA student. The layout, section spacing, and color palette must look exactly like the attached reference image — a sleek, professional aesthetic with blue neon gradients, glowing accents, glassmorphism buttons, and 3D parallax background animation.”
This prompt became the foundation of my design logic. Every animation, interaction, and transition was carefully thought out to match this futuristic aesthetic. I combined GSAP , Framer Motion , and Lottie animations for smooth entry effects, scroll-triggered movements, and cursor-follow lighting.
The website features fluid transitions, responsive layouts, and subtle parallax backgrounds that shift with the cursor movement, creating a sense of depth and dynamism.
The Structure: Five Key Sections, One Seamless Experience
1. The Hero Section — The First Impression
The first few seconds of visiting any website are crucial — it’s where design meets storytelling. My hero section begins with a bold, animated introduction:
“Hey! I’m Anugrah Tripathi — AI Enthusiast, Developer & Innovator.”
This line appears through animated typing text, symbolizing creativity in motion. Behind it, floating particle effects drift slowly across a dark gradient sky, illuminated by subtle neon light reflections.
Each text element enters the screen with motion-reveal effects, giving the appearance of a cinematic title sequence. I used GSAP timelines to control timing precision, ensuring the animations feel organic — not mechanical. The glowing borders around buttons pulse slightly, while magnetic hover effects follow the cursor’s gravity, inviting interaction.
The result is an opening section that captures attention immediately, sets the tone for the rest of the site, and introduces me as a developer who thinks in design and builds with emotion.
2. The About Me Section — My Story in Motion
The second section brings personality into the interface. It features a short, dynamically presented paragraph derived from my resume:
“I am a BCA student with a deep passion for artificial intelligence and modern web technologies. I love building intelligent tools, exploring automation, and coding in Python, C++, HTML, and CSS to create innovative digital experiences.”
This section uses scroll-triggered animations that make each line fade up smoothly into view as users scroll. Alongside this, I included animated counters that display real-time numerical growth for:
Projects Completed
Skills Mastered
Experience (Years)
These counters are visually engaging, glowing in synchronization with the website’s theme and adding a sense of achievement and progress.
By merging storytelling with interactivity, this section doesn’t just describe who I am — it visually demonstrates growth, consistency, and drive.
3. Projects Section — Creativity Meets Functionality
The projects section acts as the showcase of my skills and imagination. I featured four major works that define my journey so far:
Jarvis AI Assistant – A voice-based assistant designed with Python and AI libraries, capable of executing tasks and responding to commands.
Foodie Heaven – A food-ordering web app with real-time menu updates and cart features.
Tic Tac Toe – A fun, interactive game developed using Python and GUI frameworks.
Suggestion Maker – A smart recommendation tool that provides context-based ideas and feedback.
Each project is represented by a card with glowing outlines and hover-scale animations. When hovered, the cards slightly lift (3D tilt) and emit a blue luminescent border. The transition between projects is controlled with Framer Motion , giving a sliding flow effect.
This section proves that I’m not just a designer but also a problem-solver who codes with logic, precision, and creativity.
4. Services Section — What I Offer
Every professional portfolio must express value — what can I provide to others? My services section presents four major domains where I excel:
AI Automation – Creating smart systems that automate workflows.
Web Design – Crafting visually appealing, responsive, and dynamic websites.
Python Development – Building AI tools, backend systems, and data-driven projects.
UI/UX Design – Designing interfaces that are intuitive, elegant, and human-centric.
Each card in this section reacts interactively — tilting or bouncing slightly when hovered to feel responsive and alive. The icons glow and rotate subtly, creating an engaging user experience.
The typography here uses gradient flicker effects , adding energy and vibrance to the titles. The animation balance ensures the site remains professional yet visually exciting.
5. Contact Section — The Intelligent Connection
One of the highlights of my website is the smart contact form — not only beautifully designed but also fully automated using Make.com integration .
The contact section includes fields for Name, Email, and Message, along with glowing icons for LinkedIn, Gmail, and GitHub, each rotating gently when hovered. The glassmorphism input fields and gradient borders maintain the futuristic consistency of the site.
But what makes this section stand out is the automation flow I built behind it.
Automation Integration: Make.com and Email Workflow
Instead of using basic form submissions, I connected my portfolio’s contact form to Make.com using a webhook module.
Here’s how it works:
When someone fills out the contact form, their Name, Email, and Message are instantly sent to a Webhook endpoint created in Make.com.
The webhook triggers a workflow that automatically connects with the Email module.
The system first sends all details directly to my Gmail account, ensuring I instantly receive every message.
Then, using conditional routing, it sends a confirmation email back to the person who submitted the form — acknowledging receipt and thanking them for reaching out.
This creates a two-way communication bridge between my portfolio visitors and me.
The integration symbolizes how automation can make digital interactions seamless and human-like. It’s not just a form — it’s a demonstration of how I combine web development with AI automation to create smarter solution.
Animation Frameworks and Visual Enhancements
To achieve the smooth, futuristic animation style, I integrated several cutting-edge animation libraries and effects:
GSAP (GreenSock Animation Platform): For precise control of entrance animations, scroll-based triggers, and dynamic element transformations.
Framer Motion: For component-based animations and layout transitions, especially for project and service cards.
Lottie Animations: For subtle micro-animations that loop efficiently without compromising performance.
Parallax.js & Three.js (optional use): To create background depth and floating 3D visual effects.
Additionally, I used cursor-follow lighting and magnetic button effects , which react to the cursor’s gravity — making users feel like the website responds intelligently to their presence.
Every section transitions smoothly with fade-ups, slides, and gradient morphing, maintaining a cinematic experience throughout.
Responsiveness was also a priority — the entire website scales beautifully across devices, ensuring mobile users enjoy the same immersive feel as desktop visitors.
When I ran a PageSpeed Insights audit for my portfolio (mobile view), I discovered that the tool currently has no real-world speed data for my site. This doesn’t reflect negatively on the project—in fact, it indicates that the site is still fresh and hasn’t yet been measured by Chrome’s public experience database. However, it also acts as a reminder: performance tuning (image optimization, lazy loading, CSS/JS code splitting) must be a continuous part of my development process. Even a sleek, animated, visually rich site must remain fast, lightweight, and efficient on mobile devices, so I’ve committed to iterative performance audits and refinements as I iterate further.
Conclusion
Building this portfolio website has been more than a technical project — it’s been a journey of creativity, learning, and self-expression. From designing a visually immersive dark-themed interface to integrating Make.com for automated communication, every element reflects my passion for combining AI, design, and development into one cohesive digital identity. The animations, responsiveness, and automation together represent my belief that technology should not only function — it should feel alive. While the PageSpeed report reminds me that optimization is an ongoing process, it also reinforces the value of balance between performance and aesthetics . This project stands as a testament to who I am today — an AI-driven innovator, a web developer, and a learner constantly evolving to build smarter, faster, and more meaningful digital experiences.