Building a Modern Tech Portfolio: Where Math Meets Code

Building a Modern Tech Portfolio: Where Math Meets Code

Welcome to my newly redesigned tech portfolio! This post marks an important milestone in my journey from pure mathematics to the exciting intersection of mathematical thinking and software engineering.

The Transformation

What started as a traditional mathematics portfolio has evolved into something much more comprehensive—a showcase of how mathematical rigor enhances software development and vice versa.

Key Changes Made

🎨 Modern Design System

• Implemented a sleek, responsive design with dark/light theme support
• Added interactive animations and smooth transitions
• Created a cohesive visual identity that reflects both technical precision and creative flair

💻 Tech Stack Integration

• Comprehensive technology showcase featuring my primary languages: Python, C++, Java, JavaScript/TypeScript
• Framework expertise in React, Next.js, Jetpack Compose, and more
• Development tools and methodologies that drive my workflow

🚀 Project Portfolio

• Featured projects that demonstrate real-world application of mathematical concepts
• From 3D mathematical visualizations to intelligent tutoring bots
• Each project tells a story of problem-solving and innovation

The Philosophy Behind the Design

“Logic-first, aesthetics-always” — whether I’m crafting an algorithm or designing a user interface.

This principle guided every design decision:

• Mathematical Precision: Clean, structured layouts that reflect logical thinking
• Modern Aesthetics: Beautiful animations and visual elements that enhance user experience
• Functional Beauty: Every design element serves a purpose while looking great

Technical Implementation

The portfolio leverages several modern technologies:

// Example: Typing animation that showcases my diverse skills
const phrases = [
    'Mathematician | Developer | Poet',
    'I Build Systems With Soul ✨',
    'Theory Meets Practice In My Lab',
    'Jetpack Compose + C++ + Python Wizardry'
];

Code Block Features Demo

The new portfolio includes modern code blocks with syntax highlighting and copy functionality. Here are examples showcasing different programming languages:

Python - Mathematical Modeling:

import numpy as np
import matplotlib.pyplot as plt

def fibonacci_spiral(n_points=500):
    """Generate Fibonacci spiral coordinates using golden ratio"""
    phi = (1 + np.sqrt(5)) / 2  # Golden ratio
    theta = np.linspace(0, 4*np.pi, n_points)
    
    # Fibonacci spiral equation
    r = phi ** (theta / (np.pi/2))
    
    x = r * np.cos(theta)
    y = r * np.sin(theta)
    
    return x, y

# Visualize the mathematical beauty
x, y = fibonacci_spiral()
plt.plot(x, y, color='gold', linewidth=2)
plt.title('Fibonacci Spiral: Where Math Meets Art')

C++ - Performance Critical Code:

#include <vector>
#include <algorithm>
#include <numeric>

template<typename T>
class MathematicalVector {
private:
    std::vector<T> data;
    
public:
    MathematicalVector(std::initializer_list<T> init) : data(init) {}
    
    // Dot product with SIMD optimization potential
    T dotProduct(const MathematicalVector<T>& other) const {
        return std::inner_product(
            data.begin(), data.end(),
            other.data.begin(), T{0}
        );
    }
    
    // Vector magnitude using mathematical precision
    double magnitude() const {
        T sum_of_squares = std::accumulate(
            data.begin(), data.end(), T{0},
            [](T acc, T val) { return acc + val * val; }
        );
        return std::sqrt(static_cast<double>(sum_of_squares));
    }
};

CSS - Modern Styling System:

/* Custom properties for mathematical precision in design */
:root {
    --golden-ratio: 1.618;
    --primary-hue: 240;
    --saturation: 100%;
    --base-size: 1rem;
    
    /* Mathematically derived spacing scale */
    --space-xs: calc(var(--base-size) / var(--golden-ratio));
    --space-sm: var(--base-size);
    --space-md: calc(var(--base-size) * var(--golden-ratio));
    --space-lg: calc(var(--space-md) * var(--golden-ratio));
}

.mathematical-card {
    /* Perfect proportions using golden ratio */
    width: calc(300px * var(--golden-ratio));
    height: 300px;
    
    background: hsl(
        var(--primary-hue),
        var(--saturation),
        calc(50% + 10% * sin(var(--animation-progress, 0)))
    );
    
    border-radius: var(--space-sm);
    transform: perspective(1000px) rotateY(calc(var(--mouse-x, 0) * 0.1deg));
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

JSON - Configuration & Data:

{
  "portfolio": {
    "name": "Atrajit Singh Tech Portfolio",
    "version": "2.0.0",
    "technologies": {
      "frontend": ["React", "Next.js", "TypeScript", "Tailwind CSS"],
      "backend": ["Python", "Node.js", "FastAPI", "Express"],
      "mobile": ["Jetpack Compose", "React Native"],
      "desktop": ["C++", "Qt", "Electron"],
      "data": ["NumPy", "Pandas", "TensorFlow", "PyTorch"],
      "databases": ["PostgreSQL", "MongoDB", "Redis"],
      "tools": ["Git", "Docker", "VS Code", "Figma"]
    },
    "mathematics": {
      "specializations": [
        "Algorithmic Optimization",
        "Statistical Modeling",
        "Computational Geometry",
        "Mathematical Visualization"
      ],
      "applications": [
        "Machine Learning Algorithms",
        "Computer Graphics",
        "Financial Modeling",
        "Signal Processing"
      ]
    }
  }
}

Interactive Features

Each code block above includes:

• 🎨 Language-specific syntax highlighting with color-coded tokens
• 📋 One-click copy functionality with animated feedback
• 🔢 Line numbers for longer code snippets
• 💻 Terminal-style header with language indicators
• 📱 Responsive design that works on all devices

How to Use the Code Blocks

1. Copy Code: Click the “Copy” button in the top-right corner of any code block
2. Visual Feedback: The button animates and shows “Copied!” confirmation
3. Language Recognition: Each block automatically detects and highlights the programming language
4. Responsive: Code blocks adapt perfectly to mobile and desktop screens

Try it yourself! Click the copy button on any of the code examples above to see the smooth animation and instant clipboard functionality.

Technical Implementation Behind the Scenes

The modern code block system uses:

// Auto-initialization when page loads
document.addEventListener('DOMContentLoaded', function() {
    initializeCodeBlocks();
});

// Transform basic markdown code blocks into modern UI
function initializeCodeBlocks() {
    const codeBlocks = document.querySelectorAll('pre code');
    
    codeBlocks.forEach((codeElement, index) => {
        // Create modern container with header
        const container = createModernCodeBlock(codeElement);
        
        // Add copy functionality
        addCopyButton(container, codeElement.textContent);
        
        // Apply syntax highlighting
        applySyntaxHighlighting(codeElement);
    });
}

This ensures every code snippet becomes an interactive, beautifully styled component that enhances the reading experience.

Key Features:

• Responsive Design: Optimized for all devices and screen sizes
• Performance: Fast loading times with optimized assets
• Accessibility: Inclusive design that works for everyone
• SEO Optimized: Structured for search engine visibility

The Mathematics-Technology Connection

My background in mathematics provides unique advantages in software development:

Algorithmic Thinking

Mathematical training in proof techniques and logical reasoning directly translates to writing efficient, bug-free code.

Problem Decomposition

Breaking down complex mathematical problems mirrors the process of software architecture design.

Optimization Mindset

Mathematical optimization principles apply beautifully to code performance and user experience design.

What’s Next?

This portfolio is more than just a showcase—it’s a living document of my growth and exploration. Future additions will include:

• Interactive Demos: Live examples of my mathematical visualizations
• Technical Deep Dives: Blog posts exploring the intersection of math and code
• Open Source Contributions: Sharing tools and libraries with the community
• Learning Journey: Documenting my exploration of new technologies

Technologies Used in This Portfolio

• Jekyll: Static site generator for fast, secure hosting
• Modern CSS: Custom properties, grid layouts, and animations
• Vanilla JavaScript: Lightweight interactions and animations
• GitHub Pages: Reliable, fast hosting with CI/CD integration

Reflection

This transformation represents more than a design update—it’s a reflection of my evolution as a technologist who happens to love mathematics. Every equation has its place, but so does every line of code.

The future lies in bridging these worlds, creating solutions that are both mathematically sound and technologically elegant.

---

Ready to explore? Check out my tech stack to see the tools I use, or dive into my projects to see these principles in action.

Have ideas for collaboration or just want to discuss the beautiful intersection of math and technology? Let’s connect!