Professional Web Page - @Ricardo Ferreira

This is a real attempt to show my career development as a software engineer, facing a lot of different projects, most of which turned out to be very successful products and helped companies I worked for increase their profitability and productivity. Here are some of the technologies I have dealt with

• ReactJS, HTML, CSS & JavaScript
• Java & Spring Boot & Maven
• PHP, MySQL & Apache/Nginx
• MongoDB
• Zabbix & Nagios
• ElasticSearch, Prometheus, Grafana
• Jenkins & SonarQube
• Drivers for SCSI mass storage devices
• Networking, DNS, Firewall
• OpenBSD & FreeBSD & Linux
• etc...

Table of contents

• Professional Web Page - @Ricardo Ferreira
• Table of contents
• Overview
• Screenshot
• Links
• Built with
• How I did it
• Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

These web pages were coded using ReactJS exploring hooks such as useState, useLocation, useEffect:

• src|
  • App.tsx
  • assets|
  • components|
    • Contact
    • Footer
    • Header
    • Project
    • Skill
    • welcome
  • routes
    • Contacts
    • Feet
    • Home
    • Intro
    • Projects
    • Skills
  • utils
  • App.tsx
  • index.css
  • main.tsx
  • index.html
  • tsconfig.json
  • tsconfig.node.json
  • vite.config.js
  • yarn.lock
• public|

Screenshot

Links

• Live Site URL: [https://www.ferreiras.dev.br]

Built with

How I did it

import  './styles.css';
import CountUp from 'react-countup';
import { Link } from 'react-router-dom';
import Zoom from 'react-reveal/Zoom';

import skillLogo from '../../assets/svg/mortarboard.svg';
import contactLogo from '../../assets/svg/whatsapp.svg';
import codeLogo from '../../assets/svg/tools.svg';
import history from '../../assets/svg/txt.svg';

export default function Signature() {
    return (
        <section>
            <Zoom>
                <div id="signature">
                    <Link to='/history'><img data-toggle="tooltip" data-placement="top" data-animation="" title="History" src={history} alt="History" /></Link>
                    <Link to='/skills'><img data-toggle="tooltip" data-placement="top" data-animation="" title="Skills" src={skillLogo} alt="Skills" /></Link>
                    <Link to='/projects'><img data-toggle="tooltip" data-placement="top" data-animation="" title="Projects" src={codeLogo} alt="Projects" /></Link>
                    <Link to='/contacts'><img data-toggle="tooltip" data-placement="top" data-animation="" title="Contact" src={contactLogo} alt="Contact" /></Link>
                </div>
                <div>
                    <p id="sign-rights">
                        <CountUp separator="" delay={2} end={2024} />
                    </p>
                    <p id="sign-rights">&copy;Ricardo Ferreira - All rights reserved</p>
                </div>
            </Zoom>
        </section>

    )

}

Continued development

• Use SMACSS methodology

Useful resources

• [https://reactjs.org] React lets you build user interfaces out of individual pieces called components!.
• [https://yarnpkg.org/] Open-source package manager used to manage dependencies in JavaScript.
• [https://vitejs.dev/guide/] Build tool that aims to provide a faster and leaner development experience for modern web projects.

Author

• Website - [https://ferreiras.dev.br]

Acknowledgments