codingcoffee/one
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: color fixes

Browse source 
Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>
This commit is contained in:
Ameya Shenoy 2025-06-24 15:55:59 +05:30
parent 0708f0600b
commit e51f83561a
5 changed files with 112 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/blog/page.tsx
View file

@ -76,7 +76,7 @@ export default async function BlogList() {
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 max-w-6xl mx-auto"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
{articles.map((article, idx) => ( {articles.map((article, idx) => (
<Link key={idx} href={`/blog${article.link}`}> <Link key={idx} href={`/blog${article.link}`}>
<div className="p-6 rounded-lg border flex flex-col justify-between hover:text-red-500 hover:shadow-2xl transition-shadow duration-500 ease-in-out h-[180px] md:h-[300px]"> <div className="p-6 rounded-lg border flex flex-col justify-between hover:text-red-500 hover:shadow-2xl dark:shadow-white transition-shadow duration-500 ease-in-out h-[180px] md:h-[300px]">
<p <p
className={`text-sm font-semibold mb-2" className={`text-sm font-semibold mb-2"
}`} }`}

2
frontend/src/app/layout.tsx
View file

@ -58,7 +58,7 @@ export default function RootLayout({
> >
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"
defaultTheme="system" defaultTheme="light"
enableSystem enableSystem
disableTransitionOnChange disableTransitionOnChange
> >

200
frontend/src/app/portfolio/page.tsx
View file

@ -15,78 +15,80 @@ export default async function Portfolio() {
// } // }
// console.log(ip, isIndianVisitor); // console.log(ip, isIndianVisitor);
const skillsLeft = { const skills = {
"Programming Languages": { left: {
Python: "vscode-icons:file-type-python", "Programming Languages": {
JavaScript: "vscode-icons:file-type-js-official", Python: "vscode-icons:file-type-python",
TypeScript: "vscode-icons:file-type-typescript-official", JavaScript: "vscode-icons:file-type-js-official",
Golang: "material-icon-theme:go", TypeScript: "vscode-icons:file-type-typescript-official",
}, Golang: "material-icon-theme:go",
AI: { },
LangChain: "simple-icons:langchain", AI: {
Livekit: "", LangChain: "simple-icons:langchain",
ElevenLabs: "simple-icons:elevenlabs", Livekit: "",
Ollama: "simple-icons:ollama", ElevenLabs: "simple-icons:elevenlabs",
vllm: "", Ollama: "simple-icons:ollama",
}, vllm: "",
Databases: { },
Postgres: "devicon:postgresql", Databases: {
Redis: "devicon:redis", Postgres: "devicon:postgresql",
ClickHouse: "devicon:clickhouse", Redis: "devicon:redis",
etcd: "logos:etcd", ClickHouse: "devicon:clickhouse",
Meilisearch: "logos:meilisearch", etcd: "logos:etcd",
Typesense: "logos:typesense-icon", Meilisearch: "logos:meilisearch",
qdrant: "logos:qdrant-icon", Typesense: "logos:typesense-icon",
MySQL: "logos:mysql-icon", qdrant: "logos:qdrant-icon",
}, MySQL: "logos:mysql-icon",
"Cloud Providers": { },
AWS: "logos:aws", "Cloud Providers": {
"Microsoft Azure": "material-icon-theme:azure", AWS: "logos:aws",
"Google Cloud Platform GCP": "material-icon-theme:gcp", "Microsoft Azure": "material-icon-theme:azure",
DigitalOcean: "devicon:digitalocean", "Google Cloud Platform GCP": "material-icon-theme:gcp",
// Scaleway: "simple-icons:scaleway", DigitalOcean: "devicon:digitalocean",
// Hetzner: "simple-icons:hetzner", // Scaleway: "simple-icons:scaleway",
Cloudflare: "devicon:cloudflare", // Hetzner: "simple-icons:hetzner",
}, Cloudflare: "devicon:cloudflare",
}; },
const skillsRight = {
"Web Frameworks": {
FastAPI: "devicon:fastapi",
Django: "material-icon-theme:django",
"Next.js": "devicon:nextjs",
Flask: "simple-icons:flask",
ReactJS: "material-icon-theme:react",
}, },
right: {
"Web Frameworks": {
FastAPI: "devicon:fastapi",
Django: "material-icon-theme:django",
"Next.js": "devicon:nextjs",
Flask: "simple-icons:flask",
ReactJS: "material-icon-theme:react",
},
DevOps: { DevOps: {
Kubernetes: "material-icon-theme:kubernetes", Kubernetes: "material-icon-theme:kubernetes",
Ansible: "devicon:ansible", Ansible: "devicon:ansible",
Docker: "material-icon-theme:docker", Docker: "material-icon-theme:docker",
// Vagrant: "material-icon-theme:vagrant", // Vagrant: "material-icon-theme:vagrant",
// "VMware ESXi": "carbon:logo-vmware", // "VMware ESXi": "carbon:logo-vmware",
Nomad: "devicon:nomad", Nomad: "devicon:nomad",
Terraform: "material-icon-theme:terraform", Terraform: "material-icon-theme:terraform",
Bash: "devicon:bash", Bash: "devicon:bash",
// Packer: "devicon:packer", // Packer: "devicon:packer",
// "HashiCorp Vault": "devicon:vault", // "HashiCorp Vault": "devicon:vault",
Jenkins: "material-icon-theme:jenkins", Jenkins: "material-icon-theme:jenkins",
// KVM: "simple-icons:qemu", // KVM: "simple-icons:qemu",
// Nagios: null, // Nagios: null,
Prometheus: "devicon:prometheus", Prometheus: "devicon:prometheus",
Grafana: "devicon:grafana", Grafana: "devicon:grafana",
// InfluxDB: "devicon:influxdb", // InfluxDB: "devicon:influxdb",
Sentry: "material-icon-theme:sentry", Sentry: "material-icon-theme:sentry",
Kafka: "devicon:apachekafka", Kafka: "devicon:apachekafka",
// Selenium: "devicon:selenium", // Selenium: "devicon:selenium",
}, },
Robotics: { Robotics: {
"Robot Operating System ROS": "devicon:ros", "Robot Operating System ROS": "devicon:ros",
}, },
"Spoken Languages": { "Spoken Languages": {
English: "", English: "",
Hindi: "", Hindi: "",
Marathi: "", Marathi: "",
Konkani: "", Konkani: "",
},
}, },
}; };
@ -148,10 +150,8 @@ export default async function Portfolio() {
<div className=""> <div className="">
<div className="uppercase tracking-[0.2em] text-gray-500 dark:text-gray-100 flex items-center justify-between pb-20"> <div className="uppercase tracking-[0.2em] text-gray-500 dark:text-gray-100 flex items-center justify-between pb-20">
<div>About Me</div> <div>About Me</div>
<Link <Link href="https://resume.codingcoffee.me">
href="https://resume.codingcoffee.me" <div className="flex border-gray-200 border-2 p-2 rounded-full pointer-cursor">
>
<div className="flex border-gray-200 border-2 p-2 pointer-cursor underline">
Resume Resume
<Download /> <Download />
</div> </div>
@ -214,40 +214,26 @@ export default async function Portfolio() {
<div className="md:w-[40vw] w-[95vw] md:min-w-3xl"> <div className="md:w-[40vw] w-[95vw] md:min-w-3xl">
<div className="text-3xl pb-10 gap-10">Key Skills</div> <div className="text-3xl pb-10 gap-10">Key Skills</div>
<div className="grid grid-cols-1 md:grid-cols-2"> <div className="grid grid-cols-1 md:grid-cols-2">
<div> {Object.entries(skills).map(([_, sideMap]) => (
{Object.entries(skillsLeft).map(([topic, skillsMap]) => ( <div>
<div key={topic}> {Object.entries(sideMap).map(([topic, skillsMap]) => (
<div className="text-xl pb-5">{topic}</div> <div key={topic}>
<div className="flex items-center flex-wrap pb-5 gap-2"> <div className="text-xl pb-5">{topic}</div>
{Object.entries(skillsMap).map(([language, icon]) => ( <div className="flex items-center flex-wrap pb-5 gap-2">
<span {Object.entries(skillsMap).map(([language, icon]) => (
key={language} <span
className="flex items-center bg-red-50 dark:bg-red-900 px-3 py-1 rounded-full text-gray-700 dark:text-white gap-2" key={language}
> className="flex items-center px-3 py-1 rounded-full gap-2"
<Icon icon={icon} className="inline-block" /> {language} >
</span> <Icon icon={icon} className="inline-block" />{" "}
))} {language}
</span>
))}
</div>
</div> </div>
</div> ))}
))} </div>
</div> ))}
<div>
{Object.entries(skillsRight).map(([topic, skillsMap]) => (
<div key={topic}>
<div className="text-xl pb-5">{topic}</div>
<div className="flex items-center flex-wrap pb-5 gap-2">
{Object.entries(skillsMap).map(([language, icon]) => (
<span
key={language}
className="flex items-center bg-red-50 dark:bg-red-900 px-3 py-1 rounded-full text-gray-700 dark:text-white gap-2"
>
<Icon icon={icon} className="inline-block" /> {language}
</span>
))}
</div>
</div>
))}
</div>
</div> </div>
</div> </div>
</div> </div>

37
frontend/src/components/ModeToggle.tsx
View file

@ -13,28 +13,23 @@ import {
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
export function ModeToggle() { export function ModeToggle() {
const { setTheme } = useTheme(); const { resolvedTheme, setTheme } = useTheme();
return ( return (
<DropdownMenu> <div>
<DropdownMenuTrigger asChild> <Button
<Button variant="outline" size="icon"> variant="outline"
<Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" /> size="icon"
<Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" /> onClick={() => {
<span className="sr-only">Toggle theme</span> if (resolvedTheme == "light") {
</Button> setTheme("dark");
</DropdownMenuTrigger> } else {
<DropdownMenuContent align="end"> setTheme("light");
<DropdownMenuItem onClick={() => setTheme("light")}> }
Light }}
</DropdownMenuItem> >
<DropdownMenuItem onClick={() => setTheme("dark")}> {resolvedTheme === "dark" ? <Moon /> : <Sun />}
Dark </Button>
</DropdownMenuItem> </div>
<DropdownMenuItem onClick={() => setTheme("system")}>
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
); );
} }

2
frontend/src/components/Navbar.tsx
View file

@ -70,7 +70,7 @@ export function NavigationMenu() {
</Link> </Link>
*/} */}
</div> </div>
<div className="fixed md:right-1/3 right-2 -translate-x-1/2 -translate-y-1/2 bottom-5 md:top-10 md:bottom-auto z-20 backdrop-blur-sm bg-white/20 outline-none rounded-lg border-1"> <div className="fixed md:right-2 right-2 -translate-x-1/2 -translate-y-1/2 bottom-5 md:top-10 md:bottom-auto z-20 backdrop-blur-sm bg-white/20 outline-none rounded-lg border-1">
<ModeToggle /> <ModeToggle />
</div> </div>
</div> </div>