Skip to content

Instantly share code, notes, and snippets.

@TidbitsJS

TidbitsJS/index.css

Last active January 29, 2025 07:53
Show Gist options
  • Save TidbitsJS/47b674e5183ab35b6663ece80ee1cdd9 to your computer and use it in GitHub Desktop.
Save TidbitsJS/47b674e5183ab35b6663ece80ee1cdd9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. TidbitsJS revised this gist Nov 9, 2023. 1 changed file with 228 additions and 0 deletions.
    228 changes: 228 additions & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,228 @@
    import { meta, shopify, starbucks, tesla } from "../assets/images";
    import {
    car,
    contact,
    css,
    estate,
    express,
    git,
    github,
    html,
    javascript,
    linkedin,
    mongodb,
    motion,
    mui,
    nextjs,
    nodejs,
    pricewise,
    react,
    redux,
    sass,
    snapgram,
    summiz,
    tailwindcss,
    threads,
    typescript
    } from "../assets/icons";

    export const skills = [
    {
    imageUrl: css,
    name: "CSS",
    type: "Frontend",
    },
    {
    imageUrl: express,
    name: "Express",
    type: "Backend",
    },
    {
    imageUrl: git,
    name: "Git",
    type: "Version Control",
    },
    {
    imageUrl: github,
    name: "GitHub",
    type: "Version Control",
    },
    {
    imageUrl: html,
    name: "HTML",
    type: "Frontend",
    },
    {
    imageUrl: javascript,
    name: "JavaScript",
    type: "Frontend",
    },
    {
    imageUrl: mongodb,
    name: "MongoDB",
    type: "Database",
    },
    {
    imageUrl: motion,
    name: "Motion",
    type: "Animation",
    },
    {
    imageUrl: mui,
    name: "Material-UI",
    type: "Frontend",
    },
    {
    imageUrl: nextjs,
    name: "Next.js",
    type: "Frontend",
    },
    {
    imageUrl: nodejs,
    name: "Node.js",
    type: "Backend",
    },
    {
    imageUrl: react,
    name: "React",
    type: "Frontend",
    },
    {
    imageUrl: redux,
    name: "Redux",
    type: "State Management",
    },
    {
    imageUrl: sass,
    name: "Sass",
    type: "Frontend",
    },
    {
    imageUrl: tailwindcss,
    name: "Tailwind CSS",
    type: "Frontend",
    },
    {
    imageUrl: typescript,
    name: "TypeScript",
    type: "Frontend",
    }
    ];

    export const experiences = [
    {
    title: "React.js Developer",
    company_name: "Starbucks",
    icon: starbucks,
    iconBg: "#accbe1",
    date: "March 2020 - April 2021",
    points: [
    "Developing and maintaining web applications using React.js and other related technologies.",
    "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
    "Implementing responsive design and ensuring cross-browser compatibility.",
    "Participating in code reviews and providing constructive feedback to other developers.",
    ],
    },
    {
    title: "React Native Developer",
    company_name: "Tesla",
    icon: tesla,
    iconBg: "#fbc3bc",
    date: "Jan 2021 - Feb 2022",
    points: [
    "Developing and maintaining web applications using React.js and other related technologies.",
    "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
    "Implementing responsive design and ensuring cross-browser compatibility.",
    "Participating in code reviews and providing constructive feedback to other developers.",
    ],
    },
    {
    title: "Web Developer",
    company_name: "Shopify",
    icon: shopify,
    iconBg: "#b7e4c7",
    date: "Jan 2022 - Jan 2023",
    points: [
    "Developing and maintaining web applications using React.js and other related technologies.",
    "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
    "Implementing responsive design and ensuring cross-browser compatibility.",
    "Participating in code reviews and providing constructive feedback to other developers.",
    ],
    },
    {
    title: "Full stack Developer",
    company_name: "Meta",
    icon: meta,
    iconBg: "#a2d2ff",
    date: "Jan 2023 - Present",
    points: [
    "Developing and maintaining web applications using React.js and other related technologies.",
    "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
    "Implementing responsive design and ensuring cross-browser compatibility.",
    "Participating in code reviews and providing constructive feedback to other developers.",
    ],
    },
    ];

    export const socialLinks = [
    {
    name: 'Contact',
    iconUrl: contact,
    link: '/contact',
    },
    {
    name: 'GitHub',
    iconUrl: github,
    link: 'https://github.com/YourGitHubUsername',
    },
    {
    name: 'LinkedIn',
    iconUrl: linkedin,
    link: 'https://www.linkedin.com/in/YourLinkedInUsername',
    }
    ];

    export const projects = [
    {
    iconUrl: pricewise,
    theme: 'btn-back-red',
    name: 'Amazon Price Tracker',
    description: 'Developed a web application that tracks and notifies users of price changes for products on Amazon, helping users find the best deals.',
    link: 'https://github.com/adrianhajdin/pricewise',
    },
    {
    iconUrl: threads,
    theme: 'btn-back-green',
    name: 'Full Stack Threads Clone',
    description: 'Created a full-stack replica of the popular discussion platform "Threads," enabling users to post and engage in threaded conversations.',
    link: 'https://github.com/adrianhajdin/threads',
    },
    {
    iconUrl: car,
    theme: 'btn-back-blue',
    name: 'Car Finding App',
    description: 'Designed and built a mobile app for finding and comparing cars on the market, streamlining the car-buying process.',
    link: 'https://github.com/adrianhajdin/project_next13_car_showcase',
    },
    {
    iconUrl: snapgram,
    theme: 'btn-back-pink',
    name: 'Full Stack Instagram Clone',
    description: 'Built a complete clone of Instagram, allowing users to share photos and connect with friends in a familiar social media environment.',
    link: 'https://github.com/adrianhajdin/social_media_app',
    },
    {
    iconUrl: estate,
    theme: 'btn-back-black',
    name: 'Real-Estate Application',
    description: 'Developed a web application for real estate listings, facilitating property searches and connecting buyers with sellers.',
    link: 'https://github.com/adrianhajdin/projects_realestate',
    },
    {
    iconUrl: summiz,
    theme: 'btn-back-yellow',
    name: 'AI Summarizer Application',
    description: 'App that leverages AI to automatically generate concise & informative summaries from lengthy text content, or blogs.',
    link: 'https://github.com/adrianhajdin/project_ai_summarizer',
    }
    ];
  2. TidbitsJS revised this gist Nov 9, 2023. 1 changed file with 183 additions and 0 deletions.
    183 changes: 183 additions & 0 deletions index.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,183 @@
    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Work+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap");

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    :root {
    --blue-rgb: 237 245 255;
    --green-rgb: 125 161 35;
    }

    body {
    font-family: "Work Sans", sans-serif;
    }

    body:has(.card[data-color="blue"]:hover) {
    background-color: rgb(var(--blue-rgb) / 25%);
    }

    body:has(.card[data-color="green"]:hover) {
    background-color: rgb(var(--green-rgb) / 25%);
    }

    @layer utilities {
    .max-container {
    @apply max-w-5xl mx-auto sm:p-16 pb-12 !pt-[126px] px-8 min-h-[calc(100vh-80px)];
    }

    .head-text {
    @apply sm:text-5xl text-3xl font-semibold sm:leading-snug font-poppins;
    }

    .subhead-text {
    @apply font-semibold sm:text-3xl text-xl relative font-poppins;
    }

    .blue-gradient_text {
    @apply bg-gradient-to-r from-[#00c6ff] to-[#0072ff] bg-clip-text text-transparent;
    }

    .input {
    @apply bg-white border border-gray-200 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 mt-2.5 font-normal shadow-card;
    }

    .textarea {
    @apply block p-2.5 w-full text-sm text-gray-900 bg-white rounded-lg border border-gray-200 focus:ring-blue-500 focus:border-blue-500 mt-2.5 font-normal shadow-card;
    }

    .btn {
    @apply text-white bg-gradient-to-r from-[#00c6ff] to-[#0072ff] focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center;
    }

    .header {
    @apply flex justify-between items-center sm:px-16 px-8 py-4 max-w-5xl mx-auto absolute top-0 bg-transparent z-10 right-0 left-0;
    }

    .footer {
    @apply max-w-5xl mx-auto sm:px-16 pb-6 px-8 flex flex-col gap-7;
    }

    .footer-container {
    @apply flex flex-wrap gap-7 items-center justify-between;
    }

    .info-box {
    @apply mx-5 relative flex text-white flex-col gap-3 max-w-2xl neo-brutalism-blue pt-4 pb-12 px-8;
    }

    .neo-btn {
    @apply py-3 px-6 rounded-lg text-blue-500 text-center font-semibold sm:w-1/2 w-[90%] -bottom-5 absolute mx-auto right-0 left-0 flex justify-center items-center gap-3;
    }

    .cta {
    @apply w-full flex items-center md:flex-row flex-col sm:mt-16 mt-8 gap-7;
    }

    .cta-text {
    @apply text-black-500 font-extrabold flex-1 text-3xl max-md:text-center;
    }
    }

    .glassmorphism {
    background: rgba(8, 116, 239, 0.07);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    }

    .logo {
    border-radius: 8.889px;
    background: #fff;
    box-shadow: 0px 10px 35px -4px rgba(67, 83, 255, 0.15),
    0px 1.5px 4px -1px rgba(67, 83, 255, 0.2);
    }

    .block-container {
    position: relative;
    transition: 250ms;
    perspective: 500px;
    }

    .block-container .btn-back {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: inherit;
    height: inherit;
    transition: 250ms;
    transform-style: preserve-3d;
    transform-origin: bottom right;
    transform: rotateZ(15deg);
    will-change: transform;
    box-shadow: 16px 0 40px #e4e4e4;
    }

    .block-container .btn-back-red {
    background: linear-gradient(135deg, #ff4b1f -20%, #ff9068 120%);
    }

    .block-container .btn-back-green {
    background: linear-gradient(135deg, #adfda2 -20%, #11d3f3 120%);
    }

    .block-container .btn-back-yellow {
    background: linear-gradient(135deg, #f7971e -20%, #ffd200 120%);
    }

    .block-container .btn-back-blue {
    background: linear-gradient(135deg, #0061ff -20%, #60efff 120%);
    }

    .block-container .btn-back-orange {
    background: linear-gradient(135deg, #ff0f7b -20%, #f89b29 120%);
    }

    .block-container .btn-back-pink {
    background: linear-gradient(135deg, #e81cff -20%, #40c9ff 120%);
    }

    .block-container .btn-back-black {
    background: linear-gradient(135deg, #0a1647 -20%, #e4e7e4 120%);
    }

    .block-container .btn-front {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: inherit;
    height: inherit;
    background-color: #ffffff33;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transition: 250ms;
    transform-style: preserve-3d;
    transform-origin: top left;
    overflow: hidden;
    }

    .block-container:hover > .btn-back {
    transform: translateZ(20px) rotateZ(15deg) rotateX(-20deg) rotateY(-20deg);
    }

    .block-container:hover > .btn-front {
    transform: translateZ(80px) translateY(-5px) rotateX(15deg) rotateY(15deg);
    }

    /* Neo Brutalism */
    .neo-brutalism-blue {
    background: #2b77e7;
    position: relative;
    border-radius: 10px;
    border: #2b77e7;
    box-shadow: 0.6vmin 0.6vmin #336cc1, 1vmin 1vmin #0092db, 1vmin 1vmin #0092db,
    0.65vmin 1vmin #0092db, 1vmin 0.65vmin #0092db;
    }

    .neo-brutalism-white {
    background: #fff;
    border: #fff;
    box-shadow: 0.6vmin 0.6vmin #fff, 1vmin 1vmin #d2e4ff, 1vmin 1vmin #d2e4ff,
    0.65vmin 1vmin #d2e4ff, 1vmin 0.65vmin #d2e4ff;
    }
  3. TidbitsJS created this gist Nov 9, 2023.
    31 changes: 31 additions & 0 deletions tailwind.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    /** @type {import('tailwindcss').Config} */
    export default {
    content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
    extend: {
    colors: {
    gray: {
    200: "#D5DAE1"
    },
    black: {
    DEFAULT: "#000",
    500: "#1D2235"
    },
    blue: {
    500: "#2b77e7"
    }
    },
    fontFamily: {
    worksans: ["Work Sans", "sans-serif"],
    poppins: ['Poppins', "sans-serif"]
    },
    boxShadow: {
    card: '0px 1px 2px 0px rgba(0, 0, 0, 0.05)'
    }
    },
    },
    plugins: [],
    }