devdouglasgfs/portfolio

Repo of my portfolio made mainly with Nuxt, Vue and Tailwind

Douglas S. Silva - Portfólio

It is the repository of my portfolio website and contains information about its structure, features and information.

---

🚀 Technologies and Tools

I used the following technologies and tools:

• Nuxt.js;
• Vue;
• Tailwind;
• TypeScript;
• Figma(design);
• Netlify(for deploy)

🔖 Contents

• About Me;
• Projects;
• Certifications;
• Contacts;
• Skills

portfolio's Issues

Fix: Replace the Nuxt icon with the Vite icon in the Vulcan Novels project data.

Replace

const projectsList: Array<projectDTO> = [{
    title: "Vulcan Novels",
    started: "03/03/2024",
    description: "Um site dedicado a leitura de novels(Novelas traduzido para o Português) autorais para a Vulcan Scanlator. Tem sua prototipagem feita no Figma e está sendo desenvolvido usando principalmente Vite, Vue e Tailwind no front-end.",
    status: "in progress",
    image: "/assets/images/projects/vulcan-novels.webp",
    tecnologies: [{
        title: "Vue",
        icon: "uil:vuejs"
    }, {
        title: "Nuxtjs",
        icon: "mdi:nuxt"
    }, {
        title: "TypeScript",
        icon: "mdi:language-typescript"
    }, {
        title: "Vitest",
        icon: "simple-icons:vitest"
    }, {
        title: "Tailwind",
        icon: "mdi:tailwind"
    },{
        title: "Figma",
        icon: "carbon:logo-figma"
    }]
}, {
/*...*/

With

const projectsList: Array<projectDTO> = [{
    title: "Vulcan Novels",
    started: "03/03/2024",
    description: "Um site dedicado a leitura de novels(Novelas traduzido para o Português) autorais para a Vulcan Scanlator. Tem sua prototipagem feita no Figma e está sendo desenvolvido usando principalmente Vite, Vue e Tailwind no front-end.",
    status: "in progress",
    image: "/assets/images/projects/vulcan-novels.webp",
    tecnologies: [{
        title: "Vue",
        icon: "uil:vuejs"
    }, {
        title: "Vitejs",
        icon: "simple-icons:vite"
    }, {
        title: "TypeScript",
        icon: "mdi:language-typescript"
    }, {
        title: "Vitest",
        icon: "simple-icons:vitest"
    }, {
        title: "Tailwind",
        icon: "mdi:tailwind"
    },{
        title: "Figma",
        icon: "carbon:logo-figma"
    }]
}, {
/*...*/

style: Correct spacing between elements in the Skills component

The border between elements is collapsing

Feat: Add Github stats

Add statistics using the Github API on the Front-end or Back-end

Why?

• It will add dynamic content and use an API in real time;
• Won't need to manually add details about GitHub statistics;

Style: Uniform card styling while disregarding your own hover state.

Source of error

Card.vue

<button class="... group"><!--  --></button>

Style: Move repetitive classes to a Tailwind @layer directive

What to do

Code that tends to repeat should be moved to a class that extends utility or component layers in tailwind.css.

Also consider moving arbitrary arguments used to tailwind.config.ts tokens