Skip to main content

Personal Portfolio

Personal Portfolio Project Preview Visual Studio Code Version Personal Portfolio Project Preview Figma Version

The Project​

Professional personal portfolio with glassmorphism design and bento grid layout, developed as freeCodeCamp's final certification project. A turning point that marked the completion of the first major chapter of my development journey.

Source Code​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simone Amico - freeCodeCamp Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="page-container">
        <header>
            <div class="navbar-container">

                <div class="navbar-logo">
                    <a href="/">
                        <img src="https://github.com/user-attachments/assets/e1edf115-1797-4e86-adb0-49251167cae8" alt="logo SA" class="logo" width="40px">
                    </a>
                </div>

                <nav class="navbar-navigation-link top-navbar-navigation-link" aria-label="Main Navigation">
                    <ul class="ul-list">
                        <li><a href="https://github.com/simoneamico-ux-dev/my-learning-journey/blob/main/05-survey-form/survey-form.html" class="nav-link" target="_blank" rel="noopener noreferrer">Project Survey</a></li>
                        <li><a href="https://github.com/simoneamico-ux-dev/my-learning-journey/tree/main/10-tribute-page" class="nav-link" target="_blank" rel="noopener noreferrer">Tribute Page</a></li>
                        <li><a href="https://github.com/simoneamico-ux-dev/my-learning-journey/tree/main/14-technical-documentation-page" class="nav-link" target="_blank" rel="noopener noreferrer">Technical Documentation</a></li>
                        <li><a href="https://github.com/simoneamico-ux-dev/my-learning-journey/tree/main/17-landing-page" class="nav-link" target="_blank" rel="noopener noreferrer">Landing Page</a></li>
                    </ul>
                </nav>

                <form action="https://github.com/simoneamico-ux-dev/my-learning-journey" method="get" target="_blank">
                    <button type="submit" class="navbar-button">My Learning Journey</button>
                </form>

            </div>
        </header>

        <main>
            <div class="bento-container">

                <div class="card hero-intro">
                    <div class="text-container">
                        <h1 class="hero-intro-first-text">Simone Amico</h1>
                        <h2 class="hero-intro-second-text">Future UX Engineer<br>from Turin, Italy</h2>
                    </div>
                </div>

                <a href="https://github.com/simoneamico-ux-dev" target="_blank" rel="noopener noreferrer">
                    <img src="https://github.com/user-attachments/assets/c1f32eee-594e-4a41-a219-c665214e481f" class="img-hero" alt="Simone Amico's Photo">
                </a>

                    <div class="card banner-highlights">
                        <p>PROJECTS & HIGHLIGHTS - GROWTH IN RESPONSIVE WEB DESIGN</p>
                    </div>

                <a href="https://github.com/simoneamico-ux-dev/my-learning-journey/blob/main/05-survey-form/survey-form.html" target="_blank" rel="noopener noreferrer">
                    <div class="card project-1">
                        <img src="https://github.com/user-attachments/assets/7e15f0dd-e08b-402c-b0e1-147d8843153f" alt="Project Survey Project">
                    </div>
                </a>

                <a href="https://github.com/simoneamico-ux-dev/my-learning-journey/tree/main/10-tribute-page" target="_blank" rel="noopener noreferrer">
                    <div class="card project-2">
                        <img src="https://github.com/user-attachments/assets/476c29eb-422a-48d1-a423-7134e310a7fb" alt="Tribute Page Project">
                    </div>
                </a>

                <a href="https://github.com/simoneamico-ux-dev/my-learning-journey/tree/main/14-technical-documentation-page" target="_blank" rel="noopener noreferrer">
                    <div class="card project-3">
                        <img src="https://github.com/user-attachments/assets/d82ec546-84f8-416c-a76f-6b09f0985dd4" alt="Technical Documentation Project">
                    </div>
                </a>

                <a href="https://github.com/simoneamico-ux-dev/my-learning-journey/tree/main/17-landing-page" target="_blank" rel="noopener noreferrer">
                    <div class="card project-4">
                        <img src="https://github.com/user-attachments/assets/d3d5bc6a-b62f-44b1-ad49-2a368e2b1a5f" alt="Landing Page Project">
                    </div>
                </a>

                <div class="card status-learning">
                    <div class="text-container">
                        <p class="status-learning-first-text">Ready for</p>
                        <p class="status-learning-second-text">JavaScript Algorithms<br>and Data Structures!</p>
                    </div>
                </div>

                <div class="card stats-dashboard">

                    <div class="card stats-item stats-item-1">
                        <p class="stats-item-text stats-item-text-top stats-item-1-text-1">20</p>
                        <p class="stats-item-text stats-item-text-bottom stats-item-1-text-2">FREECODECAMP<br>PROJECT</p>
                    </div>

                    <div class="card stats-item stats-item-2">
                        <p class="stats-item-text stats-item-text-top stats-item-2-text-1">+300</p>
                        <p class="stats-item-text stats-item-text-bottom stats-item-2-text-2">HOURS<br>CODING</p>
                    </div>

                    <div class="card stats-item stats-item-3">
                        <p class="stats-item-text stats-item-text-top stats-item-3-text-1">5</p>
                        <p class="stats-item-text stats-item-text-bottom stats-item-3-text-2">CERTIFICATION<br>PROJECT</p>
                    </div>
                </div>

                <div class="card credits-thanks">
                    <p>Thank's<br>FreeCodeCamp.</p>
                </div>

            </div>
        </main>

        <footer>
            <p class="footer-phrase"><a href="https://www.freecodecamp.org/">Portfolio for freeCodeCamp</a></p>

            <nav class="navbar-navigation-link bottom-navbar-navigation-link" aria-label="Main Navigation">
                <ul class="ul-list-2">
                    <li><a href="https://github.com/simoneamico-ux-dev/my-learning-journey/blob/main/05-survey-form/survey-form.html" class="nav-link" target="_blank" rel="noopener noreferrer">Project Survey</a></li>
                    <li><a href="https://github.com/simoneamico-ux-dev/my-learning-journey/tree/main/10-tribute-page" class="nav-link" target="_blank" rel="noopener noreferrer">Tribute Page</a></li>
                    <li><a href="https://github.com/simoneamico-ux-dev/my-learning-journey/tree/main/14-technical-documentation-page" class="nav-link" target="_blank" rel="noopener noreferrer">Technical Documentation</a></li>
                    <li><a href="https://github.com/simoneamico-ux-dev/my-learning-journey/tree/main/17-landing-page" class="nav-link" target="_blank" rel="noopener noreferrer">Landing Page</a></li>
                </ul>
            </nav>
        </footer>
    </div>

    <div class="rotate-message">
    <div class="rotate-card">
        <div class="emoji">🔄️</div>
        <p>Rotate for mobile preview</p>
        <p>or watch it come alive on desktop</p>
    </div>
    </div>
</div>

</div>

</div>

</body>
</html>

The Incredible Realization​

I never, ever would have imagined that what happened would happen. I feel immense joy because I still remember when I was 13, in eighth grade, creating sites with no-code platforms (Webnode) but I never would have expected to reach this point with minimal AI help from which I never copy-pasted.

The Proper Thanks​

I thank this article by Massimo Avvisati where it all started - thanks to it I learned to apply glassmorphism in CSS. I thank Breccia from whose course I learned bento grids - without him I never would have succeeded, but especially it wouldn't have occurred to me to structure the portfolio this way. I thank Claude for helping me purchase a professional domain and guiding me through DNS and things I had never seen up close. But above all I thank freeCodeCamp.

The Surprising Result​

For the first time I'm proud to showcase the Visual Studio Code version over the Figma one, because the final implementation exceeded the original prototype!

The Winning Strategy​

In this case I didn't score an own goal like in the Landing Page project. I created the Figma prototype based on what I thought I could do. As Refactoring UI teaches: if you need to add a new feature multiply by 4 the time you think is sufficient. Indeed I spent 1 full day for the Figma prototype and a full 3 days of code.

The Detailed Process​

First day: Dedicated to the Figma prototype. I created the wallpaper creatively trying to reflect freeCodeCamp's personality as much as possible but with a touch of blue because without it I noticed the glossy effect didn't work. Then I tried to adapt everything pixel perfect, always based on what Refactoring UI taught me. Second day: I thought I was at the end, in fact I had written this in the txt file of the "Progress today" folder on my desktop: "Done part of html + CSS but not complete. Probably 65% of the project. Written 460 lines of code, I'm at this stage:"

Personal Portfolio Project html and CSS but not complete version

I thought I had victory in my pocket but I was actually at 35% at most. Following days: The next two days required many more hours, first to add animations and effects that would guarantee a pleasant desktop experience and the last day the responsive which was the longest part of all.

The Error That Taught Me Everything​

I made such a serious error that I carried it to the end: defining a very specific container and consequently positions relative to it that were too specific (I had taken them all from Figma) which on one hand would have guaranteed an experience exactly as created on Figma but would have required specific media queries even for tablet and smartphone, to the point of creating multiple applications in one - something I discovered that the biggest development teams do. I then opted as with the landing page to reach 70% in 3 days and immediately start JavaScript. I can't wait!

The Technological Discoveries​

I learned so much in this project, and I also discovered:

  • How to upload a website with repository from GitHub
  • Responsively.app - amazing app that allows adding any device to test dimensions
  • Firefox Developer Edition and Safari with developer settings

The Moment of Truth​

But not only do I now have the certificate, I also have a personal domain!

What I Learned​

Advanced Design System:

  • Glassmorphism with backdrop-filter and blur effects
  • Bento Grid Layout for modern visual organization
  • CSS Variables for coherent design system
  • Professional domain setup and DNS management

Complex Responsive Design:

  • Device-specific media queries
  • Zoom properties for precise adaptation
  • Orientation handling for landscape/portrait

Animations and Interactions:

  • Hover effects with scale and shadow
  • Optimized transition timing
  • Active states for tactile feedback
  • Hover media queries (hover: hover) and (pointer: fine)

Professional Workflow:

  • Complete Figma to Code pipeline
  • GitHub repository deployment
  • Professional domain integration
  • Cross-browser testing with developer tools

The 70% Philosophy Confirmed​

I didn't think I'd finish this chapter so well. I already see things that don't work in this portfolio but I remain firm on 70%.

Ready for JavaScript!

Final Reflection​

The portfolio isn't perfect, but it represents everything I am at this moment in my journey. It's authentic, functional, and shows my growth. Above all, it gave me the confidence that I can really turn my design ideas into functional code. From a kid who tinkered with Webnode to a developer who creates his own portfolio from scratch with a personalized domain. The circle has closed, but it's also the starting point for the next chapter.

Technical Implementation Notes​

Design Integrity vs Certification Requirements The version deployed at simoneamico.com represents my original design vision with optimal visual hierarchy and proportions. The version submitted for freeCodeCamp certification required minor technical modifications (fixed navbar, ID attributes) to pass automated tests. While these changes don't affect functionality, they slightly alter the intended design proportions. I believe in maintaining design integrity while meeting technical requirements - this project demonstrates both the ability to create compelling user experiences and adapt to technical constraints when necessary.

Certification compliance: freeCodeCamp tests passed ✔️

Achievement Unlocked: freeCodeCamp Responsive Web Design Certification ✔️

Next Adventure: JavaScript Algorithms and Data Structures