loading...
Cover image for Show me your personal website/portfolio

Show me your personal website/portfolio

theonlybeardedbeast profile image TheOnlyBeardedBeast ・1 min read

So, show me your website/portfolio and tell me what technologies do you use and why?

Here is mine https://thedev.sk

It uses Preact and Typescript, Bundled by Parcel, everything is prerendered and hosted on http://now.sh

FYI: the image for the site background is a render of a 3D model made in ZBrush.

I know the whole thing is a bit overblown, it would take less time to build the whole thing from scratch without preact, ts..., just good old html/css/vanilla js, but I wanted to try Preact and Parcel, and I saw an opportunity to use them in this side project.

It's your turn, show me what you got!

Discussion

markdown guide
 

Here's mine sunchayn.github.io/old. Now, it's on hold as I'm planning to make a new one.

The technology stack I've used was vanilla JS (ES6) and SASS3 alongside Gulp as a build tool.

 

Look great, congrats πŸ‘πŸ‘πŸ‘

 

nice, you nailed the terminal look πŸ‘

 

Love the blue screen at the end of the page!!

 

Here's mine andrewbaisden.com/ the backend is in Node and the frontend is in Next.js. Deployed to Netlify.

Andrew Baisden Portfolio

 

Can you make one for me? Not a site, but you know, just make me look as cool as you? 😎

 

I just follow Saitama’s Workout.

Every single day!!!

100 Push Ups, 100 Sit Ups, 100 Squats, and 10KM Running.

😎

OK! We'll start with $saitamaWorkout / 5 and go from there!

 

It’s just good lighting πŸ˜…

 

Really nice, I noticed that you have horizontal scrollbars on your page caused by the 100vw which is used on the div right inside the header element, give the header 100% width and replace the 100vw with 100% too, it will make the issue gone. But other than that it is really nice, nice power level ;)

 

Thanks for the feedback I will look into it. I don't see those scrollbars though what OS and browser did you see it in?

13 inch MacBook pro, with the native mac os, latest chrome browser, I have an always visible scrollbar, and the 100vw never counts with the width of the scrollbar. I hope this information will help you to debug ;)

 

A few months ago I went back to the future.

My ultimate technology stack is...

  • HTML
  • CSS
  • Server Side Includes
  • JavaScript tiny enough to embed all of it to every HTML page

It is all vanilla. No frameworks, no build systems, no libraries, no tooling. Later on I might consider porting it all over to Deno just for the fun of it. But more important would be to improve the content and design :)

MerriNet
merri.net

 

Feels like an old game interface, interesting πŸ‘ great job!

 

Thanks! It is a mixture of Final Fantasy IX and Heroes of Might and Magic III with some custom HD-resolutioning on the repeating textures :)

Thanks for the insight πŸ™

 
 

And I've never even used an Amiga! :)

Well it's never too late πŸ˜„ although it might be a bit difficult to find one nowadays 😁

 

That time to first paint 🀩 so clean and fast! Very nice

 

This is mine mdor.dev/

I want to start adding more features, but I tried to keep it simple.

I kept the stack to the minimum.

For the site:

  • ES6
  • CSS 3
  • normalize
  • typed js.

For the build process:

  • Babel
  • autoprefixer
  • webpack
  • cssnano
  • postcss
  • imagemin
  • node.

For the code quality:

  • eslint
  • husky
  • lint-staged

So far, it has:
Performance: 97
Accessibility: 100
Best Practices: 100
SEO: 100

And the load time is very decent, coming from the network tab:
361 kB resources
Finish: 487 ms
DOMContentLoaded: 306 ms
Load: 451

This is the repo github.com/MDOR/mdor

TODO:

  • update the deploy process
  • include a section to keep my tooling bookmarks
 

Hi really nice page, I see you even customized the scrollbar, but I found a really annoying bug, after I used the navigations buttons the site does not allows me to scroll, it is stuck on one place, no mousewheel, no touchpad, I cant even move the scrollbar with the mouse, navigation through the menu works. The scrollbar works when you load the page at the firs time, but it stops working after you use a navigation button. Please check it out. Tested on chrome/edge chormium, both latest on windows 10, 15.6 inch screen Full HD, 125% scaling in windows display settings.

 

Nice! Thank you for report that., I'll take a look.

 

Mine is carlevans.dev I use Craft as my CMS and use Eleventy to build a static site which is hosted for free thanks to Netlify / AWS. I use Nunjucks as a template engine. It doesn’t use a front end framework but it does use Barba.js for page transitions 😊

 
 

You got me with that one, nice, simple minimalistic, nice colors πŸ‘

 

I was actually working on my portfolio website around 3 months ago. Designed this all by myself from scratch. Since then, I've learnt react, gatsby and next.js and right now I'm in the phase of migrating this design to react based stack, for improved performance. Still most of the design will remain the same. You can have a look here : ishandeveloper.com

ishandeveloper

Moreover, I have also created a personal blog of my own using Gatsby. I'd love for you to have a look at it here : blog.ishandeveloper.com
ishandeveloper Blog

 

Loved, the blog page...

Can I get the source code for the blog site?

I am currently working on a Dev.to plugin that can display your all blogs on the external page and would appreciate getting the source code the project.

Here is the link.
hemant-blog.netlify.app/

Sorry this has a dirty CSS, cause I have been busy on other project and don't want to design it now.

Thank you;

 

Thats really nice, it is clean, nice usage of empty spaces and great color choices in the blog for post background. πŸ‘

 
 

Ishan at least in my screen the icons at the bottom of the homepage are cut in half.

 

Thanks for reporting the issue. I'm sorry that you had to face it.
It's probably a bug with the container css, I'll surely fix it soon.

 

Sharing mine: jeffjadulco.com
Things I used:

  • Reactjs
  • Gatsby and its plugins (it made my life so much easier)
  • GrahpQL (it was overwhelming at first but thanks to their docs)
  • tailwindcss (it accelerated my understanding of css concepts)
  • MDX (I love markdown but I love MDX even more)
 

Nice, both versions (light and dark) simple and clear πŸ‘ In what language powers you graphql backend? I mostly choose hot-chocolate or graphql.net for .net or typegraphql for node, because I love the code-first approach.

 

Oh that was Gatsby's GraphQL for generating pages at build time (node). No back-end. Sorry for the confusion!

no problem, I have never worked with gatsby, so I just forgot that graphql is part of it :) thanks for the clarification.

 

My personal website is: Bobby Iliev
And here is a website that I've been helping with recently: DevDojo you should check it out!

 

Nice portfolio πŸ‘ devdojo looks nice, I will save it to my bookmarks.

 

Thanks for the nice feedback! πŸ™Œ

 

Here is mine. expressJs for the backend and no frontend frameworks or libraries.

BaselAkasha.com

 

Nice, so you are doing it old school πŸ‘ what template engine do you use?

 
 

Here you go rathik.net/ , Built in VuePress and backend for markup post and page , I connected to forestry as my simple backend
Inline-style:
alt text

 
 

I tried to keep the design simple and minimal.

chadalen.com

 

That's a lot of tech for 'simple' ! Photo feels very nice and human.

 

I mean the UI/Design not the tech stack haha

 

Good work clear and informative, nice projects you have there πŸ‘

 
 

igoradamenko.com

Just plain HTML and a bit of inlined CSS. Because β€œneat & fast” is the best choice to me.

 

I think both of you made a great job, this plain style can be really nice, the default html styling in the browser is garbage, and you tweeked that css enough to make it all look good! Great job πŸ‘

 
 

I made the js-coroutines site recently - to show off a library I made. It's React/JS not pre-rendered, but I should probably get around to fixing that! I use Material UI for styling and componentry.

I notice that it is way less fancy than many, I guess I was going for informative and single page for the primary content.

 

Still a nice one, rather an informative page than a fancy one without no information at all, but I think you found a sweet spot in between πŸ‘

 
 

Hey, Mike!
Have you considered using documentation platform, like gitbook or docusaurus?
I've seen some good examples: router5.js.org/ or babeljs.io/docs/en/

 

I've decided to take a different route and make my portfolio an old newspaper πŸ˜ŠπŸ˜…

amirmeimari.ir/

screenshot

 

Looks amazing, great job, you are unique in the comment section. The design you linked on dribble doesn't work for me, I have got a 404, but the miniature looked really cool, let me know if you fixed the dribble link, or just write the link into the comment if you have it. πŸ‘

 

Thanks for the feedback! Yeah, I've done some design in the past but decided to just focus on the development and deleted my dribble account. but here is a picture of that design if you are interested...

tehran travel concept

That looks really great! Excellent work!

 
 

Great design, Mark! I especially liked project/article badges style!

I've recently developed framd.cc:

It uses NextJS for both FE and BE (therefore it's a bit slow: need to split out the DB api. An advice is welcome!) + RxJS for animations/resource management. I've described the idea and dev process here:

 

Thank you. Really nice, so you have built a programming language for generating gifs, that's nice, maybe you cold extend it to create meme-s. I see you are using a CSS grid, on smaller screen there is a horizontal scrollbar, because of the width of the images, the grid gains larger width than the screen, and a margin around the grid would help for the readability. A really nice project, a nice article, I wish the best, keep it up. πŸ‘ your project reminds me this one sonic-pi.net/ it allows you to program your music

 

Woah, the project you linked, sonic-pi.net/, β€” this is super awesome!
Will look deeper into it!

Yep, mine is buggy here and there :) Will check the smaller screens and readability issues, thx!
The language is quite simple now, but I thought to extend it so users can interact with the scene/Emoji. To gamify it, you know.

Anyhow, thank you for the feedback, Mark!

 

Looks great! Here's mine: Pradeep CE.

This is brand new because I just picked up React/Gatsby (tutorials on those soon!). If About Me | Pradeep CE sounds like something you can identify with, tweet at me: let's talk / build something together! πŸ™‚

 

Nice page/blog you have there, at this time I am experimenting with something, but maybe later this year I can find spare time to build something! Thanks.

 

Are you kidding? Mine is thedev.id :D it's not the personal website though.

If you asking one, the real is upset.dev, a really simple landing page built with bare HTML and inlined CSS. No frameworks allowed.

 

Aw man, that's nice :D you know the "thedev" domain is really nice for emails too, "mark@thedev.sk" not yet ready :D But I like the idea with the subdomains :D Nice clean personal website, great projects, I understand the no framework policy πŸ‘

 

Thanks, yours too!

I like the idea for emails, maybe I can set up one for frans@thedev.id and there is a possibility I can provide this for public needs as well (name@thedev.id), but still cannot solve the privacy and reliability issues.

 

I actually reworked my website a few days ago. It can be found at ricardoboss.de and I use NuxtJS and SASS (with Bootstrap v5 Alpha). It is deployed as my GitHub.io page automatically every time I push some commits. The first article I wrote documents this in more detail.

 

Hi a nice site you have there πŸ‘ Nice setup. One thing caught my eye, you have "rΓ©sumΓ©" directly in the url, I dont think thats safe for the url, the site works just check it out, a slugify generator would generate it like "resume".

 

Hi there! Thanks for the feedback! I hesitated to put non-ascii characters in the url but I decided to do it, because I thought modern browsers can handle those. I could add an alias, though. Anyway, nice catch!

 
 

Here is mine: turnerj.com

It is an ASP.NET Core website using Razor Pages. For CSS, I am using Tachyons. The site is deployed to Azure, with build/deployment through Azure DevOps.

 

I like it, .net core is deeply in my heart, nice hover on the cards! How do you like the razor pages, I tried them once for a small project, currently I am trying blazor.

 

I think Razor Pages are an improvement to the general MVC architecture - it allows for a better separation without feeling like I have dozens of files representing a basic action. Currently use it across 3 sites of mine and a web application I am developing - so far so good!

What's your thoughts on Blazor like so far?

I really like it, currently I am working on my million dollar idea :D feels solid, but the tooling feels a bit slowly developed, vs code for some reason doesn't like blazor files, and linting is not that good, visual studio handles it better. I use a library called blazor styled which helps a lot, but no style highlighting inside. And the rebuild takes too much time, if I compare it to a React app development, but I like c# I like how you write components, renderfragments cascadingvalues to share a context of a parental component to its descendants.

 

Hi all. Great portfolios I see in here. I'm new to the frontend world. I'm not currently currently working as a frontend developer but trying to.

Here is my portfolio

iamnelsonmartins.com

There is still a few sharp corners to fix like the about page. Maybe add a little bit more about me.

Fill free to shoot some advices or criticism regarding it

 

Hi Nelson, Thats really great work, I like it πŸ‘ one thing which is hard for my eye is the hover efect on card, when you have dark mode, and you hover over the card it changes to white, add a transitition to make it more pleasant for the eyes.

 

Thank you for your feedback. I've updated meanwhile

 

Here is mine: richardcoric.netlify.app/

I used React JS because im currently learning react, and it was a fun way to practice.

I also used a combination of SCSS and styled components because I'm really enjoying CSS-in-JS at the moment; and I like the fact that I can use partials with SCSS.

I would like to add a way to translate the site on the click of a button but I need to figure out how to do that.

 

Thats a nice site you have built! πŸ‘ I really like the intro screen graphics, congrats! Try i18n-react for translations ;)

 

Thankyou I'll look into that, should be easier than rewriting the entire site in my native language. 😁

 

And here's mine : l3m.in

screenshot of l3m.in

I recently added cover for articles & projects, and the reading time.

Pure vanilla php (poo mvc)/html5/css3, with a scoop of javascript :)

 

Nice! Pure vanilla php, man you have my respect πŸ‘ I like your domain name.

 

Here's mine: flexrweb.com/showcaser

Technologies used:

  • Html & css
  • javascript/jquery
  • reactorjs (a JS framework i designed)
  • angular js
  • infinityUI (a CSS framework library i also built)
 

Great work, nice colors πŸ‘ I think you exactly know what you are doing πŸ‘

 
 

Mine is belev.dev

Tech used: Gatsby, Netlify, Netlify DNS. I wanted to play around with Gatsby and this is why I choose it. Good performance, SEO, customizable and React based. For deployment I wanted something with which I can start really quickly and Netlify was perfect for that. Doing almost nothing get’s you up to a point with deployed site, deployment on push to master, preview for PR, SSL from Netlify DNS. I am pretty happy with the setup and the time it takes to go live.

 

I believe that, I have that now.sh setup, which works similarly like netlify, just a command and my site was up and running, Great choices nice and simple site, nice job πŸ‘

 
 

I submit my humble blog which I finished umm last week! (portfolio is on the works) nehemek.com , also it is in spanish (my native language) but Google's translate does a good job to english if you need!

Frontend: Plain JS and CSS. I'm using Vue for some pages but those are not publicly available yet.
Backend: PHP.
CMS: Prismic.io
Analytics: Fathom

 

That look really great nice accent, gives the blog really modern look with the typography and grayscale images, and even when I open the post and see some colored image, it still well plays together. πŸ‘ nice job

 
 

Nice πŸ‘ are you satisfied with 11ty?

 

Thank you! I am very happy with 11ty. They really have done a wonderful job of simplifying the process of building a static website. As developers, we already have enough complexity to deal with.

Maybe I will give it a try but at first, I want to try wyam.io/ , I have never heard 11ty before so thanks for that insight :)

Wyam looks very interesting! However, it does look like work on it has been stopped, and the author is now building a new product. I found this on the Wyam github page:

"Note This project is essentially archived. Wyam has been rebranded and rebooted as Statiq. New development is happening over at Statiq.Framework and Statiq.Web.

You might want to take a look at the new project statiq.dev/.

Aw that is sad, thanks, at this point I am working on an app in blazor, so the info I had on wyam was old.

 

Here is mine : jimmyklein.fr

Jimmy KLEIN

It is powered by Gatsby, designed with tailwindcss and deployed on Netlify !

No dedicated server to handle, it's a pleasure to just get to the point : the content !

 

Nice, its good to see a lot of developers leaning towards simplicity, good job πŸ‘

 

Here's mine on Gatsby/netlify. It's always a work in progress, most of my effort is focused on the content. I slowly make the platform as a whole a bit better over time.

waylonwalker.com

 

Nice. Feels grunge, the cards like posters on a pub wall πŸ‘ πŸ‘

 

I only have a blog, which is not very impressive as design: mydev-journey.blogspot.com/.
Yours is very well designed, just that I would prefer the same font for headings/menus as for the whole text.

 

Thanks, nice development journey on the blog! That font choice was intentional, I tried to use one font but didn't fit my expectations, then I (read an article or saw a video, I don't remember exactly) about design where they noted this method. Anyway, I am not a designer either, I went through a lot of designs on dribble for inspiration, for example, neumorphism on the cards.

 

Here's mine: mishal23.github.io

It's mainly a blog with some pages about the work I do.

Built with Gatsby.js as I like the server-side rendering feature as it becomes fast + PWA support. Deployed on GitHub Pages.

 
 

Lots of awesome portfolios here. Well done guys!

Here's mine gabriellinassi.site. Sorry for not supporting both languages PT-BR and US-ENG for now.

Btw I'm very undecided if I should migrate it to NextJs/Gatsby or let it like this since I want to keep working on it and create a blog in the future. However, I'm afraid it's just too much for a simple portfolio.

 

Nice πŸ‘ I think it's on you, I think it would be manageable both ways. But you can still divide you blog and portfolio to 2 different apps and just link each other, as a lot of guys did. Keep it up :)

 

This is my portfolio and here is the blog.

If you liked it then, checkout the portfolio code here

GitHub logo rahuldkjain / minimal-portfolio

πŸ’ͺ A clean, minimal, responsive, and customizable portfolio template to showcase skills, experience, achievements, and favorites (movies & TVs).

Personal Porfolio for developers

πŸ’ͺ Awesome Personal Portfolio

The minimal, responsive and easily customisable portfolio for developers.

portfolio for software developer portfolio for software developer portfolio for software developer portfolio for software developer

portfolio for developers

⚑ Pages

🎯 Home (Introduction, Skills, Contact me)

🎯 Work (Internships, Projects, Miscellaneous Projects)

🎯 Achievements And Certifications

🎯 Favourites (Movies, TV/ Web Shows)

πŸš€ Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

You'll need Git and Node.js (which comes with npm) installed on your computer.

node@v10.16.0 or higher
npm@6.9.0 or higher
git@2.17.1 or higher

πŸ”§ How To Use

From your command line, clone and run minimal-portfolio:

# Clone this repository
$ git clone https://github.com/rahuldkjain/minimal-portfolio.git
# Go into the repository
$ cd minimal-portfolio
# Install dependencies
$ npm install
# Run 
$ npm run dev

πŸ› οΈ Customize

If you like the portfolio and want to use it to create your own, please refer customization manual.

πŸ§‘β€πŸ’» Technologies used

 

The chosen accent color gives me some neon vibes on that black background πŸ‘ nice job.

 

Here I am at dylanoleary.dev.

I used Gatsby for the front end and used Ghost to power my blog section. The front end is hosted by Netlify and the Ghost content lives on Digital Ocean.

Cheers!

 

Really nice setup, I will try digital ocean in the future, the pricing seem fair, betten than amazon or azure. Nice job πŸ‘

 

Here's what I got: alexitaylor.dev

Tech Stack:

  • Next.js
  • Some Tailwind
  • Hosted on Vercel

alt text

 

I like how the white border and the bold text plays together with that animated background, nice job πŸ‘

 

Here is mine: soniagarcia.dev
It is a static generated personal website and blog made with Nuxt and hosted for free in Netlify. I have published a couple of posts showing how to build a website like it.

 

Nice stack, I like the color choices, nice and readable πŸ‘

 

Here's mine jonathanyeong.com.

  • No Frontend framework
  • Hugo as the static site generator.
  • Deployed on Netlify
  • Forestry.io as the headless CMS.

Homepage

I'm a backend developer so design is definitely not my forte. Currently, trying to come up with redesigns. Any feedback is greatly appreciated!

 

I think your stack and site is really nice, with simplicity you cant make anything wrong, even if you are a backend developer, you nailed it, it is nice πŸ‘

 
 

Simple clear fast, I like that you have the content centered, nut 100% width what makes the text more readable, nice job πŸ‘

 
 

mahmoud.codes

Built using Gatsby, Theme-UI and emotion. Deployed to Netlify

 

Dude, your SSL is got some error. Please look at it.

  • The dark mode is too nice, and thanks for better dark mode colour.
 

Oh damn. Thanks for letting me know!

 
 

sergix.dev

Vue, Gridsome, and TailwindCSS

Now web monetized!

 

Amazing designs, I really like it, if you would like to cooperate in the future, let me know πŸ‘

 

That'd be awesome! If you have any ideas hit me up!

 

Here is mine
ehsanazizi.me

Prototyped in Adobe XD
Pure HTML and CSS and some SVG
Hosted with Github Pages

 

Nice, I like the style, I see we have chosen similar dev paths. From that many tools (figma, sketch,lunacy,invison) why did you choose adobe?

 

Thanks man,
I tried many of these tools but ended with choosing either Figma or Adobe XD and
the only reason for choosing XD is that I was looking for a complete offline solution otherwise I would definitely go with Figma as it has more features and overall is better than XD.

I understand, I still like to use offline solutions too, I am using Invision studio, but it still feels like it is in early stages. But I do really small amount of designing, and in case I need to edit some vector art I use affinity designer.

 

Hey Mark! I've recently built my first ever portfolio web app using just Angular! Check out here.

vikramkadiam.netlify.app

I also wrote a blog about it on my journey in building it.

 

Hi Vikram nice job πŸ‘ I like the overall style, the green you choose is nice, angular is interesting choice these days.

 
 

Here's mine: richiemccoll.com/.

What I used:

  • React
  • Gatsby
  • MDX
  • Emotion (CSS-in-JS - If I were to start from scratch, I'd use Tailwind.css)
  • Netlify
 

Nice work, simple and informative, and as I see you have a strong managable stack. πŸ‘ I just hate css in js, but I hate premade css too :D I am the write scss from scratch guy :D

 

I really like the combination of MDX, Gatsby and Netlify.

I also liked to write scss back in the day, but now I'm just too lazy. Tailwind hits the sweet spot!

 

Here's mine. kenovienadu.me
It was build using react a few months ago. What are your thoughts?

 

Nice I like the background and color combination choices, great work πŸ‘

 
 

Here’s mine: nive.sh

It’s built with Next js and Tailwind CSS. I regularly update it with programming related posts. Check it out.

 

Really nice minimalistic page, both the page and a post detail looks good πŸ‘

 

Post details page is my favourite 😍

 

Here is mine. Is a modified Gatsby theme, but in the future I plan to totally rewrite a new one: gughog.github.io/portfolio/

gughog portfolio

 

Nice, when you create it make a post about it, share your knowledge! πŸ‘

 

Mine, rajeshpeddalachugari.github.io/
Recently completely re-written in Vue.js.
Used W3.CSS as css framework, which is my favourite css framework.

 
 

Here's mine abhishekdev.tech.

Please give your feedback and suggestion if something needs to be improved.

 

I like your page, interesting color combination, I noticed that you hover menu states overflow here is my idea how the hover should look, anyway great job πŸ‘
Hover state

 

Hey thanks for the suggestion, i am definitely gonna do it.πŸ˜„πŸ˜„

 

hemant.codes

Tech Stack:
HTML, CSS, SCSS, JS, jquery, Bootstrap, Bit of PHP for forms...

But still under development,