Merge pull request #6 from Nacchofer31/feature/redesing-2

feature: implemented redesing

Author: Nacchofer31

assets/images/projects/randomboxd/screenshot1.png

@@ -5,7 +5,7 @@
             "logo": "assets/images/projects/sgad/sgad.jpg",
             "type": "Company - Capgemini",
             "description": "Development and maintenance of hybrid applications (Android and iOS) for the Secretaria General de Administración Digital (SGAD), such as: Dehú, FACe, Prevención Juego, Garrapata Alert, CNMC Test Velocidad, SoyFP, Ruta-E, ICA, Rapna, Mi Portafirmas, Catastro and IGME... using the Flutter hybrid development framework.",
-            "skills": "Clean Arch, Cubit, BLoC, freezed, Dio, TestFlight, GetIt, Firebase",
+            "skills": "Flutter, Clean Arch, Cubit, BLoC, freezed, Dio, TestFlight, GetIt, Firebase",
             "techLogoPath": "assets/images/skills/flutter.svg",
             "iconColor": "#02569B",
             "screenshots": [

assets/images/projects/randomboxd/screenshot2.png

@@ -2,13 +2,13 @@
     "skills": [
         {
             "name": "Android Development",
-            "description": "Kotlin, MMVM, Clean Arch, Jetpack, Compose, KMP, CMP, LiveData, Koin, RxJava, Livedata, Flows, Room, Retrofit2, Koin-test, Roboelectric, Mockito, Spotless, Jacoco",
+            "description": "Kotlin, MMVM, Clean Arch, Jetpack, Compose, KMP, CMP, LiveData, Koin, RxJava, Livedata, Flows, Room, App Functions, Retrofit2, Koin-test, Roboelectric, Mockito, Spotless, Jacoco",
             "techLogoPath": "assets/images/skills/android.svg",
             "iconColor": "#3DDC84"
         },
         {
             "name": "Flutter Development",
-            "description": "Dart, MVVM, Clean Arch, BLoC, Cubit, freezed, GetIt, RxDart, Provider, Riverpod, Flutter Hooks, Method Channels, Hive, Sqflite, graphql_flutter, Mocktail, Dio, Melos, flutter_localizations",
+            "description": "Dart, MVVM, Clean Arch, BLoC, Cubit, freezed, GetIt, RxDart, Provider, Riverpod, llama_dart, flutter_mcp, Method Channels, Hive, Sqflite, graphql_flutter, Mocktail, Dio, Melos, flutter_localizations",
             "techLogoPath": "assets/images/skills/flutter.svg",
             "iconColor": "#02569B"
         },
@@ -26,7 +26,7 @@
         },
         {
             "name": "GenAI",
-            "description": "Cursor, Copilot, Gemini, Ollama, LLMs, Qwen, Deepseek, ChatGPT, Claude, Anthropic, AWS Bedrock, Amazon Q",
+            "description": "Agents, MCP, RAG, Prompt Engineering, SDD, Engram, Amazon Bedrock, Vertex AI, Amazon Q, Claude Code, Cursor, Copilot, Ollama",
             "techLogoPath": "assets/images/skills/gen-ai.svg",
             "iconColor": "#6366F1"
         },

assets/images/projects/randomboxd/screenshot3.png

@@ -5,4 +5,5 @@ export 'controller.dart';
 export 'provider.dart';
 export 'themed_pattern_background.dart';
 export 'widgets/portfolio_bullet_point.dart';
+export 'widgets/portfolio_tag.dart';
 export 'widgets/social_icon_button.dart';

assets/raw/projects.json

@@ -11,22 +11,38 @@ class PortfolioBulletPoint extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.only(bottom: 12),
+      padding: const EdgeInsets.only(bottom: 16),
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          Icon(
-            Icons.check_circle_outline,
-            size: 20,
-            color: accentColor,
+          Container(
+            padding: const EdgeInsets.all(8),
+            decoration: BoxDecoration(
+              color: accentColor.withValues(alpha: 0.15),
+              borderRadius: BorderRadius.circular(10),
+            ),
+            child: Icon(
+              Icons.check,
+              size: 18,
+              color: Theme.of(context).brightness == Brightness.dark
+                  ? Colors.white70
+                  : accentColor,
+            ),
           ),
-          const SizedBox(width: 12),
+          const SizedBox(width: 16),
           Expanded(
-            child: Text(
-              text,
-              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                    color: bodyTextColor(context).withValues(alpha: 0.8),
-                  ),
+            child: Container(
+              constraints: const BoxConstraints(minHeight: 34),
+              alignment: AlignmentDirectional.centerStart,
+              child: Text(
+                text,
+                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                      height: 1.7,
+                      fontSize: 16,
+                      color: bodyTextColor(context),
+                      letterSpacing: 0.2,
+                    ),
+              ),
             ),
           ),
         ],

assets/raw/skills.json

@@ -0,0 +1,50 @@
+import 'package:nacchofer31_portfolio/portfolio.dart';
+
+class PortfolioTag extends StatelessWidget {
+  const PortfolioTag({
+    super.key,
+    required this.label,
+    this.color,
+    this.icon,
+  });
+
+  final String label;
+  final Color? color;
+  final IconData? icon;
+
+  @override
+  Widget build(BuildContext context) {
+    final tagColor = color ?? accentColor;
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
+      decoration: BoxDecoration(
+        color: tagColor.withValues(alpha: 0.12),
+        borderRadius: BorderRadius.circular(8),
+        border: Border.all(
+          color: tagColor.withValues(alpha: 0.35),
+        ),
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (icon != null) ...[
+            Icon(
+              icon,
+              size: 14,
+              color: bodyTextColor(context).withValues(alpha: 0.7),
+            ),
+            const SizedBox(width: 5),
+          ],
+          Text(
+            label,
+            style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                  fontSize: 12,
+                  fontWeight: FontWeight.w500,
+                  color: bodyTextColor(context),
+                ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/base/base.dart

@@ -2,7 +2,7 @@ import 'package:flutter_svg/svg.dart';
 import 'package:nacchofer31_portfolio/portfolio.dart';
 import 'package:url_launcher/url_launcher.dart';
 
-class SocialIconButton extends StatelessWidget {
+class SocialIconButton extends StatefulWidget {
   const SocialIconButton({
     super.key,
     required this.iconPath,
@@ -18,28 +18,41 @@ class SocialIconButton extends StatelessWidget {
   final double size;
   final double padding;
 
+  @override
+  State<SocialIconButton> createState() => _SocialIconButtonState();
+}
+
+class _SocialIconButtonState extends State<SocialIconButton> {
+  bool _isHovered = false;
+
   @override
   Widget build(BuildContext context) {
+    final color = brandDomainColor(context);
     return Padding(
       padding: const EdgeInsets.only(right: 8),
       child: Tooltip(
-        message: tooltip ?? (url.contains('linkedin') ? 'LinkedIn' : 'GitHub'),
+        message: widget.tooltip ??
+            (widget.url.contains('linkedin') ? 'LinkedIn' : 'GitHub'),
         child: InkWell(
-          onTap: () => launchUrl(Uri.parse(url)),
+          onTap: () => launchUrl(Uri.parse(widget.url)),
+          onHover: (hovered) => setState(() => _isHovered = hovered),
           borderRadius: BorderRadius.circular(12),
-          child: Container(
-            padding: EdgeInsets.all(padding),
+          hoverColor: Colors.transparent,
+          child: AnimatedContainer(
+            duration: const Duration(milliseconds: 150),
+            padding: EdgeInsets.all(widget.padding),
             decoration: BoxDecoration(
+              color: color.withValues(alpha: _isHovered ? 0.25 : 0.12),
               border: Border.all(
-                color: accentColor.withValues(alpha: 0.3),
+                color: color.withValues(alpha: _isHovered ? 0.8 : 0.35),
               ),
               borderRadius: BorderRadius.circular(12),
             ),
             child: SvgPicture.asset(
-              iconPath,
-              height: size,
-              width: size,
-              colorFilter: ColorFilter.mode(accentColor, BlendMode.srcIn),
+              widget.iconPath,
+              height: widget.size,
+              width: widget.size,
+              colorFilter: ColorFilter.mode(color, BlendMode.srcIn),
             ),
           ),
         ),

lib/base/widgets/portfolio_bullet_point.dart

@@ -10,6 +10,13 @@ class AboutCard extends StatelessWidget {
       (cubit) => cubit.state.homeModel.aboutModel,
     );
 
+    final highlights = aboutModel.description
+        .split('\n')
+        .map((line) => line.trim())
+        .where((line) => line.isNotEmpty)
+        .map((line) => line.startsWith('-') ? line.substring(1).trim() : line)
+        .toList();
+
     return Card(
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(24),
@@ -33,16 +40,9 @@ class AboutCard extends StatelessWidget {
             SizedBox(height: Responsive.maxSmallSpacing(context)),
             const AccentWidget(),
             SizedBox(height: Responsive.maxLargeSpacing(context)),
-            Text(
-              aboutModel.description,
-              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                    height: 1.8,
-                    fontSize: 16,
-                    color: bodyTextColor(context),
-                    letterSpacing: 0.2,
-                  ),
-            ),
-            const SizedBox(height: 48),
+            ...highlights
+                .map((highlight) => PortfolioBulletPoint(text: highlight)),
+            const SizedBox(height: 32),
             Wrap(
               spacing: 16,
               runSpacing: 16,